javascript - API 对象变成字符串 - JSON 中出现意外标记 o

Question

看过类似的堆栈溢出答案，但无法弄清楚这个问题。

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

因此，当我返回到 JSON.parse(data) 我的数据时，它会返回以下错误:

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

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

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

这是我的完整 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: 
7781}hits: (6) [{…}, {…}, {…}, {…}, {…}, {…}]total: 7781totalHits: 
500__proto__: Object

object
string

这是 DOM 的返回方式 - 模板文字作为字符串注入(inject):

/image/oONF1.png

Answer 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
    };
}