convert object keys and values to an array of objects

Question

I have an object that looks like this:

const response = {
  id1-field1: true,
  id1-field2: 0,
  id1-field3: 3,
  id2-field1: false,
  id2-field2: 1,
  id2-field3: 0,
  id3-field1: false,
  id3-field2: 0,
  id3-field3: 0,
}

And I need to make an array that looks like this:

const formatted = [
 {id: "id1", field1: true, field2: 0, field3: 3},
 {id: "id2", field1: false, field2: 1, field3: 0},
 {id: "id3", field1: false, field2: 0, field3: 0},
]

What's the best way to achieve this? This is where I'm at so far:

Get the object's keys in an array
Split the object keys by the hyphen
Use the original keys to add in the object values

const response = {
  "id1-field1": true,
  "id1-field2": 0,
  "id1-field3": 3,
  "id2-field1": false,
  "id2-field2": 1,
  "id2-field3": 0,
  "id3-field1": false,
  "id3-field2": 0,
  "id3-field3": 0,
}

const keys = Object.keys(response)

const split = keys.map(x => { 
  return ({"oldId": x, "id": x.split('-')[0], "key": x.split('-')[1]})
})

const splitWithValues = split.map( x => {
    let o = x;
    o.value = response[x.oldId]
    return o
})

console.log(splitWithValues)

Ori Drori · Accepted Answer · 2017-11-26 22:06:48Z

1

Get the keys using Object#keys, and reduce them into a Map. Then spread the Map#values to get the array:

const response = {"id1-field1":true,"id1-field2":0,"id1-field3":3,"id2-field1":false,"id2-field2":1,"id2-field3":0,"id3-field1":false,"id3-field2":0,"id3-field3":0};

const result = [...Object.keys(response)
  .reduce((m, key) => {
    const [id, field] = key.split('-');
    
    const item = m.get(id) || { id };
    
    item[field] = response[key];
    
    return m.set(id, item);
  }, new Map()).values()];
  
console.log(result);

edited Nov 26, 2017 at 22:06

answered Nov 26, 2017 at 21:24

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

3 Comments

0xPingo Over a year ago

Wow that was fast ! Thank you !

charlietfl Over a year ago

Refinement to match expected results const item = m.get(id) || {id:id};//missing id prop

BaiClassmate Xiao Over a year ago

Hello, can you provide code with JavaScript functionality without new features?

Nina Scholz · Accepted Answer · 2017-11-26 21:29:02Z

0

You could take the parts of the key and assign the value.

var response = { 'id1-field1': true, 'id1-field2': 0, 'id1-field3': 3, 'id2-field1': false, 'id2-field2': 1, 'id2-field3': 0, 'id3-field1': false, 'id3-field2': 0, 'id3-field3': 0 },
    result = Object.keys(response).reduce(function (r, k) {
        var key = k.match(/[^-]+$/)[0],
            index = k.match(/\d+(?=-)/)[0] - 1;
        r[index] = r[index] || {};
        r[index][key] = response[k];
        return r;
    }, []);
    
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

answered Nov 26, 2017 at 21:29

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Collectives™ on Stack Overflow

convert object keys and values to an array of objects

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related