Javascript Fetch api [对象对象]答案

【问题标题】：Javascript Fetch api [object object]Javascript Fetch api [对象对象]
【发布时间】：2016-11-22 03:18:51
【问题描述】：

为什么我尝试在下面运行的代码返回为 [object object]？

var request = new Request('data/some.json');

  fetch(request).then(function(response) {
    return response.json();
  }).then(function(json) {
      document.getElementById("test").innerHTML = json.items;
  });

【问题讨论】：

使用response.data。

标签： javascript

【解决方案1】：

document.getElementById("test").innerHTML = json.items; 是这里的问题。

你应该这样做：

document.getElementById("test").innerHTML = JSON.stringify(json.items);

这是因为如果您尝试在 DOM 中绘制纯 JavaScript 对象，它将调用对象的 toString 函数，这将导致 [object object]。

【讨论】：

【解决方案2】：

很可能是因为您的响应是表示对象的 JSON 字符串，然后将其解析为 JavaScript 对象。

当您尝试将此对象用作innerHTML 时，它会通过toString() 进行字符串化，然后返回[object Object]：

console.log(({foo: "bar"}).toString()); // "[object Object]"

如果您想显示对象的 JSON 表示，只需跳过通过 json() 将 JSON 解析为 JavaScript 对象的步骤，而是使用通过 text() 获得的纯文本表示：

var request = new Request('data/some.json');

fetch(request).then(function(response) {
    return response.text();
}).then(function(text) {
    document.getElementById("test").innerHTML = text;
});

【讨论】：

如果你只使用text，json.items很可能是undefined。