Angular 2 get key and value from json array with dynamic key

Question

I want to get key and value from json array with dynamic keys. Meaning, I don't know in advance what will be the keys.

This is an example to the json the function gets:

arr = [
       {key1: 'val1'},
       {key2: 'val2'},
       {key3: 'val3'}
      ];

It seems simple to me but I am unable to get the key and value for each item.

This is what I tried (based on this pipe):

for (let key of arr) {
   console.log ('key: ' +  key + ',  value: ' + arr[key]);
 }

But what I get in the log is the following:

key:[object Object], value: undefined

My expected behavior is to get the following:

key:key1, value:val1

What am I doing wrong? How can I get the keys and values?

for...of returns items (values) in array/object. for...in returns keys in array/object. so you need one more inner loop with for...in to get keys for each item. — dee zg, Jul 30 '17 at 10:35

score 20 · Accepted Answer · answered Jul 30 '17 at 10:35

In your example, you have an array of objects and each of these object has exactly one property.

for (let obj of arr) {
    console.log("object:", obj);
    for (let key in obj) {
        console.log("      key:", key, "value:", obj[key]);
    }
}

The following code from your posting

for (let key in arr) {
    console.log ('key: ' +  key + ',  value: ' + arr[key]);
}

... would work on a data structure like this:

let arr = {
    key1: 'val1',
    key2: 'val2',
    key3: 'val3'
};

score 5 · Answer 2 · edited Jan 02 '19 at 10:54

5

If you are more concerned to specify object like

var temp={'name':Dinesh,'age':18}

You may use following syntax.

console.log(Object.keys(temp)[0],Object.values(temp)[0]):

Specially zero index because object's both method keys and values return an array

edited Jan 02 '19 at 10:54

CodeChanger

7,953
5
49
80

answered Jul 10 '18 at 18:06

Sachin Mishra

1,125
1
16
17

score 3 · Answer 3 · answered Jul 30 '17 at 10:24

3

You need another for loop to access key and value,

for (let key of this.arr) {
 for(var i in key){
      console.log('key: ' +  i + ',  value: ' + key[i]);
 }
}

Check the console

DEMO

answered Jul 30 '17 at 10:24

Sajeetharan

216,225
63
350
396

reihaneh · Answer 4 · 2019-01-21T08:00:58.677

0

yourObject.forEach(function(value, index){
   // do your job
   console.log(value, index);
});

edited Jan 21 '19 at 08:00

answered Jan 16 '19 at 08:32

reihaneh

7
3

It's bad idea to name variable `Object`, and even for `arr.forEach` you'll get current index in `key` – barbsan Jan 16 '19 at 08:59
Thank's dear @barbsan, i applied your advice – reihaneh Jan 21 '19 at 08:04

score 0 · Answer 5 · edited Apr 30 '19 at 10:48

You can try these

object = [
{
  "id": 1,
  "test": "test1",
  "name": ["abc", "pqr"]

},
{
  "id": 2,
  "test": "test2",
  "name": ["abc2", "pqr2"]

},
{
  "id": 3,
  "test": "test3",
  "name": ["abc3", "pqr3"]

},
{
  "id": 4,
  "test": "test4",
  "name": ["abc4", "pqr4"]

}]

and your js or typescript code be like:-

YourMethod() {
for (let item of this.object) {
  for (let i in item) {
    if (typeof (item[i]) === 'object') {
      item[i].forEach((e: any) => {
        console.log("runseprate", e)
      })
    }
  }
}}

score 0 · Answer 6 · answered Sep 12 '19 at 09:27

   json = {payload.InsuredMobileNumber.type: "string"
payload.accidentTime.type: "string"
payload.causeOfLoss.type: "string"
payload.claimRegistrationDate.type: "string"
payload.emailAddress.type: "string"}


 var keyData = Object.keys(json);
          var valueData = Object.values(json)
          console.log("keyData = ", keyData)
          console.log("valueData = ", valueData)

Angular 2 get key and value from json array with dynamic key

6 Answers6