Object.entries is working partially in REACT why?-CodePudding

I'm not able to display only : "Mona", "Paul","Bastian", I can display : "Mona", "Paul","Bastian","Average" but I don't want to display "Average". And display "Average", in my second bloc of radars [{...}, { name: 'Average',dataKey: 'Average'}. What is wrong please??

const { names, locations } = graphs ?? {}
function RadarNames() {
    const data = Object.entries(graphs.names[0]).map(([key, value]) => ({
        "name": key,
        "age": value,
    }))
    return creacteChart({
        data: data,
        polarAngleAxisOptions: { dataKey: 'name' },
        radars: [
            {
                name: 'name',
                dataKey: 'age',
            
            },
            {
                name: 'Average',
                dataKey: 'Average',
             
            },

        ],
    })
}

I tried to do :

const data = Object.entries(graphs.names[0]!=='Average'? graphs.names[0].map(([key, value]) => ({"name": key,"age": value})):'')

But it's not working...

My json from my api is :

{
    "names": [
        {
            "Mona": 63,
            "Paul": 29,
            "Bastian": 31,
            "Average": 75
          }
      
    ],

    "locations": [
        {
            "location": "Dublin",
            "country":"Irland"
        }
    ]
}

CodePudding user response：

Use filter:

const data = Object.entries(graphs.names[0])
                   .filter(([key]) => key != "Average")
                   .map(([name, age]) => ({name, age}));

An alternative, is to spread the object to extract the Average (and ignore it) and get the rest in a new object:

const {Average, ...rest} = graphs.names[0];
const data = Object.entries(rest)
                   .map(([name, age]) => ({name, age}));

CodePudding user response：

   const data = Object.entries(graphs.names[0]).filter(([key]) => key != "Average").map(([key, value]) => ({
        "name": key,
        "age": value,
    }))

// then add 

 const dataAv = Object.entries(graphs.names[0]).filter(([key]) => key == "Average").map(([key, value]) => ({
        "Average": key,
        "average": value,
    }))

  return ({
        data: data, dataAv,  
        polarAngleAxisOptions: { dataKey: 'name' },
        radars: [
            {
                name: 'name',
                dataKey: 'age',
            
            },
            {
                name: 'Average',
                dataKey: 'average',
             
            },

        ],
    })