Question

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

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

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

未捕获（承诺）SyntaxError：JSON中位置1处的意外令牌o

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

基本上，我不希望将我的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.log的外观：

app.js loaded
count 0

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

object
string

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

https://i.imgur.com/JfQRxKk.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
    };
}

API对象变为字符串-JSON中的意外令牌o

1 个答案: