Getting attribute from json element

Question

I have a list of json object, with the attributes: first name, last name, and gender. I have a fetch function as such:

buttonsend.addEventListener("click", function(){
fetch("http://uinames.com/api/?amount=25&region=denmark&gender=female").then(
    function(response){
        return response.json();
    }
        ).then(function(jsonData){
            for(var i = 0; i <= jsonData.length; i ++){
                console.log(JSON.stringify(jsonData[i]).gender);
            }
            //document.getElementById("json").innerHTML = JSON.stringify(jsonData);

            console.log(2);

        });
    });

In my for loop how can I access each of the elements of the object, and display them in a table in my HTML code?

You have to do something like this first var data = JSON.parse(jsonData) and then do the loop and simply data[i].theAttributeYouWant. Also you’re trying to use stringify which converts it to text and not to an object. Your loop is not working because you’re trying to iterate a text, not a list of objects. — Jacobo
– Jacobo, Commented Sep 29, 2018 at 19:34

rufus1530 · Accepted Answer · 2018-09-29 19:55:14Z

Simple solution to your problem (vanilla ES6):

fetch('http://uinames.com/api/?amount=25&region=denmark&gender=female')
  .then(res => res.json()) // returns response data as JSON object
  .then(jsonData => {
    const destinationTable = document.querySelector('table'); // select table to which you want to append the data
    jsonData.forEach(record => {
      const tr = document.createElement('tr'); // create a table row
      const tdGender = document.createElement('td'); // create a table cell
      tdGender.innerText = record.gender; // insert gender to the created table cell
      tr.appendChild(tdGender); // append table cell to the created row
      destinationTable.appendChild(tr); // append created row to the table
    })
  });

This solution assumes that you have a table with the proper headers set up somewhere in your HTML document. It itterates through the records returned by the server and creates table row containing the table cell with gender value for each one of them.

Collectives™ on Stack Overflow

Getting attribute from json element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related