How to do a 'for each' in this array of objects?

Question

{
  "test": "test1",
  "itens": [{
      "id": 1,
      "name": "TEST1",
      "value": 10
    },
    {
      "id": 2,
      "name": "TEST2",
      "value": 20
    },
    {
      "id": 3,
      "name": "TEST3",
      "value": 30
    },
    {
      "id": 4,
      "name": "TEST4",
      "value": 40
    },
    {
      "id": 5,
      "name": "TEST5",
      "value": 50
    },
    {
      "id": 6,
      "name": "TEST6",
      "value": 60
    },
    {
      "id": 7,
      "name": "TEST7",
      "value": 70
    }
  ]
}

I need to loop through every row of this array. I'm not having much success... Then I just need to alert all the values, or names, whatever only from ITENS field. I'm trying:

$.each(itensJson.itens, function( key, value ) {
  alert( value.name );
});

Could you edit your question and make a runnable snippet, so we can run and see the occurrence of the problem? (Use toolbar button; you can include jQuery in a snippet too) — trincot, Sep 08 '21 at 19:37
Does this answer your question? [How to loop through an array containing objects and access their properties](https://stackoverflow.com/questions/16626735/how-to-loop-through-an-array-containing-objects-and-access-their-properties) — Heretic Monkey, Sep 08 '21 at 19:54

score 0 · Accepted Answer · answered Sep 08 '21 at 19:40

0

Consider the following.

var jsonItens = {
  "test": "test1",
  "itens": [{
      "id": 1,
      "name": "TEST1",
      "value": 10
    },
    {
      "id": 2,
      "name": "TEST2",
      "value": 20
    },
    {
      "id": 3,
      "name": "TEST3",
      "value": 30
    },
    {
      "id": 4,
      "name": "TEST4",
      "value": 40
    },
    {
      "id": 5,
      "name": "TEST5",
      "value": 50
    },
    {
      "id": 6,
      "name": "TEST6",
      "value": 60
    },
    {
      "id": 7,
      "name": "TEST7",
      "value": 70
    }
  ]
};

$.each(jsonItens.itens, function(i, obj) {
  alert(obj.id +". " + obj.name + " Value: " + obj.value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

This will iterate your Array of Objects. You then just need to call the Object Key that you want to use.

answered Sep 08 '21 at 19:40

Twisty

30,304
2
26
45

Feel free to swap `alert` for `console.log` when using snippets. Also, how does this differ from the OP's code? – Heretic Monkey Sep 08 '21 at 19:42
@HereticMonkey as OP stated, "*...I just need to alert all the values, or names...*"; hence my example uses Alert. I also include the jQuery Library and show how to use each Object Key. – Twisty Sep 08 '21 at 19:44
When I wrote the comment, the code was exactly the same as the OP's. Good thing I commented during the grace period :P – Heretic Monkey Sep 08 '21 at 19:48

score 0 · Answer 2 · answered Sep 08 '21 at 19:44

Easier without jQuery, just plain vanilla Javascript.

Either use for...of (which works on any iterable):

for (const { name, value }  of foo.items) {
  console.log(`${name}: ${value}`);
}

or use Array.prototype.forEach (which only works on objects if forEach is in their prototype chain, like e.g. Array):

foo.items.forEach(({name, value}) => console.log(`${name}: ${value}`));

const foo = {
  "test": "test1",
  "items": [{
      "id": 1,
      "name": "TEST1",
      "value": 10
    },
    {
      "id": 2,
      "name": "TEST2",
      "value": 20
    },
    {
      "id": 3,
      "name": "TEST3",
      "value": 30
    },
    {
      "id": 4,
      "name": "TEST4",
      "value": 40
    },
    {
      "id": 5,
      "name": "TEST5",
      "value": 50
    },
    {
      "id": 6,
      "name": "TEST6",
      "value": 60
    },
    {
      "id": 7,
      "name": "TEST7",
      "value": 70
    }
  ]
}

for (const { name, value }  of foo.items) {
  console.log(`${name}: ${value}`);
}

foo.items.forEach(({name, value}) => console.log(`${name}: ${value}`));

How to do a 'for each' in this array of objects?

2 Answers2