Reduce an array to a specific structure using javascript

Question

I have an array of the objects

[
    {"id":"brand","label":"Brand","value":"value1"},    
    {"id":"waterproof","label":"Waterproof","value":"value1"},
    {"id":"diameter","label":"Diameter","value":""},
    {"id":"brand","label":"Brand","value":"value2"},
    {"id":"waterproof","label":"Waterproof","value":"value2"},
    {"id":"diameter","label":"Diameter","value":""}
]

I need to restructure it to a following structure,

[
    ["Brand", "value1", "value2"], 
    ["Waterproof", "value1","value2"], 
    ["Diameter","",""]
]

Any ideas on how I could do this using a reduce method.

Best

@NinaScholz ` {"id":"brand","label":"Brand","value":"value2"},` — tom10271
– tom10271, Commented Sep 29, 2018 at 7:45

Nikhil Aggarwal · Accepted Answer · 2018-09-29 07:45:00Z

2

Try following using Array.reduce and Object.values

let arr = [{"id":"brand","label":"Brand","value":"value1"},{"id":"waterproof","label":"Waterproof","value":"value1"},{"id":"diameter","label":"Diameter","value":""},{"id":"brand","label":"Brand","value":"value2"},{"id":"waterproof","label":"Waterproof","value":"value2"},{"id":"diameter","label":"Diameter","value":""}];

let result = Object.values(arr.reduce((a,c) => {
  if(a[c.id]) a[c.id].push(c.value);
  else a[c.id] = [c.label, c.value];
  return a;
}, {}));
console.log(result);

answered Sep 29, 2018 at 7:45

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

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

1 Comment

Nikhil Aggarwal Over a year ago

@BobanStanojevic - Glad to help you :)

Nina Scholz · Accepted Answer · 2018-09-29 08:03:21Z

2

Yust take a Map and collect all values.

var json = '[{"id":"brand","label":"Brand","value":"value1"},{"id":"waterproof","label":"Waterproof","value":"value1"},{"id":"diameter","label":"Diameter","value":""},{"id":"brand","label":"Brand","value":"value2"},{"id":"waterproof","label":"Waterproof","value":"value2"},{"id":"diameter","label":"Diameter","value":""}]',
    result = Array.from(JSON
        .parse(json)
        .reduce((m, { id, label, value }) => m.set(id, (m.get(id) || [label]).concat(value)), new Map)
        .values()
    );
    
console.log(result);

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

edited Sep 29, 2018 at 8:03

answered Sep 29, 2018 at 7:41

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

2 Comments

Nikhil Aggarwal Over a year ago

It is not the expected result

Nina Scholz Over a year ago

@NikhilAggarwal, right. now it should return the expected result.

Mukund · Accepted Answer · 2018-09-29 08:12:08Z

1

Not the best of code but i think this might be useful for you:

let data = [
        {"id":"brand","label":"Brand","value":"value1"},    
        {"id":"waterproof","label":"Waterproof","value":"value1"},
        {"id":"diameter","label":"Diameter","value":""},
        {"id":"brand","label":"Brand","value":"value2"},
        {"id":"waterproof","label":"Waterproof","value":"value2"},
        {"id":"diameter","label":"Diameter","value":""}
    ]

    let reducedData = {}
    data.forEach((row)=>{
        reducedData[row.id] ? reducedData[row.id].push(row.value) : reducedData[row.id] = [row.label, row.value]    
    })
    let newData = Object.keys(reducedData).map((id)=>{return [...reducedData[id]]})

answered Sep 29, 2018 at 8:12

Mukund

3932 silver badges7 bronze badges

Comments

Leonid Pyrlia · Accepted Answer · 2018-09-29 16:25:05Z

1

You can also use a simple combo of Array.prototype.reduce and Object.keys:

const data = [{"id":"brand","label":"Brand","value":"value1"},{"id":"waterproof","label":"Waterproof","value":"value1"},{"id":"diameter","label":"Diameter","value":""},{"id":"brand","label":"Brand","value":"value2"},{"id":"waterproof","label":"Waterproof","value":"value2"},{"id":"diameter","label":"Diameter","value":""}];

const grouped = data.reduce((o, { label, value }) =>
    ({...o, [label]: [...(o[label] || []), value]}), {});

const result = Object.keys(grouped).map(label => [label, ...grouped[label]]);

console.log(result);

answered Sep 29, 2018 at 16:25

Leonid Pyrlia

1,7322 gold badges12 silver badges16 bronze badges

Comments

Get Off My Lawn · Accepted Answer · 2018-09-29 21:13:24Z

Here I use Set to create a unique list of id's then I map to create a custom array based on those id's. This is done by using find to get the label, and filter to get all the items that are related to the id. I map again on the filter to just return the value of the object.

let items = [
    {"id":"brand","label":"Brand","value":"value1"},    
    {"id":"waterproof","label":"Waterproof","value":"value1"},
    {"id":"diameter","label":"Diameter","value":""},
    {"id":"brand","label":"Brand","value":"value2"},
    {"id":"waterproof","label":"Waterproof","value":"value2"},
    {"id":"diameter","label":"Diameter","value":""}
]

let result = [...new Set(items.map(i => i.id))]
  .map(id => {
    return [
      items.find(i => i.id == id).label,
      ...items.filter(i => i.id == id).map(i => i.value)
    ]
  })

console.log(result)

Flash · Accepted Answer · 2018-09-29 08:23:23Z

0

In case the JSON Array is a very long one from some API

var data = [
    {"id":"brand","label":"Brand","value":"value1"},    
    {"id":"waterproof","label":"Waterproof","value":"value1"},
    ...... //some JSON array form some API
];
var json = JSON.stringify(data);

result = Array.from(JSON
    .parse(json)
    .reduce((m, { id, label, value }) => m.set(id, (m.get(id) || [label]).concat(value)), new Map)
    .values()
);
console.log(result);

answered Sep 29, 2018 at 8:23

Flash

1,12514 silver badges17 bronze badges

Collectives™ on Stack Overflow

Reduce an array to a specific structure using javascript

6 Answers 6

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related