API 对象变为字符串 - JSON 中的意外标记 o

Posted 2023-05-07

【中文标题】API 对象变为字符串 - JSON 中的意外标记 o

【英文标题】：API object turns to string - Unexpected token o in JSON

【发布时间】：2020-02-28 17:44:05

【问题描述】：

查看过类似的堆栈溢出答案，但无法弄清楚这一点。

我正在进行 API 调用，它肯定会返回一个对象。 当我遍历我的数据并将其注入 DOM 时，它会显示为一个字符串。

所以当我返回 JSON.parse(data) 我的数据时，它会返回以下错误：

Uncaught (in promise) SyntaxError: Unexpected token o in JSON at position 1

我知道，这是因为数据已经变成了字符串，但我没有在任何地方变成字符串。

基本上，我不希望我的elem.largeImageURL 被作为字符串注入。

这是我的完整 JS 代码。不知道我做错了什么？

function PixabayAPIService() 
const searchURL = 'https://pixabay.com/api/';
const apikey    = 'MY_API_KET';

function getImages(carouselContainer) 
  fetch(`$searchURL?key=9656065-$apikey&q=beautiful+landscape&image_type=photo&page=1&per_page=6`)
    .then((res) => 
      return res.json();
    )
    .then((data) => 
      console.log('data', data);   //HERE TYPEOF DATA IS OBJECT

      let result = '';
      data.hits.forEach(elem => 

        console.log(typeof elem.largeImageURL);  //HERE TYPEOF IS STRING
        result +=
                `<div class="item"><img src="$elem.largeImageURL" /></div>`;
        carouselContainer.append(result);
      );
    );


return 
  getImages
;

以下是我的 console.logs 的外观：

app.js loaded
count 0

data totalHits: 500, hits: Array(6), total: 
7781hits: (6) […, …, …, …, …, …]total: 7781totalHits: 
500__proto__: Object

object
string

以下是 DOM 的返回方式 - 模板文字作为字符串注入：

https://i.imgur.com/JfQRxKk.png

【问题讨论】：

你正在尝试解析一个可能是 [object Object] 的字符串 - 因为 fetch ... res.json() 返回一个 object 不需要 JSON.parse它 - 但是，您显示的代码不包括 JSON.parse(data) - 那么您显示的代码如何产生该错误？

为什么您希望 elem.largeImageURL 不是字符串。我认为应该是一个字符串。

我看到了问题...element.append(result) ...阅读documentation ...它不像jQuery

append() 不需要 html 字符串。它需要 Dom 元素。例如您可以使用 document.createElement("div") 创建一个 div 编辑：As @Brav

@ReenaVerma “对象变成字符串”在哪里？

【参考方案1】：

当使用element.append 时，它确实接受一个字符串，但它不会将该字符串解释为 HTML - 它只是将该字符串作为文本节点附加到元素中

你会想要这样的东西：

function PixabayAPIService() 
    const searchURL = 'https://pixabay.com/api/';
    const apikey = 'MY_API_KET';

    function getImages(carouselContainer) 
        fetch(`$searchURL?key=9656065-$apikey&q=beautiful+landscape&image_type=photo&page=1&per_page=6`)
        .then((res) => 
            return res.json();
        )
        .then((data) => 
            data.hits.forEach(elem => 
                // change from here
                let result = document.createElement('div');
                result.classList.add('item');
                result.innerHTML = `<img src="$elem.largeImageURL" />`;
                // to here
                carouselContainer.append(result);
            );
        );
    

    return 
        getImages
    ;

【讨论】：

= 非常感谢 Bravo！我没有意识到 append 会以这种方式误解。以前，我使用 innerHTML，它通常可以正常工作。那为什么我没有注意到这一点。谢谢！！！！！！

mis-interpret - 不，这不是对任何东西的误解，这就是函数的工作原理：p

Okie dokes - 一定会记住这一点的，哈哈 :)