从外部 URL 获取带有嵌套数据的 JSON，并将其以纯文本形式显示在 div 中答案

【问题标题】：Get JSON with nested data from external URL and display it in a div as plain text从外部 URL 获取带有嵌套数据的 JSON，并将其以纯文本形式显示在 div 中
【发布时间】：2020-01-23 01:18:32
【问题描述】：

我使用的示例来自：

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

从带有嵌套数据的 JSON 中获取信息，但我得到了结果：

[object Object]

如何获取姓名或职位信息？

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"
         }
      }
   ]
}

【问题讨论】：

标签： javascript json

【解决方案1】：

您将无法直接分配它，因为data.queries 是一个对象。但是，如果我们使用 JSON.stringify 之类的东西，我们可以将其转换为字符串并在 UI 中使用。

由于您想要打印到 DOM，您可能会考虑使用 pre 元素而不是 div，因为这样可以实现更好的格式设置等。

另请注意，还有一些额外的参数可让您调整使用的空白等。

Here's 对类似问题的回答非常棒，因为它还在显示的 JSON 中添加了“语法高亮”。

【讨论】：

【解决方案2】：

如果您不使用任何框架，如 Angular（提供 JSON 管道），您可以尝试纯管道 javascript。

比如你可以用这个：http://azimi.me/json-formatter-js/

【讨论】：

【解决方案3】：

您不能在 JavaScript 中将对象打印为文本。但是，您将对象转换为字符串并将其附加到 DOM。而不是result.innerText = data.queries 尝试result.innerText = JSON.stringify(data.queries)。请注意输出字符串不会被格式化。

【讨论】：

谢谢。我得到了 JSON。我怎样才能只得到 NAME 或 JOB？
如果您想从 json 响应中获取特定数据，则不必将其转换为字符串。您可以使用console.log(data) 在浏览器控制台中检查data。根据您提供的示例数据，您可以分别使用 data.queries[0].query.NAME 和 data.queries[0].query.JOB 访问 NAME 和 JOB