How to populate object with data from another object in react js

Question

I'm trying to render a chart from a big amount of data (about 1200 entries). The chart takes in an array of objects with text and value properties like the one shown in FIG1. The data that I have coming in though is an object with key value pairs of string and number like the one shown if FIG2. How could I transform the data from FIG2 format to FIG1 format so that I can use it in the Chart? Any help is much appreciated.


//FIG1
let words = [
  {
    text: "told",
    value: 64,
  },
  {
    text: "great",
    value: 11,
  },
  {
    text: "thought",
    value: 16,
  },
  {
    text: "clean",
    value: 17,
  },
];

//FIG2
const data = {
          "give it a try!": 97,
          "go for 6 months and get 1 month free": 8,
          "go for 12 months and get 2 month free": 2,
          "go for 12 months and get 2 months free": 6,
          "go to url": 1,
        };


...

return (
    <div>
      <h1>Chart</h1>
      <ReactWordcloud words={words} />
    </div>
  );

What is the pattern used to achieve FIG2 as I cannot see any way to create it with the data from FIG1? — yudhiesh
– yudhiesh, Commented Dec 13, 2020 at 6:44
The data is coming in from an API. It's 30k of entries of text. I had to group the same text values and count them. That's why it looks like FIG2. var sorted = []; for (var i = 0; i < textData.length; i++) { sorted.push(textData[i].toLowerCase()); } sorted.sort(); let countedAnchorTextGroups2 = sorted.reduce((allGroups2, item2) => { if (item2 in allGroups2) { allGroups2[item2]++; } else { allGroups2[item2] = 1; } return allGroups2; }, {}); — Michael Angelo
– Michael Angelo, Commented Dec 13, 2020 at 6:52

JustRaman · Accepted Answer · 2020-12-13 06:50:37Z

2

Easy-Peasy

const transformed = Object.entries(data).map(( [key, value] )=>{
    return { text:key , value: value }
})

answered Dec 13, 2020 at 6:50

JustRaman

1,1719 silver badges12 bronze badges

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

1 Comment

Michael Angelo Over a year ago

Wow It works like a charm. This blew my mind. Thank you very much brother.

Collectives™ on Stack Overflow

How to populate object with data from another object in react js

1 Answer 1

Easy-Peasy

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Easy-Peasy

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related