javascript: looping through nested object/array and adding property

Question

I am not very strong with Javascript. I have a nested array which is a JSON representation of the backend data. It shows a list of proofs and the images used in each proof. Its looks like below:

var project = [{
    "proof":"Proof_1",
    "images":[
        {
            "image_id":"12469",
            "name":"1911791794.jpg",
        },
        {
            "image_id":"12470",
            "name":"1911802897.jpg"
        },
        {
            "image_id":"12471",
            "name":"1911761073.jpg"
        }
},
{
    "proof":"Proof_2",
    "images":[
        {
            "image_id":"12469",
            "name":"1911791794.jpg",
        },
        {
            "image_id":"12470",
            "name":"1911802897.jpg"
        }
}];

I want to add the image_count to each proof section,so that modified data structure looks like this:

var project = [{
    "proof":"Proof_1",
    "image_count": 3, //<----this is new property I want to add
    "images":[
        {
            "image_id":"12469",
            ...

I checked some answers but because of my lack of understanding javascript iteration properly I am unable to get this done.

When I do: for (var proof in project) { console.log(proof); }

I just get 0,1,2...etc printed. I am not getting this, so I help someone in SO will help me understand how to add this property I want.

Thanks in advance.

If you found a solution please mark it as an accepted answer. — Daniel
– Daniel, Commented Nov 7, 2015 at 12:14

Daniel · Accepted Answer · 2015-11-07 11:21:24Z

2

You can take advantage of Array.prototype.map method:

project = project.map(function (item) {
    item.image_count = item.images.length;
    return item;
});

Working demo.

Also, as @Sebastian Lasse pointed out - you should name your array using plural form to avoid confusion (projects instead of project).

edited Nov 7, 2015 at 11:21

answered Nov 7, 2015 at 11:16

Daniel

18.7k8 gold badges69 silver badges90 bronze badges

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

2 Comments

sebilasse Over a year ago

right. And you should name your arrays in plural - "projects". This is a convention to avoid confusion.

Daniel Over a year ago

As I expected. No reason. :D

Oleksandr T. · Accepted Answer · 2015-11-07 11:20:46Z

You can use .map or simple loop

var projects = [{
  "proof": "Proof_1",
  "images": [{
    "image_id": "12469",
    "name": "1911791794.jpg",
  }, {
    "image_id": "12470",
    "name": "1911802897.jpg"
  }, {
    "image_id": "12471",
    "name": "1911761073.jpg"
  }]
}, {
  "proof": "Proof_2",
  "images": [{
    "image_id": "12469",
    "name": "1911791794.jpg",
  }, {
    "image_id": "12470",
    "name": "1911802897.jpg"
  }]
}];

projects = projects.map(function (element) {
  element.image_count = element.images.length;
  return element;
});

console.log(projects);

var len = projects.length, i;
for (i = 0; i < len; i++) {
    projects[i].image_count = projects[i].images.length;
}

console.log(projects);

davidkonrad · Accepted Answer · 2015-11-07 11:23:36Z

1

You could - after correcting the missing ] error in your JSON - do this :

project.forEach(function(proof) {
    proof.image_count = proof.images.length;
})

demo -> http://jsfiddle.net/dLd8wvpb/

edited Nov 7, 2015 at 11:23

answered Nov 7, 2015 at 11:18

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

3 Comments

Daniel Over a year ago

Actually, he wanted image_count instead of imageCount.

davidkonrad Over a year ago

@DanielKmak, thank you for that, guess I'm too opiniated to camelCase :(

Daniel Over a year ago

Yes, I also wanted to do that at first. camelCase is simply too good. :D

Collectives™ on Stack Overflow

javascript: looping through nested object/array and adding property

3 Answers 3

2 Comments

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Related