React, how to manipulate json in React after group by with reduce-CodePudding

I managed to get to a certain point with the original file by using the reduce() method, but I'm stuck with the last step. The object that gives me the array is called by "this.props.portfolio_treemap".

And this was the original array:


[
    {
        "id": 1,
        "ticker": "VGHF11",
        "total_today_brl": 10322.4,
        "category": "Category 1",
    },
    {
        "id": 2,
        "ticker": "BTAL11",
        "total_today_brl": 10942.25,
        "category": "Category 1",
    },
    {
        "id": 32,
        "ticker": "BTC",
        "total_today_brl": 2203.11,
        "category": "Category 2",
    },
]

I used this code with reduce to group by category:

class TreeMap extends React.Component {

  constructor(props) {
    super(props);
    this.state = {

      },
      series: [
        {
          name: '',
          data: []
        }
      ]
    }
  }

  render() {
    return ( 
        <>
        {console.log(
          this.props.portfolio_treemap.reduce(
            (TreeMap, { category, ticker, total_today_brl }) => {
            (TreeMap[category] = TreeMap[category] || []).push({ x: ticker, y: total_today_brl });          
            return TreeMap;
          }, {})
        )}

The output array from this is that one:

{
    "Category 1": [
        {
            "x": "VGHF11",
            "y": 10322.4
        },
        {
            "x": "BTAL11",
            "y": 10942.25
        }

    ],
    "Category 2": [
        {
            "x": "BTC",
            "y": 2203.11
        }

    ]

}

But actualy i would like to get this one:


[
  {
    "name": "Category 1", 
    "data": [        
        {
            "x": "VGHF11",
            "y": 10322.4
        },
        {
            "x": "BTAL11",
            "y": 10942.25
        }

    ]
},
{
    "name": "Category 2", 
    "data": 
    [
        {
            "x": "BTC",
            "y": 2203.11
        }
    ]
  }
]

I don`t know how could i achive that, thanks

CodePudding user response：

As a 2-stage process, first group into an object of {[category]:data}, the create your array out of this:

const data = [
    {
        "id": 1,
        "ticker": "VGHF11",
        "total_today_brl": 10322.4,
        "category": "Category 1",
    },
    {
        "id": 2,
        "ticker": "BTAL11",
        "total_today_brl": 10942.25,
        "category": "Category 1",
    },
    {
        "id": 32,
        "ticker": "BTC",
        "total_today_brl": 2203.11,
        "category": "Category 2",
    },
]

const grouped = data.reduce((acc,curr)=>{
  const {category, ...data} = curr
  const existing = acc[category]||[]
  return {...acc, [category]:[...existing, data]}
},{})

const result = Object.entries(grouped).map(([name,data])=>({name, data}))

console.log(result)

(For simplicity I included the id in the results etc but of course you can just pick the properties you want to keep and rename them to x and y in the body of the reduce)