How do I iterate through an array of JSON objects in Javascript?

Question

Similarly phrased questions have been posed here multiple times, but none seem to help me with my issue. I am working with JSON data pulled from an API (PokeAPI), and I've stored this data in an object in Javascript. As I understand it, this then stores the JSON data in an array, Console.log(myData) yields me the following in the Chrome console:

Console output full data

I want to build a table laying out some of the data in each of these objects in the array. I thought I could access any field in each object by simply using code such as myData[0].name, but this is failing. Attempting to execute Console.log(myData[0]) simply returns an undefined object. How can I access the data I want iteratively?

My current attempt looks as follows:

function getData(inputData) {
var data = [];
    for (i = 0; i < inputData.length; i++) {
        data[i] = [
            inputData[i].id,
            inputData[i].name,
            inputData[i].height,
            inputData[i].weight,
            inputData[i].type[0],
            inputData[i].base_experience];
}

console.log(inputData); //Returns all the data
console.log(inputData[0]); //Returns undefined
return data;

Edit: A couple comments asked to see how I fetched the data from the API. Here it is:

function fetchData(endpoint_URL) {
$.ajax({
    url: base_URL + endpoint_URL,
    dataType: "json",
    success: function (response) {
        //console.log(response);
        let p = new Promise((resolve, reject) => {
            successHandler(response);
            if(dataSet != null) {
                //console.log(dataSet);
                resolve('Success');
            } else {
                reject('Failed');
            }
        })
        
        //console.log(dataSet);
        p.then((message) => {
            //console.log(dataSet);
            loadTableData(dataSet)
        }).catch((message) => {
            console.log("Data fetch unsuccessful");
        })
    },
    error: function(request, status, error){
        console.log(status);
    }
});


function successHandler(response) {
    dataSet = [];
    interimData = [];
        for (var i in response.results) {
            interimData[i] = response.results[i];
            //console.log(response.results[i]);
            //console.log(dataSet[i]);
        }
        //console.log(interimData);

        for (let i = 0; i<interimData.length; i++) {
            $.ajax({
                url: interimData[i].url,
                dataType: "json",
                success: function(details) {
                    dataSet[i] = details;
                }
            })
        };
        //console.log(dataSet);
};

The dataSet object is declared outside of any function (globally?) with the code var dataSet=[];. The getData() function is called in the first line of loadTableData()

Are you sure it's not a sparse array? Have you tried something like for (var e of inputData) if (e !== undefined) console.dir(e) ? — Harry
– Harry, Commented Jan 15, 2021 at 21:35
Please read Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions. — halfer
– halfer, Commented Jan 15, 2021 at 21:37
Is it possible to see more code? Like how are you fetching the data and then how are you calling the getData function with it? — codemonkey
– codemonkey, Commented Jan 15, 2021 at 21:45
@Harry a sparse array means that some of the array elements would be empty, correct? By this definition, I do not have a sparse array — Daniel Hulten
– Daniel Hulten, Commented Jan 15, 2021 at 21:45
if your dataSet is declared globally as var dataSet=[];, what's the rationale behind: dataSet != null? This won't ever be true. — codemonkey
– codemonkey, Commented Jan 15, 2021 at 22:12

Vasily Hall · Accepted Answer · 2021-01-15 22:41:37Z

2

You may be experiencing an issue where your console is showing non-synchronous data ("this value was evaluated just now" message). So this may be related to your operations regarding fetching the data from the API, if so, you may be console.log-ging the object at [0] which at the time of the call is undefined because this function completes its run before the data is actually fetched. The whole object may be console.log-able due to dev console behavior that will evaluate the object at the time you click on it in the console.

Here is a basic call using async and await:

async function getDataAsync () {
  let fetchedData;
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => fetchedData = json);
  console.log(fetchedData.userId); // 1
  return fetchedData;
}

var result1 = await getDataAsync();
console.log(JSON.stringify(result1)); // {"userId":1,"id":1,"title":"delectus aut autem","completed":false}

Here is one with nested calls using Promise.all():

async function getDataWithOtherResultsAsync () {
  let fetchedData;
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then(response => response.json())
    .then(json => fetchedData = json);
  
  const otherUrlsToTry = ['https://jsonplaceholder.typicode.com/todos/2', 'https://jsonplaceholder.typicode.com/todos/3'];
  const otherUrlPromises = otherUrlsToTry.map(m => 
    new Promise(
      resolve =>
      fetch(m)
       .then(n => n.json())
       .then(json => resolve(json))
    )
  );

  const otherUrlResults = await Promise.all(otherUrlPromises);

  return { mainData : fetchedData, otherData : otherUrlResults };
}

var result2 = await getDataWithOtherResultsAsync();
console.log(JSON.stringify(result2));
/*
{
  "mainData":{"userId":1,"id":1,"title":"delectus aut autem","completed":false},
  "otherData":[
    {"userId":1,"id":2,"title":"quis ut nam facilis et officia qui","completed":false},
    {"userId":1,"id":3,"title":"fugiat veniam minus","completed":false}
  ]
}
*/

edited Jan 15, 2021 at 22:41

answered Jan 15, 2021 at 21:39

Vasily Hall

96110 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Daniel Hulten Over a year ago

That seems unlikely, because when I get the data from the API I wait for all the data to have been loaded into inputData before I ever run this particular function. I was having issues with asynchronous stuff earlier on, and what I implemented seemed to fix that well

Vasily Hall Over a year ago

Can you add the pseudo code or your basic fetching snippet?

Vasily Hall Over a year ago

Okay you made the edit. Now from what I can tell, your successHandler(response); runs async but it's not awaited by anything and your resolve exits the promise early. You may be misled by the console because it will still evaluate the variable, but it will do so when you click it, not in real-time.

Daniel Hulten Over a year ago

That could certainly be the case, I only read about the whole Promise functionality earlier today. Do you have any suggestions of how that could be fixed?

3limin4t0r Over a year ago

@DanielHulten here is an example (assuming you use jQuery v3)

|

Nikolaus · Accepted Answer · 2021-01-17 12:38:35Z

That’s only a side-fact to what Vasily Hall told you.

It looks like you put an Array into an Array:

function getData(inputData) {
   var data = [];
   for (i = 0; i < inputData.length; i++) {
    // data[i] is declared as Array:
    data[i] = [
        inputData[i].id,
        inputData[i].name,
        inputData[i].height,
        inputData[i].weight,
        inputData[i].type[0],
        inputData[i].base_experience];
}

Try this instead:

function getData(inputData) {
var data = [];
for (i = 0; i < inputData.length; i++) {
    // bracelets makes it an object 
    data[i] = {
        inputData[i].id,
        inputData[i].name,
        inputData[i].height,
        inputData[i].weight,
        inputData[i].type[0],
        inputData[i].base_experience};

   // alternative you can use this:
   data.push({...inputData[i]});
  }

console.log(inputData); //Returns all the data
console.log(inputData[0]); //Returns undefined
return data;
}

Collectives™ on Stack Overflow

How do I iterate through an array of JSON objects in Javascript?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related