在 Javascript 中获取 API 返回 [object, object]

Question

所以我这里有这段代码，它从 URL 调用并在控制台中显示数组

fetch('http://jsonplaceholder.typicode.com/users') 
  .then(  
    function(response) {  
      if (response.status !== 200) {  
        console.log('Looks like there was a problem');  
        return;  
      }

      response.json().then(function(data){  
        console.log(data); 
      });  
    }  
  )  
  .catch(function(err) {  
    console.log('Fetch Error', err);  
})

然而，它打印出：

[object Object] {
  address: [object Object] {
    city: "Lebsackbury",
    geo: [object Object] { ... },
    street: "Kattie Turnpike",
    suite: "Suite 198",
    zipcode: "31428-2261"
  },

知道如何删除 [object, object] 并使其正常显示，与 url 中的一样吗？？

Answer 1

Fetch 不会 return [object object]。一切正常。

您观察到的是 console.log 如何处理嵌套对象的副产品——它使用内置的“toString()”，它添加了一些额外的信息，例如类型。

这种行为不同于现代 Web 浏览器处理 JSON 文本的方式，后者只是直接在浏览器中显示 window 原始状态以及一些基本格式。

要获得您期望的结果，请使用 console.log(JSON.stringify(data));，它将使用内置的 JSON 字符串化器。要添加更好的格式，您可以使用 console.log(JSON.stringify(data,null,2));

但是，您正在获取 JSON 响应，将其解析为一个对象，然后获取该对象并将其转回 JSON 字符串。这很愚蠢。

由于 URL return 是一个 JSON 字符串，您可以直接控制台记录该 JSON 字符串。

类似于console.log(response.body);

在 Javascript 中获取 API 返回 [object, object]

Fetch API in Javascript returning [object, object]

javascript

asynchronous

fetch