Iterate through array of objects using javascript-CodePudding

I am trying to iterate through the array of objects but somehow not getting it right. Can somone please let me know where i am going wrong.

Here is the data

const response = {
    "pass": 1,
    "fail": 2,
    "projects_all": [
        {
            "projects": [
                {
                    "name": "Project1",
                    "current": null,
                    "previous": {
                        "environment": "qa4nc",
                        "status": "UNKNOWN",
                    }
                }
            ]
        },
        {
            "projects": [
                {
                    "name": "Project2",
                    "current": null,
                    "previous": {
                        "environment": "qa4nc",
                        "status": "FAIL",
                    }
                },
                {
                    "name": "Project3",
                    "status": "LIVE",
                    "current": null,
                    "previous": {
                        "environment": "qa4nc",
                        "status": "UNKNOWN",
                    }
                }
            ]
        }
    ]
}

And here is the code i tried

if(response) {
  response?.projects_all?.forEach((projects) => {
     projects.forEach(project) => {
       if(project.previous !== null) {
         //do something here
       }
    });
 });
}

I am trying to iterate through this array of objects but it says projects not iterable. Any help is appreciated to make me understand where i am going wrong.

CodePudding user response：

You were missing iterating over an array properly. A good idea is to format the JSON object that you plan to iterate over. So that you can see what are the arrays and objects, and at what hierarchy.

if (response) {
  response?.projects_all?.forEach((project) => {
    project?.projects?.forEach((project) => {
      console.log(project?.name);
    });
  }
  );
}

CodePudding user response：

response?.projects_all?.forEach((projects) => {

This is the exact correct way to start the code. The problem that happens next is you apparently misunderstand what projects means in the following context

You do projects.forEach(project) as if you think projects is as array. projects is not an array at this point, it is an object that looks like this:

        {
            "projects": [
                {
                    "name": "Project1",
                    "current": null,
                    "previous": {
                        "environment": "qa4nc",
                        "status": "UNKNOWN",
                    }
                }
            ]
        }

So I would actually want to do projects.projects.forEach(project => { ... }), or you could change the variable name from projects so it makes more sense to read.

CodePudding user response：

First, determine what shape your response object currently has. By using the ?. operator your essentially muting JS built in error reporting.

From the context, I assume your response actually looks like this:

console.log(response);
{
   data: {
      projects_all: [ ... ]
   }
}

Therefore your existing code using response?.projects_all doesn't actually hit the projects_all property inside your response.

Can you try the following:

response.data.projects_all.forEach((project) => {
   console.info("Project: ", project);
   project.projects.forEach((project) => {
      console.log(project, project?.name);
   });
});

Alternatively, if you don't have a data key inside your response object, you can omit it in the loop:

response.data.projects_all.forEach((project) => {
   console.info("Project: ", project);
   project.projects.forEach((project) => {
      console.log(project, project?.name);
   });
});