javascript - How can I map through the given object to get "value"..?

Question

    {
    "confirmed": {
        "value": 104854731,
        "detail": "https://covid19.mathdro.id/api/confirmed"
    },
    "recovered": {
        "value": 58294751,
        "detail": "https://covid19.mathdro.id/api/recovered"
    },
    "deaths": {
        "value": 2282535,
        "detail": "https://covid19.mathdro.id/api/deaths"
    },
    "dailySummary": "https://covid19.mathdro.id/api/daily",
    "dailyTimeSeries": {
        "pattern": "https://covid19.mathdro.id/api/daily/[dateString]",
        "example": "https://covid19.mathdro.id/api/daily/2-14-2020"
    },
    "image": "https://covid19.mathdro.id/api/og",
    "source": "https://github.com/mathdroid/covid19",
    "countries": "https://covid19.mathdro.id/api/countries",
    "countryDetail": {
        "pattern": "https://covid19.mathdro.id/api/countries/[country]",
        "example": "https://covid19.mathdro.id/api/countries/USA"
    },
    "lastUpdate": "2021-02-05T05:22:38.000Z"
    }
    function InfoPanel() {
  return (
    <div>
      <div className={classes.root}>
        <Grid container spacing={3}>
          <Grid item xs={12} sm={4}>
            <Paper className={classes.paper}>Infected</Paper>
          </Grid>
          <Grid item xs={12} sm={4}>
            <Paper className={classes.paper}>Recovered</Paper>
          </Grid>
          <Grid item xs={12} sm={4}>
            <Paper className={classes.paper}>Deaths</Paper>
          </Grid>
        </Grid>
      </div>
    </div>
  );
}

I want to display the "value" from "confirmed" key into the "Infected" parameter using map function or anything else. Is there any possible way of doing that or map function only works on arrays.

question from:https://stackoverflow.com/questions/66057999/how-can-i-map-through-the-given-object-to-get-value

Answer 1

const yourObj = {  
 "confirmed": {      
     "value": 123456789,
     "detail": "https://covid19.mathdro.id/api/confirmed"
 },
 "deaths": {      
     "value": 99999,
     "detail": "https://covid19.mathdro.id/api/confirmed"
 },
 "recovered": {      
     "value": 8888,
     "detail": "https://covid19.mathdro.id/api/confirmed"
 }
}

const desiredKeys = Object.keys(yourObj)
const stats = desiredKeys.reduce((finalResult, desiredKey) => {
    let temp = {}

    temp.category = desiredKey
    temp.value = yourObj[desiredKey].value
    
    finalResult.push(temp);
    
    return finalResult
}, [])

console.log(stats)   //[{category: "confirmed",  value: 123456789}, {  category: "deaths",  value: 9999}, {  category: "recovered",  value: 8888}]

//InfoPanel
function InfoPanel(){
 return (
   //more code on top
   <Grid container spacing={3}>
     stats.map(stat=> (
       <Grid item xs={12} sm={4}>
         <Paper className={classes.paper}>{stat.category}: {stat.value}</Paper>
       </Grid>
     ))
   </Grid>
   //more code below
)}