Iterate through array of objects using javascript

Question

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.

projects_all is an array of objects with a projects key mapped to yet another array. You're naming each object in projects_all the projects variable, but you're not accessing the projects key inside of those variables that holds the array you're after. Change it to projects.projects.forEach(...). — Zulfe
– Zulfe, Commented Feb 9, 2022 at 17:12
In your code, you need to call projects.projects.forEach - since each projects is an object with the key projects in it. I'd rename the outer one to project singular to disambiguate, as in response?.projects_all?.forEach((project) => { project.projects.forEach — Andy Ray
– Andy Ray, Commented Feb 9, 2022 at 17:12
Hi @Perry- It just says projects.forEach is not a function and highlights to this line of code -> projects.forEach(project) => { — Aren Trot
– Aren Trot, Commented Feb 9, 2022 at 17:12

Parvesh Kumar · Accepted Answer · 2022-02-09 17:13:25Z

2

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);
    });
  }
  );
}

answered Feb 9, 2022 at 17:13

Parvesh Kumar

1,1447 silver badges16 bronze badges

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

Comments

TKoL · Accepted Answer · 2022-02-09 17:14:49Z

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.

posixpascal · Accepted Answer · 2022-02-09 17:18:52Z

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);
   });
});

Collectives™ on Stack Overflow

Iterate through array of objects using javascript

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related