Объект API превращается в строку - неожиданный токен o в JSON

Question

Посмотрел похожие ответы на переполнение стека, но не могу понять это.

Я делаю вызов API, который определенно возвращает объект. Когда я перебираю свои данные и вставляю их в DOM, они отображаются в виде строки.

Поэтому, когда я возвращаюсь к JSON.parse(data) моим данным, они возвращают следующую ошибку:

Uncaught (в обещании) SyntaxError: Неожиданный токен o в JSON в позиции 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: 
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
    };
}