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

Center the image within the div by setting its position to absolute

React Images: Carousel display issue with images not centered

Is there a way to prevent elements from resizing when zooming in or out?

JQuery fixed div bounces unpredictably when scrolling

What is the correct way to define the onClick event in a React component?

How to handle redirection in React when encountering a 404 error with React

Tips for transferring data from a parent component to a child component in React?

How can we achieve a seamless fade transition effect between images in Ionic 2?

What is the best way to add a color swatch image using Javascript?

What is the best way to get rid of a connect-flash notification?

Can you explain Node.js and its applications as well as how it is commonly used?

Retrieve the minimum and maximum values from a multi-dimensional array

Enhancing Website Functionality: How to Swap iFrame for DIV using PHP and AJAX

Side navigation in Angular is not causing the main content to shrink

What causes the discrepancy in pixel size between these two web pages on the same device?

Developing a personalized loop in handlebars templates

Populating fields in a new AngularJS document from a table

Exploring ways to access data stored in interconnected models, such as MongoDB and NodeJS

What is the process for submitting and storing a collection of files in a database as a list?

Removing an element from an array within MongoDB