How to reshaping Data in Javascript from array to object without losing some of the data

Question

I am trying to add the key to each so that I can be able to easy make a multi scatter plot in d3. . I am not sure how to do it.

EDIT: TO CLARIFY what I meant.

Data:

var dataOriginal = {
  Apples: [{"A":4,"B":null,"C":null,"D":2},  {"A":5,"B":null,"C":3,"D":2}],
  Oranges: [{"A":3,"B":1,"C":4,"D":4.3}],
  Jackfruit: [{"A":5,"B":4,"C":4,"D":3}],
  Avocado: [{"A":null,"B":33,"C":2,"D":9.66}],
  Pomegranate: [{"A":5,"B":3.5,"C":null,"D":6}]
}

Function:

const data = Object.keys(dataOriginal).map((key) => {
  const temp = {...dataOriginal[key]};
  temp.key = key;
  return temp;
});

Results:

0:
0: {A: 4, B: null, C: null, D: 2}
1: {A: 5, B: null, C: 3, D: 2}
key: "Apples"
__proto__: Object
1:
0: {A: 3, B: 1, C: 4, D: 4.3}
key: "Oranges"
__proto__: Object
2:
0: {A: 5, B: 4, C: 4, D: 3}
key: "Jackfruit"
__proto__: Object
3:
0: {A: null, B: 33, C: 2, D: 9.66}
key: "Avocado"
__proto__: Object
4: {0: {…}, key: "Pomegranate"}

Desired results

: {A: 4, B: null, C: null, D: 2, key: "Apples"}
1: {A: 3, B: 1, C: 4, D: 4.3, key: "Oranges"}
2: {A: 5, B: 4, C: 4, D: 3, key: "Jackfruit"}
3: {A: null, B: 33, C: 2, D: 9.66, key: "Avocado"}
4: {A: 5, B: 3.5, C: null, D: 6, key: "Pomegranate"}
5: {A:5,B:null,C:3,D:2, key: "Apples"}

const temp = {...dataOriginal[key][0]}; is specifying the first item in those arrays. you need to loop through dataOriginal[key] if you want all items — mrben522
– mrben522, Commented Mar 3, 2020 at 14:03

Harshada Thakur · Accepted Answer · 2020-03-03 14:31:25Z

2

The reason why {"A":5,"B":null,"C":3,"D":2} is missed is because, index 0 is hardcoded in the code. const temp = {...dataOriginal[key][0]};

Alternate solution:

var dataOriginal = {
  Apples: [{"A":4,"B":null,"C":null,"D":2},  {"A":5,"B":null,"C":3,"D":2}],
  Oranges: [{"A":3,"B":1,"C":4,"D":4.3}],
  Jackfruit: [{"A":5,"B":4,"C":4,"D":3}],
  Avocado: [{"A":null,"B":33,"C":2,"D":9.66}],
  Pomegranate: [{"A":5,"B":3.5,"C":null,"D":6}]
}

const myData =[]
Object.keys(dataOriginal).map((key) => {
  for (let i = 0; i < dataOriginal[key].length; i++) {
    myData.push({...dataOriginal[key][i], key})
  }
})

console.log(myData)

answered Mar 3, 2020 at 14:31

Harshada Thakur

212 bronze badges

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

1 Comment

Abhinav Ganguly Over a year ago

This was very helpful, was just looking for this solution as well.

Nina Scholz · Accepted Answer · 2020-03-03 14:30:21Z

1

You need to reduce the object to get a single object with added values.

const
    addByKey = array => array.reduce((a, b) => {
        Object.entries(b).forEach(([k, v]) => a[k] = (a[k] || 0) + v);
        return a;
    }, {}),
    dataOriginal = { Apples: [{ A: 4, B: null, C: null, D: 2 }, { A: 5, B: null, C: 3, D: 2 }], Oranges: [{ A: 3, B: 1, C: 4, D: 4.3 }], Jackfruit: [{ A: 5, B: 4, C: 4, D: 3 }], Avocado: [{ A: null, B: 33, C: 2, D: 9.66 }], Pomegranate: [{ A: 5, B: 3.5, C: null, D: 6 }] }
    data = Object.keys(dataOriginal).map((key) => ({ ...addByKey(dataOriginal[key]), key }));

console.log(data);

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

For getting single object with same keys, you could map the objects, add the key and get a flat array.

const
    dataOriginal = { Apples: [{ A: 4, B: null, C: null, D: 2 }, { A: 5, B: null, C: 3, D: 2 }], Oranges: [{ A: 3, B: 1, C: 4, D: 4.3 }], Jackfruit: [{ A: 5, B: 4, C: 4, D: 3 }], Avocado: [{ A: null, B: 33, C: 2, D: 9.66 }], Pomegranate: [{ A: 5, B: 3.5, C: null, D: 6 }] }
    data = Object
        .keys(dataOriginal)
        .flatMap(key => dataOriginal[key].map(o => ({ ...o, key })));

console.log(data);

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

edited Mar 3, 2020 at 14:30

answered Mar 3, 2020 at 14:07

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

3 Comments

Quangdao Nguyen Over a year ago

Your results are the same is the "incorrect" example in the question. OP is looking for each object in the original data to be merged into a new one-dimensional array.

Kabooki Over a year ago

I am understanding your answer. Do you mind explaining. I have also editted the question to add more clarity.

Nina Scholz Over a year ago

@Kabooki, which one do you want?

Collectives™ on Stack Overflow

How to reshaping Data in Javascript from array to object without losing some of the data

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related