JSON.parse and JSON.stringify

Question

I am trying to get the response from the API call to output so that it is formatted with line breaks and so on. I tried both parse and stringify and still only get the output as a single line.

var HttpClient = function() {
this.get = function(url, callback) {
    var anHttpRequest = new XMLHttpRequest();
    anHttpRequest.onreadystatechange = function() { 
        if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
            callback(anHttpRequest.responseText);
    }

    anHttpRequest.open( "GET", url, true );            
    anHttpRequest.send( null );

   }
}

var client = new HttpClient();
client.get("https://api.opendota.com/api/players/26202535/matches?limit=1", 
function(response) {

JSON.parse(response);
console.log(response);
document.getElementById("demo").innerHTML=response;

});

Output: [{"match_id":3469695808,"player_slot":3,"radiant_win":true,"duration":1237,"game_mode":22,"lobby_type":7,"hero_id":13,"start_time":1506540251,"version":20,"kills":11,"deaths":2,"assists":12,"skill":3,"leaver_status":0,"party_size":1}]

score 2 · Answer 1 · answered Sep 29 '17 at 03:33

2

You'll need a PRE tag to keep the nice indentation (or add CSS white-space:pre to your destination tag), and then use the third argument of JSON.stringify to add indents

var data = '[{"match_id":3469695808,"player_slot":3,"radiant_win":true,"duration":1237,"game_mode":22,"lobby_type":7,"hero_id":13,"start_time":1506540251,"version":20,"kills":11,"deaths":2,"assists":12,"skill":3,"leaver_status":0,"party_size":1}]'

document.getElementById('demo').innerHTML = JSON.stringify(JSON.parse(data),null, 4);

<pre id="demo"></pre>

answered Sep 29 '17 at 03:33

Jaromanda X

53,868
5
73
87

Why do you need both stringify and parse? – Nick Sep 29 '17 at 03:36
original is JSON (a string) .... to prettify it, you parse then stringify :p – Jaromanda X Sep 29 '17 at 03:37

JSON.parse and JSON.stringify

1 Answers1