Как заполнить масив постов данными из json объекта?

Рейтинг: 0Ответов: 1Опубликовано: 18.07.2023

Есть несколько постов такого формата

<article class="row loop-post">
  <img src="assets/images/b1.jpg" alt="" class="img-responsive">
  <h2 class="ptitle" id="ptitle">Lorem Ipsum dolor is going to be hear</h2>
  <ul class="post-meta list-unstyled nav-pills">
    <li><a href="#"><i class="fa fa-calendar">july 25, 2008</i></a></li>
    <li><a href="#"><i class="fa fa-user">by admin</i></a></li>
  </ul>
  <div class="entry-content row" id="entry-content">
    <p>Aliquam vitae sem id sem efficitur interdum phasellus ut nulla nisi sed varius lacus pharet quam rutrum enim quis rhoncu estibulum sed maximus elits quisque act semper sem tempus nisic laoreet donec ex pharetra aliquam vitae sem id sem efficitur pharetra lacus quis eleifend. <br><a href="blog-post.html" class="read-more btn btn-primary">read more</a></p>
  </div>
</article>

я делаю запрос и получаю данные в json, после вставляю их в каждый пост

    const requestURL = 'https://newsdata.io/api/1/news?apikey=pub_259912209410b5f3d450560875b2b50776dc7&q=crypto&language=en&from_date=2023-01-19&to_date=2023-01-25';
    const request = new Request(requestURL);

    const response = await fetch(request);
    const cryptoNew = await response.json();

    populateNew(cryptoNew);
}

function populateNew(obj) {
const articleList = document.getElementsByClassName('loop-post');
const articles = obj.results;
for (const article of articleList) {
    console.log(article)
    const ptitle = article.querySelector('ptitle')
    const data = article.querySelector('fa-calendar')
    const user = article.querySelector('fa-user')
    const desc = article.querySelector('#p');
    const content = article.querySelector('#h4');
    for (const arr of articles) {

        if (arr.title !== null) {
            ptitle.textContent = arr.title;
        }
        if (arr.data !== null) {
            data.textContent = arr.data;
        }
        if (arr.creator !== null) {
            user.textContent = `Creator: ${arr.creator}`;
        }
        if (arr.description !== null) {
            desc.textContent = arr.description;
        }
        if (arr.content !== null) {
            content.textContent = arr.content;
        }
        console.log(arr)
    }

    article.querySelector('img-responsive').insertAdjacentHTML('afterend', ptitle)
}

}

populate();

но он не вставляет в сам html, пробовал через append но выдавал ошибку

main.get.js:24 Uncaught (in promise) TypeError: article.getElementById is not a function at populateNew (file:///C:/Users/%D0%9F%D0%9A/Desktop/%D0%9D%D0%BE%D0%B2%D0%B0%D1%8F%20%D0%BF%D0%B0%D0%BF%D0%BA%D0%B0%20(2)/assets/js/main.get.js:24:24) at populate (file:///C:/Users/%D0%9F%D0%9A/Desktop/%D0%9D%D0%BE%D0%B2%D0%B0%D1%8F%20%D0%BF%D0%B0%D0%BF%D0%BA%D0%B0%20(2)/assets/js/main.get.js:13:2)

при открытии поста он открывается в другой странице развернутым

<article class="row loop-post single-post">
  <img src="assets/images/b4.jpg" alt="" class="img-responsive">
  <h2 class="ptitle">Welcome to HostPro Wordpress Theme</h2>
  <ul class="post-meta list-unstyled nav-pills">
    <li><a href="#"><i class="fa fa-calendar">july 25, 2008</i></a></li>
    <li><a href="#"><i class="fa fa-user">by admin</i></a></li>
  </ul>
  <div class="entry-content row" id="entry-content">
     <p id="p">Aliquam vitae sem id sem efficitur interdum phasellus ut nulla nisi sed varius lacus pharet quam rutrum enim quis rhoncu estibulum sed maximus elits quisque act semper sem tempus nisic laoreet donec ex pharetra aliquam vitae sem id sem efficitur pharetra lacus quis eleifend.</p>
     <br>
     <br>
     <h4 id="h4">Maecenas malesuada orci a tristique pharetra things will be much better with donec elit turpis donec orcing going to open very soon</h4>
     <br>
     <br>
     <blockquote>
       <q>Integer lacinia malesuada justo sit amet vestibulum or ms dolor nonc nullam dapibus rhoncus tristique noc ultricies enim accums dolor nullam dapibus rhoncus turpis vehicela praesent feugiat tempor hendrerit donec turpis leo eget.</q>
     </blockquote>
  </div>
</article>

Ответы

▲ 0

У элементов нет метода getElementById. Воспользуйтесь querySelector, он находит элементы по CSS селектору:

// Формат таков:
// const someElement = article.querySelector(`#elementId`);
const desc = article.querySelector('#p');
const content = article.querySelector('#h4');