How to use JavaScript map to return object?

Question

I am using map JavaScript function to return an object. row.id throws error . I want to create id as key for every iteration in array.

<input value="3" id="first" class="pdate">
<input value="5" id="second" class="pdate">
<input value="2" id="third" class="pdate">

    if(document.querySelectorAll('.pdate')){
        let update = [...document.querySelectorAll('.pdate')].map(row => {
            return {
                row.id : row.value
            }
        })
    }

I tried but in js it showing error for ```row.id``` . i want expected output as ```{ "first": "3", "second": "5", "third": "2" }``` — Akhi21, Dec 30 '20 at 17:30

score 2 · Answer 1 · answered Dec 30 '20 at 17:32

You can use Object.fromEntries to convert an array of key-value pairs to an object.

let update = Object.fromEntries([...document.querySelectorAll('.pdate')]
   .map(row => [row.id, row.value]));
console.log(update);

<input value="3" id="first" class="pdate">
<input value="5" id="second" class="pdate">
<input value="2" id="third" class="pdate">

Majed Badawi · Accepted Answer · 2020-12-30T17:34:04.537

1

Since you want to generate an object from the list of rows, use .reduce:

const update = [...document.querySelectorAll('.pdate')].reduce((acc,row) => {
  acc[row.id] = row.value;
  return acc;
}, {})

console.log(update);

<input value="3" id="first" class="pdate">
<input value="5" id="second" class="pdate">
<input value="2" id="third" class="pdate">

edited Dec 30 '20 at 17:34

answered Dec 30 '20 at 17:22

Majed Badawi

27,616
4
25
48

I just want single object that should hold all three property , not array list of objects – Akhi21 Dec 30 '20 at 17:24
@Akhi21 if you want a map of id-value, you can use ``.reduce`` as above – Majed Badawi Dec 30 '20 at 17:25
what cant i use map? as i am asking generally? – Akhi21 Dec 30 '20 at 17:27
In this case, ``.map`` is used to iterate an array. Since the end result should be an object, ``.reduce`` is the way to go – Majed Badawi Dec 30 '20 at 17:32
1

@Akhi21 that's ok, the important thing is that the problem was solved. – Majed Badawi Dec 30 '20 at 17:40
I was trying to add one more field before return statement using this is it right approach ```acc[section] = acc[row.id] ? document.getElementById("exid").value : null``` – Akhi21 Dec 30 '20 at 19:30
@Akhi21 please elaborate more, what are ``section`` and ``exid``? Can you add the expected output – Majed Badawi Dec 30 '20 at 19:34
actually i was thinking if i have to add one more property so key name is ```section``` – Akhi21 Dec 30 '20 at 19:36
@Akhi21 please update the question with the new requirements – Majed Badawi Dec 30 '20 at 19:39

How to use JavaScript map to return object?

2 Answers2