Get JSON with nested data from external URL and display it in a div as plain text

Question

I am using the example from:

Get JSON data from external URL and display it in a div as plain text

To get information from a JSON with nested data but I am getting the result:

[object Object]

How can I get the NAME or JOB information?

HTML

<div id="result" style="color:red"></div>

JavaScript

var getJSON = function(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open('get', url, true);
    xhr.responseType = 'json';
    xhr.onload = function() {
      var status = xhr.status;
      if (status == 200) {
        resolve(xhr.response);
      } else {
        reject(status);
      }
    };
    xhr.send();
  });
};

getJSON('https://www.googleapis.com/freebase/v1/text/en/bob_dylan').then(function(data) {
    alert('Your Json result is:  ' + data.queries); //you can comment this, i used it to debug

    result.innerText = data.queries; //display the result in an HTML element
}, function(status) { //error detection....
  alert('Something went wrong.');
});

JSON

{ 
  "queries":[ 
      { 
         "query":{ 
            "CODE":"555443567",
            "NAME":"NAME LASTNAME",
            "JOB":"JOB TITLE"
         }
      }
   ]
}

Pablo · Accepted Answer · 2019-09-23 00:51:41Z

1

You cannot print an object as text in JavaScript. However, you convert the object to string and append it to the DOM. Instead of result.innerText = data.queries try result.innerText = JSON.stringify(data.queries). Do note the output string won't be formatted.

answered Sep 23, 2019 at 0:51

Pablo

6,0767 gold badges38 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rodrick Over a year ago

Thanks. I got the JSON. How can I get just the NAME or JOB?

Pablo Over a year ago

If you want to get specific data from the json response then you do not have to convert it to a string. You inspect the data in the browser console by using console.log(data). Based on the example data you provided you can access the NAME and JOB respectively with data.queries[0].query.NAME and data.queries[0].query.JOB

Dody · Accepted Answer · 2019-09-23 00:53:52Z

0

You can try a pure pipe javascript if you don't use any framework like Angular (which provides a JSON pipe).

For example, you can use this one: http://azimi.me/json-formatter-js/

answered Sep 23, 2019 at 0:53

Dody

6889 silver badges22 bronze badges

Comments

waterfausett · Accepted Answer · 2019-09-23 01:22:06Z

0

You won't be able to assign it directly as data.queries is an object. However, if we use something like JSON.stringify we can convert it to a string and use that in the UI instead.

Since you're wanting to print to the DOM, you might consider using a pre element instead of a div as that will allow for better formatting etc.

also note there are some additional params that will allow you to adjust the whitespace used etc.

Here's an answer to a similar question that is pretty awesome as it adds "syntax highlighting" to the displayed JSON as well.

answered Sep 23, 2019 at 1:22

waterfausett

864 bronze badges

Collectives™ on Stack Overflow

Get JSON with nested data from external URL and display it in a div as plain text

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related