JSON DOM activities

3 min readFeb 19, 2024

Let’s get hands-on! We’ll be using it for our practice.

JSON is a structured text-based format for the transmission of data, between web servers and clients.

This JavaScript code defines a constant variable requestUrl that stores the URL of a JSON file containing some raw JSON data. We create a new Request object with the requestUrl as its argument to fetch the data from the specified URL.

Next, to obtain the JSON, we use an API called fetch()to send the request from the client and retrieve the data from the URL. The fetch() function returns a Promise that resolves to a Response object, which represents the response to the request. The await keyword is used to pause the execution of the code until the Promise is resolved and the Response object is available.

The Response object, which can be used to access the data returned by the server.

Overall, this code is a common pattern used in JavaScript to fetch data from a remote URL using the fetch() function and the Request API.

We’ll extract the data from the Response object. The json() method of the Response object is called on the response variable, which returns a promise that resolves to the result of parsing the response body as JSON. We parse it into JSON as the transmitted data is of type string.

Next, we wrap this in an async function to return a promise

In JavaScript, the keyword async indicates that a function is asynchronous. When a function is declared with async keyword, it automatically returns a promise. The promise is resolved with the value returned by the async function or rejected with an uncaught exception.

Now we write two functions to get the data into our HTML pages. These functions will use the response object that we generated using the data we received from the request URL.

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">

    <title>Our superheroes</title>

    <link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
  </head>

  <body>

      <header>

      </header>

      <section>

      </section>

      <script src="./script.js"></script>
  </body>
</html>

function populateHeader (obj) {
    const header = document.querySelector('header');
    const h1 = document.createElement('h1');

    h1.textContent = obj.squadName;
    header.appendChild(h1);

    const para = document.createElement('p');
    para.textContent = `Hometown: ${obj.homeTown} // Formed: ${obj.formed}`; 

    header.appendChild(para);
}

// create superhero cards
function populateHeroes(obj) {
    const section = document.querySelector('section');
    const heroes = obj.members;

    for (const hero of heroes) {
        const article = document.createElement('article'); // hold the card

        const h2 = document.createElement('h2');
        const para1 = document.createElement('p');
        const para2 = document.createElement('p');
        const para3 = document.createElement('p');
        const list = document.createElement('ul');

        h2.textContent = hero.name;
        para1.textContent = `Secret Identity: ${hero.secretIdentity}`;

        para2.textContent = `Age: ${hero.age}`;
        para3.textContent = `Superpowers:`;

        const superPowers = hero.powers;
        for (const power of superPowers) {
            const li = document.createElement('li');
            li.textContent = power;
            list.appendChild(li);
        }

        article.appendChild(h2);
        article.appendChild(para1);
        article.appendChild(para2);
        article.appendChild(para3);
        article.appendChild(list);

        section.appendChild(article);

    }
}

populate(); // invoke the populate() function

Socials: https://twitter.com/Sensei_Gakusei

Github source: https://github.com/velvet-jedi/SuperHeroSquad

Github live project: https://velvet-jedi.github.io/SuperHeroSquad/

JSON DOM activities

Written by Geeky much!