Javascript array de-structuring and Object.entries

Question

It's pretty simple: Object.entries is supposed to produce and Array of key, value pairs.. As such, I would expected this code to destructure

[{
  id: 1,
  name: "christian"
},{
  id : 2,
  name: "bongiorno"
}].map(Object.entries).forEach(([k,v]) => console.log(`${k}: ${v}`));

into producing:

id:1 name:christian
id:2 name:bongiorno

But it doesn't. I get, instead:

id,1: name,christian
id,2: name,bongiorno

What did I miss?

because your data is not simple Object, its Object Array. Object Array contains Objects so you need nested loop to traverse data. — Wasif Khan
– Wasif Khan, Commented Jul 11, 2017 at 5:45
@WasifKhan There's no JSON in the question... plus there's no such thing as a 'JSON Object' — Andrew Li
– Andrew Li, Commented Jul 11, 2017 at 5:46
I added .reduce((a,b) => a.concat(b),[]) to flatten it. Looks better. Should I update the question ? provide an answer? — Christian Bongiorno
– Christian Bongiorno, Commented Jul 11, 2017 at 5:51
@ChristianBongiorno That sounds like an answer, which doesn't belong in the question. — Bergi
– Bergi, Commented Jul 11, 2017 at 5:59

nem035 · Accepted Answer · 2017-07-11 05:53:08Z

3

The output is correct but your definition is slightly off, you're missing an array level (array of arrays).

Object.entries is supposed to produce an array of arrays of key, value pairs.

console.log(
  Object.entries({
    id: 1,
    name: 'test'
  })
)

To achieve what you want, you can just update your log to account for nested arrays:

[{
  id: 1,
  name: "christian"
},{
  id : 2,
  name: "bongiorno"
}]
  .map(Object.entries)
  .forEach(([k, v]) => console.log(
    `${k.join(':')} ${v.join(':')}`
  ));

Or maybe you meant to flatten each array?:

[{
  id: 1,
  name: "christian"
},{
  id : 2,
  name: "bongiorno"
}]
  .map(Object.entries)
  .reduce((arr, curr) => arr.concat(curr), [])
  .forEach(([k,v]) => console.log(`${k}: ${v}`));

edited Jul 11, 2017 at 5:53

answered Jul 11, 2017 at 5:42

nem035

35.5k6 gold badges93 silver badges104 bronze badges

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

1 Comment

Christian Bongiorno Over a year ago

That's what I was looking for and I did that. But, I am even more baffled by something else. I guess I will create a new question.

Bergi · Accepted Answer · 2017-07-11 05:42:25Z

2

Let's try to drop the map and forEach and see what you did with each of the objects:

let [k, v] = Object.entries({
  id: 1,
  name: "christian"
});
console.log(`${k}: ${v}`);

let [k, v] = Object.entries({
  id : 2,
  name: "bongiorno"
});
console.log(`${k}: ${v}`);

Now if we expand the Object.entries call, this becomes

let [k, v] = [
  ["id", 1],
  ["name", "christian"]
];
console.log(`${k}: ${v}`);

let [k, v] = [
  ["id", 2],
  ["name", "bongiorno"]
];
console.log(`${k}: ${v}`);

which quite accurately reflects what you're seeing - k and v are getting assigned arrays.

You will need to nest two loops:

const arr = [{
  id: 1,
  name: "christian"
}, {
  id: 2,
  name: "bongiorno"
}];
for (const obj of arr)
    for (const [k, v] of Object.entries(obj))
        console.log(k+": "+v);

answered Jul 11, 2017 at 5:42

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

2 Comments

Bergi Over a year ago

@ChristianBongiorno You would need some kind of flatMap for that, which doesn't exist in JS. But if you replace the forEach by a simple for of loop, that's an easy problem

Christian Bongiorno Over a year ago

instead of the for loop I just .reduce((a,b) => a.concat(b),[]) to flatten it

Collectives™ on Stack Overflow

Javascript array de-structuring and Object.entries

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related