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

"When attempting to render a Node inside the render() method in React, the error message 'Objects are not valid as a React child' is

Is there a way to trigger the opening of a new file or page when a CSS animation comes to an end?

Having trouble retrieving all JSON properties

Why does it display 'Undefined' when I attempt to access an object in an array in Next.js?

ReactJS is encountering a situation where two children are using the same key and causing

Vue: Storing selected list values in an array

Is there a disconnect between the input and upload methods?

Exploring the intricacies of JSON object retrieval

Validation scheme for the <speak> element

How to Maintain Button Activation in NextJS

The alignment of flexbox within a list item is not positioned at the top as expected

Separate the two divs with some added spacing

Utilizing the Ajax Tool Kit for Autocomplete Dropdowns in ASP .Net

Utilizing tags within the pre tag to incorporate additional styles

"Exploring the use of conditional rendering in React to dynamically hide and show components based

Encountering an error that states "this.push is not a function" when trying to select the 2nd or 3rd option

Passing variables from AJAX response to PHP using a passthru function

When a class and ID are dynamically applied, the click event may not fire and the CSS may not be applied

Bidirectional binding with complex objects

Steps to restrict input in a text area to only backspace and cursor movements