JavaScript Simplified · One concept, one day, one project · Day 29 of 32

Working With API Data

Taking a whole list of data from an API and drawing it on the page. Everything from the course meets here. You build a mini news app.

By the end of today you can

Fetch a list of items from an API
Loop over the data and build an element for each
Read each object’s fields into a card
Build a mini news app

Yesterday you fetched one country. Real apps fetch lists: many articles, many products, many messages, and draw a card for each. Today every layer of the course works together: fetch, async/await, JSON, arrays, objects and the DOM. This is what building a real feature feels like.

1. The Shape of the Job

A list-from-an-API feature is always the same four steps:

Fetch the URL and await the response.
Await response.json() to get an array of objects.
Loop over the array (with forEach or map).
For each object, build an element from its fields and add it to the page.

You have done every one of these separately. Today you join them.

2. Building a Card From Each Item

What this code doesClicking Load fetches the articles and builds a card for each.

index.html

1
2

<button id="load">Load news</button>
<div id="feed"></div>

style.css

#feed{display:grid;gap:12px;margin-top:12px}
.card{display:flex;gap:12px;border:1px solid #ddd;border-radius:10px;padding:12px;max-width:420px}
.card img{border-radius:8px;flex:none}
.card h3{margin:0 0 4px;font-size:16px}
.card p{margin:0 0 6px;font-size:14px;color:#444}
.card a{font-size:13px;color:#0a6e6e;font-weight:bold;text-decoration:none}

app.js

document.getElementById("load").addEventListener("click", async function () {
  const feed = document.getElementById("feed");
  feed.textContent = "Loading...";
  try {
    const response = await fetch("https://api.example.com/news");
    const articles = await response.json(); // an array of objects
    feed.innerHTML = ""; // clear the loading text

    articles.forEach((article) => {
      const card = document.createElement("div");
      card.className = "card";
      card.innerHTML =
        '<img src="' + article.image + '" width="120" height="80" alt="">' +
        "<div><h3>" + article.title + "</h3>" +
        "<p>" + article.summary + "</p>" +
        '<a href="' + article.link + '">Read more</a></div>';
      feed.append(card);
    });
  } catch (error) {
    feed.textContent = "Could not load the news.";
  }
});

BROWSERindex.html  ·  after loading the news feed

One fetch, one forEach, a card built from each article’s fields. This is a real feature: the exact pattern behind a news feed, a product grid, or a list of search results.

Today’s Mini Project

📰 Mini News App

The page above is your project: fetch a list of articles and show each as a card with a title, an image, a summary and a link. Point it at a real news API and it works the same way.

Challenge (15 minutes)

Before the loop, show how many articles were loaded, like "2 stories", by reading articles.length. Expected: a count above the cards.

Try This

Change forEach to build the cards with map and join("") into one innerHTML instead. Both work; see which you find clearer.

Expected: the same feed, built a different way.

Picture This

A pile of JSON from a server became a tidy list of cards on your page. That transformation, data in, interface out, is most of what front-end developers do all day. You can now do it.

Checkpoint

What are the four steps of showing a list from an API?

Fetch the URL and await the response, await response.json() for an array, loop over the array, and build an element from each object to add to the page.

Why loop over the data?

Because the API returns many items. You build one card per item, which is how feeds, grids and search results are drawn.

Which earlier skills come together here?

fetch and async/await (Week 7), arrays and objects (Week 3), and the DOM (Week 4). A real feature uses the whole course at once.

Tick Before You Move On

☐ I can fetch a list from an API
☐ I can loop over the data
☐ I can build a card from each object
☐ I built the Mini News App

Quick Recap

Real apps fetch lists and draw one element per item. The steps: fetch, await json, loop, build and append. Each card is built from one object’s fields. This joins fetch, async, arrays, objects and the DOM into one feature.

Next: Day 30. Your news app forgets everything on refresh. Tomorrow you learn local storage, so your app can remember things in the browser.

Working With API Data

1. The Shape of the Job

2. Building a Card From Each Item

Today’s Mini Project

Checkpoint

Learn this with a real instructor