Как получить информацию по api?

Question

[Александр]

Здравствуйте! Помогите пожалуйста разобраться с api. Делаю так:

const API_KEY = "a1979074-3a11-448a-b2d2-55d1bb97cdf4";
const API_URL_POPULAR =
  "https://kinopoiskapiunofficial.tech/api/v2.2/films/1130869";

getMovies(API_URL_POPULAR);

async function getMovies(url) {
  const resp = await fetch(url, {
    headers: {
      "Content-Type": "application/json",
      "X-API-KEY": API_KEY,
    },
  });
  const respData = await resp.json();
  showMovies(respData);
  console.log(respData);
}

function showMovies(data) {
  const moviesEl = document.querySelector(".movies");

  document.querySelector(".movies").innerHTML = "";

  data.forEach((movie) => {
    const movieEl = document.createElement("div");
    movieEl.classList.add("movie");
    movieEl.innerHTML = `
<span>${movie.nameRu}</span>
        `;
    moviesEl.appendChild(movieEl);
  });
}

в console выдаёт ошибку - Uncaught (in promise) TypeError: data.forEach is not a function

Беря информацию из другого масива таким же методом, всё отлично работает.

const API_KEY = "a1979074-3a11-448a-b2d2-55d1bb97cdf4";
const API_URL_POPULAR =
  "https://kinopoiskapiunofficial.tech/api/v2.2/films/1130869";

getMovies(API_URL_POPULAR);

async function getMovies(url) {
  const resp = await fetch(url, {
    headers: {
      "Content-Type": "application/json",
      "X-API-KEY": API_KEY,
    },
  });
  const respData = await resp.json();
  showMovies(respData);
  console.log(respData);
}

function showMovies(data) {
  const moviesEl = document.querySelector(".movies");

  // Очищаем предыдущие фильмы
  document.querySelector(".movies").innerHTML = "";

  data.genres.forEach((movie) => {
    const movieEl = document.createElement("div");
    movieEl.classList.add("movie");
    movieEl.innerHTML = `
<span>${movie.genre}</span>
        `;
    moviesEl.appendChild(movieEl);
  });
}

Answer 1

[Чипекве]

data - объект, а не массив, поэтому у него нет метода .forEach()

Comments

[Александр]

Спасибо! Только я тогда не совсем понимаю как вытащить информацию из объекта?

[Чипекве]

ну так во втором варианте всё успешно вытаскивается:

data.genres

[Александр]

Чипекве, Во втаром да т.к genres это массив, а элементы которые не в массиве нет

[Чипекве]

К любому элементу также можно обратиться через точку, не только к массивам.

[Александр]

Чипекве, Попробовал без forEach, не работает

data.genres((movie) => {
    const movieEl = document.createElement("div");
    movieEl.classList.add("movie");
    movieEl.innerHTML = `
<span>${movie.genre}</span>
        `;
    moviesEl.appendChild(movieEl);
  });
}

[Чипекве]

И не нужно так пробовать. Через forEach же всё работает. Где проблема-то?

[Александр]

Чипекве,
Я хочу получить posterUrlPreview, делаю так

data.forEach((movie) => {
    const movieEl = document.createElement("div");
    movieEl.classList.add("movie");
    movieEl.innerHTML = `
<span>${movie.posterUrlPreview}</span>
        `;

но так не работает, не понимаю почему.
В случае с масивом genres всё отлично.

data.genres.forEach((movie) => {
    const movieEl = document.createElement("div");
    movieEl.classList.add("movie");
    movieEl.innerHTML = `
<span>${movie.genre}</span>
        `;

[Чипекве]

Чтобы обратиться к любому элементу объекта, нужно писать его через точку (или в скобках).

data.posterUrlPreview - там будет нужная ссылка, её не нужно перебирать, а можно сразу положить куда надо.
data.genres - там будет массив, который можно перебрать через .forEach() или другой метод.

Например вот так по-быстрому создать карточку фильма:

function showMovies(data) {
  const moviesEl = document.querySelector(".movies");
  
  moviesEl.innerHTML = `Название: ${data.nameRu}
    Жанры: ${data.genres.map(({ genre }) => `<span>${genre}</span>`).join(', ')}  
    Постер: <img src="${data.posterUrlPreview}">
    Описание: ${data.description}`;
}

[Александр]

Всё спасибо огромное!!! Теперь разобрался, получилось.