Блог

У меня есть 7 карточек в моем HTML-формате с изображением, заголовком, описанием и столбцом источника. Я пытаюсь получить данные из gnews api, а затем заполнить свои карточки данными, которые я получаю из api. Я бы хотел, чтобы данные из api заменили мои тексты-заполнители и изображения. Но я могу только поменять местами детали в первой карточке в моем HTML.

JSON из API выглядит следующим образом:

 "articles": [
        {
            "title": "xxx xxx",
            "description": "xxx xxx xxx",
            "content": "xxx xxx xxx xxx... [1514 chars]",
            "url": "xxx xxx",
            "image": "xxx.jpg",
            "publishedAt": "xxx",
            "source": {
                "name": "xxx",
                "url": "xxx.com/"
            }
        }
    ]
 

Я попробовал forEach, но он получил только первую карту

    const title = document.querySelectorAll(".title"),
   image = document.querySelector(".image"),
   source = document.querySelector(".source"),
   url = document.querySelector(".url"); 
   
   .........
   .then(function(data){
   data.articles.forEach(article => {
            title.innerHTML = article.title;
            image.style.backgroundImage = article.image;
           source.innerHTML = article.source.name;
           url.setAttribute('href', article.url);
            url.setAttribute('target', '_blank');
          });
}


// And also i tried to target every card individually which worked but that means i would have
// to target all 7 html cards that i have which would be quite cumbersome and repetitive to write.
// Below is the code for the individual targetting..

           news.title = data.articles[0].title;
           news.image = data.articles[0].image;
           news.source = data.articles[0].source.name;
           news.url = data.articles[0].url;
           news.description = data.articles[0].description;

 

Как я могу написать код, чтобы иметь возможность получать данные из всех статей в формате JSON и одновременно заполнять все остальные карточки разными новостями??

Привет и добро пожаловать в сообщество.

Похоже, вам еще предстоит проделать большую работу. Ну, вы должны сначала продумать это: вам нужно перебрать все карты и все компоненты, чего вы не делаете.

Это означало бы что-то вроде:

    .then(function(data){
   data.articles.forEach(article => {
            title.innerHTML = article.title;
            image.style.backgroundImage = article.image;
           source.innerHTML = article.source.name;
           url.setAttribute('href', article.url);
            url.setAttribute('target', '_blank');
          //some code to skip to another card
          });
 

Имейте в виду, что

    const title = document.querySelectorAll(".title"),
   image = document.querySelector(".image"),
   source = document.querySelector(".source"),
   url = document.querySelector(".url"); 
 

все они извлекают массивы элементов, поскольку у вас их семь, верно?
В вашем коде вы продолжаете указывать на изображение, источник заголовка и URL-адрес без указания индекса. Если это так, вы постоянно обновляете первый.

Попробуйте сделать это:

    .then(function(data){
   let x=0;
   data.articles.forEach(article => {
            title[x].innerHTML = article.title;
            image[x].style.backgroundImage = article.image;
           source[x].innerHTML = article.source.name;
           url[x].setAttribute('href', article.url);
            url[x].setAttribute('target', '_blank');
          x  
          });
 

Однако это не идеальное решение.

Взгляните на эту страницу и внимательно прочитайте ее. Потратьте на это немного времени — я сделал это! Если вы все еще не поняли, дайте мне знать!