Map array of objects

Question

Please read carefully the question, this is not a duplicate of:

Let's consider the following array of object:

var obj = [{ 'key1' : 'value1' }, { 'key2' : 'value2' }];

I would like to map the array to get keys and values for each object. Something like:

obj.map((key, val) => console.log(key, val));

I already try many stuff like Object.entries(obj) but it always results in complicated solution with many brackets like Object.entries(obj)[0][1]

Is there a simple, nice and efficient way to map an array of object? Note I need key and value for each object

What is the expected output value, **to what** do you want to map the array of objects? Your "something like" only does log the keys and values, which is trivial and does not need `map`. What exactly do you need? — Bergi, Jan 25 '20 at 15:20
I want to create a HTTP request like key1=value1&key2=value2, but I already know how to do that, I just have difficulties accessing the object keys and values. — Fifi, Jan 25 '20 at 15:23
Please show your code then. It seems you have no problem with iterating through the array, but just getting key and value from the object? The solution to that would be to use a less weird input format - why an array of single-property objects instead of one object with multiple properties that you could simply enumerate? — Bergi, Jan 25 '20 at 15:28
@Fifi what final result are you looking for? Is your expected result an array, or a single obj, and what values are in it? — nonopolarity, Jan 25 '20 at 15:31
The answer to the question as given ("*simple, nice and efficient way to map an array of object?*") is `arrayOfObjects.map(object => /* something */)`. But that doesn't seem to be what you're after, so please ask your *actual* question. — Bergi, Jan 25 '20 at 15:32
`map(object => /* something */)` ok, how do you access keys ? — Fifi, Jan 25 '20 at 15:33
@Fifi `.map` gives you back an array... but are you looking for an array as a result? — nonopolarity, Jan 25 '20 at 15:33
@Fifi Just like you [always access the keys of an object, i.e. `for (const key in object)` or `Object.keys(object)`](https://stackoverflow.com/q/684672/1048572), but that has nothing to do with the `map` around it. — Bergi, Jan 25 '20 at 15:34
@nopole, yes, I'm looking for an array. If you want to know, I'm using .join(&) on the array to get the final string. — Fifi, Jan 25 '20 at 15:34
@Fifi you are trying to use `.map` to get a string `key1=value1&key2=value2`? But `.map` gives you back an array. What you want in this case can be `.reduce` — nonopolarity, Jan 25 '20 at 15:36
@nopole, thank you for the `reduce()`, I already have the `join()` function to convert the array into string that is more appropriated to my needs. — Fifi, Jan 25 '20 at 15:39
@Fifi try destructuring: `const [key,val] = Object.entries(obj)[i||0]` — Eric Hodonsky, May 25 '20 at 19:03

nonopolarity · Accepted Answer · 2020-01-25T15:54:27.667

You seem like you only want to print it out or access them:

.map changes an array to a different array, which doesn't seem like what you are looking for.

var objs = [{ 'key1' : 'value1' }, { 'key2' : 'value2' }];

objs.forEach(obj => { 
  for (let p in obj) console.log(p, obj[p]); 
});

If you are looking for key1=value1&key2=value2 as the answer and you know you only have 1 key and value in each object, then it is:

let objs = [{ 'key1' : 'value1' }, { 'key2' : 'value2' }];

let s = objs.map(obj => `${Object.keys(obj)[0]}=${Object.values(obj)[0]}`).join("&");

console.log(s);

But you probably want to use encodeURIComponent() to encode the params, making it:

let objs = [{ 'key1' : 'value1 hello' }, { 'key2' : 'value2 & 3' }];

let s = objs.map(obj => `${encodeURIComponent(Object.keys(obj)[0])}=${(encodeURIComponent(Object.values(obj)[0]))}`).join("&");

console.log(s);

If your keys are all alphanumeric and underscore characters, then you shouldn't need to use encodeURIComponent() on the key.

Thank you, but the question is about the map() method. I know how to loop over an array. — Fifi, Jan 25 '20 at 15:31
Yes, that it. Not as simple as I expected, but I guess this is the shortest syntax. Thank you. — Fifi, Jan 25 '20 at 15:44

score 1 · Answer 2 · answered Jan 25 '20 at 15:24

1

var obj = [{ 'key1' : 'value1' }, { 'key2' : 'value2' }];
obj.forEach(el => {
  for (var prop in el) {
    console.log(prop, el[prop])
  }
})

// results: 
// key1 value1
// key2 value2

answered Jan 25 '20 at 15:24

jacopotaba

84
10

I want to use the map method. – Fifi Jan 25 '20 at 15:28
use .map insted of .foreach, it works also on this way – jacopotaba Jan 25 '20 at 15:30
@Fifi But why? You still haven't told us yet what kind of array value you want to produce, and if you don't produce another array you should not use `map`. – Bergi Jan 25 '20 at 15:30

score 1 · Answer 3 · answered Jan 25 '20 at 19:36

Not as clean as what @nopole answer, but this kind achieve what you want for a key, value object.

var objs = [{ 'key1' : 'value1' }, { 'key2' : 'value2' }];

objs.forEach(obj => { 
  // loop over keys-and-values
  for (let [key, value] of Object.entries(obj)) {
    console.log(key, value);
  }
});

Also this works for object with more than one key:

var objs = [{ 'key1' : 'value1', "key2":"value2" }, { 'key3' : 'value3' }];

objs.forEach(obj => { 
  // loop over keys-and-values
  for (let [key, value] of Object.entries(obj)) {
    console.log(key, value);
  }
});

Map array of objects

3 Answers3