Traversing JSON Data using Vanilla JavaScript to dynamically fill a specified amount of articles in an HTML page

Question

Traversing JSON Data using Vanilla JavaScript to dynamically fill a specified amount of articles in an HTML page

Here is the code along with my explanation and questions:

I'm utilizing myjson.com to create 12 'results'. These results represent 12 clients, each with different sets of data. For instance,

Client 1: First Name - James,

Address - 1234 Maple Street

Client 2: First Name - Jack,

Address - 4321 Lorem Ipsum Lane

My Query: How can I populate the following 12 articles in HTML using the JSON Data with a For Loop in my JavaScript and Ajax Request?

    <article>
        <img class="photo" height="100" width="100">
        <hgroup>
            <h1 class="name"></h1>
            <h2 class="email"></h2>
        </hgroup>
    </article>

    <!-- Repeat this article structure 11 more times -->

`const Employees = (function () { let displayStudent = document.querySelector('.photo'); let name = document.querySelector('.name'); let email = document.querySelector('.email'); let phone = document.querySelector('.phone'); let streetAddress = document.querySelector('.streetAddress'); let city = document.querySelector('.city'); let state = document.querySelector('.state'); let zip = document.querySelector('.zip'); const ajaxCall = function () { let hr = new XMLHttpRequest(); let url = 'https://api.myjson.com/bins/zfhmr'; hr.onreadystatechange = function () { if (hr.readyState === 4) { if (hr.status === 200) { let myObj = JSON.parse(hr.responseText); for(let i = 0; i < myObj.length; i++) { displayStudent.src = myObj.results[i].picture.large; name.innerHTML = myObj.results[i].name.first + " " + myObj.results[i].name.last; } } } else { console.log("ajax error: " + hr.response); } }; hr.open("GET", url, true); hr.send(); }; return { init: function () { ajaxCall(); } }; }()); Employees.init();`

I'm struggling to populate more than one article at a time with just one client's information. Any assistance would be highly appreciated!

Thank you

javascript html css ajax api

Answer 1

Answer №1

Upon examining your code example and comparing it to the JSON response, I noticed something peculiar.

This is what your JSON response looks like...

{
    "results": [...]
}

The for loop in your code appears as follows...

let myObj = JSON.parse(hr.responseText);
for(let i = 0; i < myObj.length; i++) {
    displayStudent.src = myObj.results[0].picture.large;
    name.innerHTML = myObj.results[0].name.first + " " + 
    myObj.results[0].name.last;
}

It seems that you are attempting to iterate through an object that does not have a .length property, indicating that myObj is not an array.
Furthermore, myObj.results[0] consistently retrieves the first result.

Possible Solution

In order to address this issue, you may want to dynamically insert HTML elements within your for loop.

<!-- Inside your HTML file -->
<div id="articleContainer"></div>

// Within your JavaScript ajax response (upon success)
if (hr.readyState === 4 && hr.status === 200) { // confirms completion of ajax request
    let container = document.querySelector('#articleContainer');
    let strArticles = "";

    let myObj = JSON.parse(hr.responseText);
    for(let i = 0; i < myObj.results.length; i++) {
        let resObj = myObj.results[i];

        strArticles += '<article>' +
                            '<img class="photo" src="' + resObj.picture.large + '" height="100" width="100">' +
                            '<hgroup>' +
                                '<h1 class="name">' + resObj.name.first + ' ' + name.last + '</h1>' +
                                '<h2 class="email">' + resObj.email + '</h2>' +
                            '</hgroup>' +
                        '</article>';
    }

    // Integrating the generated HTML string into the designated parent container element.
    container.innerHTML = strArticles;
}

I hope this resolves the issue for you :)

Answer 2

Upon examining your code example and comparing it to the JSON response, I noticed something peculiar.

This is what your JSON response looks like...

{
    "results": [...]
}

The for loop in your code appears as follows...

let myObj = JSON.parse(hr.responseText);
for(let i = 0; i < myObj.length; i++) {
    displayStudent.src = myObj.results[0].picture.large;
    name.innerHTML = myObj.results[0].name.first + " " + 
    myObj.results[0].name.last;
}

It seems that you are attempting to iterate through an object that does not have a .length property, indicating that myObj is not an array.
Furthermore, myObj.results[0] consistently retrieves the first result.

Possible Solution

In order to address this issue, you may want to dynamically insert HTML elements within your for loop.

<!-- Inside your HTML file -->
<div id="articleContainer"></div>

// Within your JavaScript ajax response (upon success)
if (hr.readyState === 4 && hr.status === 200) { // confirms completion of ajax request
    let container = document.querySelector('#articleContainer');
    let strArticles = "";

    let myObj = JSON.parse(hr.responseText);
    for(let i = 0; i < myObj.results.length; i++) {
        let resObj = myObj.results[i];

        strArticles += '<article>' +
                            '<img class="photo" src="' + resObj.picture.large + '" height="100" width="100">' +
                            '<hgroup>' +
                                '<h1 class="name">' + resObj.name.first + ' ' + name.last + '</h1>' +
                                '<h2 class="email">' + resObj.email + '</h2>' +
                            '</hgroup>' +
                        '</article>';
    }

    // Integrating the generated HTML string into the designated parent container element.
    container.innerHTML = strArticles;
}

I hope this resolves the issue for you :)

Answer 3

Answer №2

When working with variables in a for loop, it's important to ensure they are within the scope of the loop and avoid nesting if statements. If you need to populate HTML snippets with data, using a template can be more efficient than querying individual elements with selectors.

const Employees = (function() {
  let displayStudent = document.querySelector('.photo');
  let name = document.querySelector('.name');
  let email = document.querySelector('.email');
  let phone = document.querySelector('.phone');
  let streetAddress = document.querySelector('.streetAddress');
  let city = document.querySelector('.city');
  let state = document.querySelector('.state');
  let zip = document.querySelector('.zip');

  const ajaxCall = function() {
    let hr = new XMLHttpRequest();
    let url = 'https://api.myjson.com/bins/zfhmr'; //https://randomuser.me/api/
    
    hr.onreadystatechange = function() {
      if (hr.readyState === 4 && hr.status === 200) { 
        let myObj = JSON.parse(hr.responseText);
        for (let i = 0; i < myObj.length; i++) {
          displayStudent.src = myObj.results[0].picture.large;
          name.innerHTML = myObj.results[0].name.first + " " + myObj.results[0].name.last;
          
        }
      } else {
        console.log("ajax error: " + hr.response);
      }
    };

    hr.open("GET", url, true);
    hr.send();

    console.log(hr);


  };
  return {
    init: function() {
      ajaxCall();
    }
  };

})();

Employees.init();

<article>
  <img class="photo" height="100" width="100">
  <hgroup>
    <h1 class="name"></h1>
    <h2 class="email"></h2>
  </hgroup>
</article>

// Repeat this article snippet as needed

An example:

// Performing an AJAX call or fetch to retrieve data

var data = [{
  email: 'something'
}, {
  email: 'something2'
}, {
  email: 'blah'
}, {
  email: 'blah2'
}, {
  email: 'blah blah'
}, {
  email: ':o blah'
}]


data.forEach(item => {
  var div = document.createElement('div')
  div.innerHTML = `<div>some fancy box////   ${item.email}   \\\\\\some more facy box</div>`

  document.body.appendChild(div);
})

Answer 4

When working with variables in a for loop, it's important to ensure they are within the scope of the loop and avoid nesting if statements. If you need to populate HTML snippets with data, using a template can be more efficient than querying individual elements with selectors.

const Employees = (function() {
  let displayStudent = document.querySelector('.photo');
  let name = document.querySelector('.name');
  let email = document.querySelector('.email');
  let phone = document.querySelector('.phone');
  let streetAddress = document.querySelector('.streetAddress');
  let city = document.querySelector('.city');
  let state = document.querySelector('.state');
  let zip = document.querySelector('.zip');

  const ajaxCall = function() {
    let hr = new XMLHttpRequest();
    let url = 'https://api.myjson.com/bins/zfhmr'; //https://randomuser.me/api/
    
    hr.onreadystatechange = function() {
      if (hr.readyState === 4 && hr.status === 200) { 
        let myObj = JSON.parse(hr.responseText);
        for (let i = 0; i < myObj.length; i++) {
          displayStudent.src = myObj.results[0].picture.large;
          name.innerHTML = myObj.results[0].name.first + " " + myObj.results[0].name.last;
          
        }
      } else {
        console.log("ajax error: " + hr.response);
      }
    };

    hr.open("GET", url, true);
    hr.send();

    console.log(hr);


  };
  return {
    init: function() {
      ajaxCall();
    }
  };

})();

Employees.init();

<article>
  <img class="photo" height="100" width="100">
  <hgroup>
    <h1 class="name"></h1>
    <h2 class="email"></h2>
  </hgroup>
</article>

// Repeat this article snippet as needed

An example:

// Performing an AJAX call or fetch to retrieve data

var data = [{
  email: 'something'
}, {
  email: 'something2'
}, {
  email: 'blah'
}, {
  email: 'blah2'
}, {
  email: 'blah blah'
}, {
  email: ':o blah'
}]


data.forEach(item => {
  var div = document.createElement('div')
  div.innerHTML = `<div>some fancy box////   ${item.email}   \\\\\\some more facy box</div>`

  document.body.appendChild(div);
})

Traversing JSON Data using Vanilla JavaScript to dynamically fill a specified amount of articles in an HTML page

Answer №1

Answer №2

Similar questions

Is it possible to handle both ajax form submissions and browser post submissions in express.js?

Why are my indents disappearing when I save in VS Code?

How to display logged-in user information on the homepage

Discovering the specifics of an appointment within a shift event using FullCalendar

Proper alignment of div elements using Bootstrap

When working with Vue, setting the default value for props as a computed property is an

Using Vue to input an array

Angular, JavaScript, and PHP are three powerful programming languages that

JavaScript and HTML are commonly used programming languages for developing

Navigate to all hyperlinks in browser without the use of jQuery - specifically for Firefox OS

What is the best way to switch back and forth between two div elements?

Guidelines on creating actionable functions using JavaScript

Tips for adjusting the size of nav-pills when collapsing with bootstrap 5

Guidelines for aligning a form in the middle of the screen (positioned between the navigation bar and footer

Executing a prop function within the useEffect hook: a step-by-step guide

What are the steps to set up mocha to automatically monitor source or project files?

React router updates the URL without affecting the actual display

Angular service provided by MetronicApp

Is there a way to show a loading indicator while waiting for ajax to finish loading?

Adapting CSS according to input selection