Javascript抓取API [对象对象]

Question

为什么我尝试在下面运行的代码返回[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; 
    }); 

Answer 1

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

你应该这样做：

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

这是因为，如果你尝试画一个简单的JavaScript对象的DOM，它会调用该对象的toString功能，这将导致[object object]。

Answer 2

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

当您尝试使用这个对象为innerHTML，它通过toString()字符串化，这反过来又返回[object Object]：

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

---

如果你想显示的JSON表示只需跳过将JSON解析为JavaScript对象的步骤，通过json()并使用纯文本表示形式获得通过text()代替：

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

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