ForEach - отображать результаты из API

Возникла проблема при попытке получить доступ к значению "заголовок" в этом массиве объектов.

Это giphy api, и вы можете видеть ниже, я использую fetch для вызова api. И перебрать данные с помощью forEach.

Я могу назвать журнал API и консоли массивом, содержащим 5 объектов. Однако я не думаю, что правильно отображаю свои данные.

Например, когда я console.log console.log('foreach', elem);, я возвращаю в консоль следующее:

foreach 0
foreach 1
foreach 2
foreach 3
foreach 4

Однако когда я console.log('foreach', elem.title);, мне возвращают undefined. Я практически не могу получить доступ к каким-либо данным в объекте, так как мне все время возвращается неопределенный.

Вот мой код:

 fetch('http://api.giphy.com/v1/gifs/search?q=ryan+gosling&api_key=MY_API_KEY&limit=5')
    .then((res) => {
      return res.json();

    })
    .then((data) => {
      console.log(data.data);    
      // This returns a full array object of data

      let result = '<h2> Random User Info From Jsonplaceholder API</h2>';

      Object.keys(data.data).forEach(elem => {
        console.log('foreach', elem);


        result +=
                `<div>
                 <h5> User ID: ${elem} </h5>

                  </div>`;
        place.innerHTML = result;
      });
    });

В принципе, мне кажется, что я что-то не так делаю в своем ForEach.


javascript api foreach mapping array.prototype.map
person Reena Verma    schedule 11.03.2019    source источник
comment
Вы зацикливаетесь на клавишах. data.data[elem].title должно быть лучше.   -  person samb102    schedule 11.03.2019

Ответы (1)


arrow_upward
0
arrow_downward

Вы сказали, что ваш data - это массив объектов. Если вы будете использовать Object.key() на array. Он вернет индексы array, т.е. 0,1,2,3.... Вам нужно вызвать forEach() прямо в массиве

data.data.forEach(elem => {
        console.log('foreach', elem);
});

Для доступа к свойству элемента используйте точечную нотацию

data.data.forEach(elem => {
       console.log('foreach', elem.title);
});
person Maheer Ali    schedule 11.03.2019
comment
Ааааа, потрясающе, спасибо! Я пробовал это около 3 часов назад, но это было до того, как я понял, что мне нужно вызвать data.data. (И не только данные). Спасибо! - person Reena Verma; 11.03.2019
comment
@Reena Verma Примите ответ, если это помогло - person Maheer Ali; 11.03.2019