Being required to design a distinct div for every article I am extracting from the API

Question

Being required to design a distinct div for every article I am extracting from the API

In the midst of developing a website for my college project, I have successfully configured my news API to pull and display data using JavaScript.

Currently, I am faced with the challenge of having to create separate div elements each time I want to add new data to one of my article fields. This process is becoming messy as I aim to populate multiple articles with this data without the need to continuously create new divs.

Is there a way to optimize this by having a single article-image div and dynamically generating new ones to populate them with API data based on array values?

var url =
  "HIDDEN_API_KEY";
  
// Fetch request
var req = new Request(url);
fetch(req)
  .then(function(response) {
    return response.json();
  })
  .then(function(res) {
    console.log(res);

// Populating div elements
document.getElementById("stadium_name").innerHTML = (res.articles[1].title);
document.getElementById("stadium_description").innerHTML = (res.articles[1].content);

var articleimg1 = document.getElementById('article-image1');
articleimg1.appendChild(document.createElement('img')).src = (res.articles[1].urlToImage);

...
  });

   <div class="col-md-3 d-flex align-items-stretch">
                <div class="card mt-4 stadiumCard">
                    <h3 id="stadium_name"></h3>
                    <div id="article-image1"></div>
                    <p id="stadium_description">
                        - Text content here -
                    </p>
                </div>
            </div>

            // Additional card structures similar to the first example

javascript html css

Answer 1

Answer №1

To streamline the process, you can develop a "Article" class that is responsible for generating new HTML article elements with nested components (such as title, image, description) and populating their content. Upon receiving data from an API response, iterate through it and add the newly created articles to the designated HTML container. Once the container is filled with articles, showcase all of them simultaneously to your user.

class Article {
  constructor(ArticleData) {
    this.article = document.createElement('article');
    this.title = document.createElement('h3');
    this.img = document.createElement('img');
    this.description = document.createElement('p');
    this.populateContainer();
    this.populateContent(ArticleData);
  }
  populateContainer() {
    this.article.appendChild(this.title);
    this.article.appendChild(this.img);
    this.article.appendChild(this.description);
  }
  populateContent(ArticleData) {
    this.title.innerText = ArticleData.title;
    this.img.src = ArticleData.img;
    this.description.innerText = ArticleData.description;
  }
  getNode() {
    return this.article;
  }
}

fetch('APIendpoint')
  .then(res => res.json())
  .then(articles => {
    const wrapper = document.createElement('div');
    articles.forEach(article => wrapper.appendChild(new Article(article).getNode()));
    document.body.appendChild(wrapper);
  })

Answer 2

To streamline the process, you can develop a "Article" class that is responsible for generating new HTML article elements with nested components (such as title, image, description) and populating their content. Upon receiving data from an API response, iterate through it and add the newly created articles to the designated HTML container. Once the container is filled with articles, showcase all of them simultaneously to your user.

class Article {
  constructor(ArticleData) {
    this.article = document.createElement('article');
    this.title = document.createElement('h3');
    this.img = document.createElement('img');
    this.description = document.createElement('p');
    this.populateContainer();
    this.populateContent(ArticleData);
  }
  populateContainer() {
    this.article.appendChild(this.title);
    this.article.appendChild(this.img);
    this.article.appendChild(this.description);
  }
  populateContent(ArticleData) {
    this.title.innerText = ArticleData.title;
    this.img.src = ArticleData.img;
    this.description.innerText = ArticleData.description;
  }
  getNode() {
    return this.article;
  }
}

fetch('APIendpoint')
  .then(res => res.json())
  .then(articles => {
    const wrapper = document.createElement('div');
    articles.forEach(article => wrapper.appendChild(new Article(article).getNode()));
    document.body.appendChild(wrapper);
  })

Being required to design a distinct div for every article I am extracting from the API

Answer №1

Similar questions

Modifying the appearance of the login field shown in the image

What is the best way to define multiple variables in ionic 2 using Angular2 and TypeScript?

No location matched any routes

Implementing bidirectional data binding with Semantic UI's search dropdown feature in Vue.js

Steps to prevent submission of input field until all necessary fields and checkboxes are filled, disabled the submit button

Utilizing icons with vuetify's v-select component: a guide

Conditionally enable or disable button by comparing textbox values within a gridview using C# programming

What could be causing the padding of my anchor element to extend outside the boundaries of its parent list

Conceal descendant of list item and reveal upon clicking

Developing maintenance logic in Angular to control subsequent API requests

ReactJS: Error in syntax detected in src/App.js at line 16, column 6. This token is unexpected

Adjust the viewing area dimensions on a web browser

Prevent FullCalender date cells from resizing when additional events are added

Encountering a script error that reads "TypeError: $ is not defined as a function

What is the best location for implementing role-based authentication in a MeanJS application?

How do you write functions in ES6?

Issues with HTML5 video playback have been reported in both Chrome and Firefox browsers

Tips for selecting the initial and final elements of a specific class

Error encountered at /edit-menu/edit/: The 'Product' object does not contain the attribute 'is_valid'

Having trouble with @babel/plugin-proposal-optional-chaining in Vue.js <script> tag