CODEWITHSUNDEEP
javascriptarraysreactjs
CHays412
CHays412

Reputation: 145

React JS how do I transform this array of objects with dates and numbers?

I have a React component which is pulling JSON data from a get call and I need to reformat it (I'm still a newbie when it comes to array manipulation). Here is the initial returned JSON:

{
"metrics": {
    "2018-12-26 18:00:00": {
        "20": 451,
        "30": 48
    },
    "2018-12-26 19:00:00": {
        "20": 165
    },
    "2018-12-27 00:00:00": {
        "20": 177,
        "30": 8
    },
    "2018-12-27 01:00:00": {
        "20": 220
    },
    "2018-12-27 02:00:00": {
        "20": 220
    },
    "2018-12-27 03:00:00": {
        "20": 177,
        "30": 8
    },
    "2018-12-27 04:00:00": {
        "20": 220
    },
    "2018-12-28 00:00:00": {
        "20": 93
    },
    "2018-12-28 01:00:00": {
        "20": 76
    },
    "2018-12-28 02:00:00": {
        "20": 76
    },
    "2018-12-28 03:00:00": {
        "20": 57
    },
    "2018-12-28 04:00:00": {
        "20": 76
    },
    "2018-12-28 15:00:00": {
        "20": 130,
        "30": 10
    }
}
}

What I need to is separate this into the individual dates and add the "20" and "30" numbers together so that I would end up with something like this for each date:

"2018-12-26": { 
     "20": total number here,
     "30": total number here
 }

I know this will involve Object.keys and perhaps destructing but I am getting nowhere fast. Any help would be so appreciated.

Upvotes: 0

Views: 207

Answers (2)

Code Maniac
Code Maniac

Reputation: 37755

You can do it like this

So here the idea is first will create a empty object to store our final output. Now we will loop through all the keys of the given object and check if that key is already in output object or not if it's their we add the respective key's value to output object if not than we create a new property in output object. 

let data = { "metrics": { "2018-12-26 18:00:00": {"20": 451, "30": 48 },"2018-12-26 19:00:00": { "20": 165 },   "2018-12-27 00:00:00": { "20": 177, "30": 8 },  "2018-12-27 01:00:00": {  "20": 220 }, "2018-12-27 02:00:00": { "20": 220 }, "2018-12-27 03:00:00": {       "20": 177,  "30": 8   }, "2018-12-27 04:00:00": {       "20": 220  }, "2018-12-28 00:00:00": {  "20": 93  },   "2018-12-28 01:00:00": { "20": 76 },"2018-12-28 02:00:00": { "20": 76 }, "2018-12-28 03:00:00": {      "20": 57  }, "2018-12-28 04:00:00": { "20": 76 },   "2018-12-28 15:00:00": { "20": 130, "30": 10 }}}

let op = {}

for(let key in data['metrics']){
  let temp= new Date(key);
  let fullDate = temp.getFullYear()+'-'+temp.getMonth()+'-'+temp.getDate();
  if(op[fullDate]){
    for(let val in data['metrics'][key])
    {
      if(op[fullDate][val])
       op[fullDate][val] += data['metrics'][key][val]
      else op[fullDate][val] = data['metrics'][key][val]
    }
  } else {
    op[fullDate] = {...data['metrics'][key]};
  }

}

console.log(op);

Upvotes: 1

Ori Drori
Ori Drori

Reputation: 191976

Iterate the dates' entries with Array.reduce(), get the date by splitting the string, and add an object if doesn't exist. Iterate the values' entries with for...of, add the values to the date object:

const data = {"metrics":{"2018-12-26 18:00:00":{"20":451,"30":48},"2018-12-26 19:00:00":{"20":165},"2018-12-27 00:00:00":{"20":177,"30":8},"2018-12-27 01:00:00":{"20":220},"2018-12-27 02:00:00":{"20":220},"2018-12-27 03:00:00":{"20":177,"30":8},"2018-12-27 04:00:00":{"20":220},"2018-12-28 00:00:00":{"20":93},"2018-12-28 01:00:00":{"20":76},"2018-12-28 02:00:00":{"20":76},"2018-12-28 03:00:00":{"20":57},"2018-12-28 04:00:00":{"20":76},"2018-12-28 15:00:00":{"20":130,"30":10}}};

const result = Object.entries(data.metrics)
  .reduce((r, [date, values]) => {
    const [d] = date.split(/\s+/);
    const current = r[d] ? r[d] : (r[d] = {});
    
    for(const [k, v] of Object.entries(values)) {
      current[k] = (current[k] || 0) + v;
    }
    
    return r;
  }, {});
  
console.log(result);

Upvotes: 0

Related Questions