Append parsed json to html

Question

Hello I want to append the parsed json(which I get from xmlhttprequest) to a html file.

Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>alert solr response</title>
<script src="https://code.jquery.com/jquery-3.2.1.js">
</script>
<script>
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == XMLHttpRequest.DONE) {
            var json = JSON.parse(xhr.responseText);
            var data = json.facet_counts.facet_dates["dc.date.accessioned_dt"];
            delete data.gap;
            delete data.end;
            delete data.start;
            console.log(data)
            $("#test").append(data); //here is the problem, I could append xhr.Responsetext but this is not what I want
        }
    }
    xhr.open('GET', 'http://localhost:8080/solr/search/select?indent=on&rows=0&facet=true&facet.date=dc.date.accessioned_dt&facet.date.start=2016-01-01T00:00:00Z&facet.date.end=2017-12-01T00:00:00Z&facet.date.gap=%2B1MONTH&q=search.resourcetype:2&wt=json&indent=true', true);
    xhr.send(null);
</script>
</head>
<body>
<p id = "test">This is the json sample: <br></p>
</body>
</html>

I know there are lot of similar questions out there and possible duplicates, I am sorry I couldn't use them for my case(Being a noob and all) Thank you

Stringify doesn't look nice and is hard to read, I want every field in different line as in json — john doe, Aug 31 '17 at 14:48
`JSON.stringify(obj, null, 2);` [Go meet god](https://stackoverflow.com/questions/4810841/how-can-i-pretty-print-json-using-javascript) — Orelsanpls, Aug 31 '17 at 14:49
Just a tip if you are using jQuery, [$.get()](https://api.jquery.com/jquery.get/) — Endless, Aug 31 '17 at 14:52
$("#test").append(JSON.stringify(data, null, 2)); doesn't really change anything it's simlar to stringify(data) — john doe, Aug 31 '17 at 14:57

score 0 · Answer 1 · answered Aug 31 '17 at 14:57

You can simplify this a bit if you are using jQuery, when you get your data you got to stringify the content using the third argument to get the indentation you want, since it's just plain text you would also have to append it to a <pre> tag or set the css at the p tag to: white-space: pre

$.get('https://httpbin.org/get').then(function(data) {
  delete data.gap;
  delete data.end;
  delete data.start;

  $("#test").text(JSON.stringify(data, null, 2));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre id="test"></pre>

OP wanted to parse and then delete some json element, you don't have parsing part in your jquery code. — MessitÖzil, Aug 31 '17 at 16:20

Append parsed json to html

1 Answers1