Javascript iterate through nested Object and return transformed and renamed Array of objects

Question

I've checked out all available answers regarding nested objects but none helped so far. I do have a deep nested object like:

let datastat = 
{
  "statisticData": {
    "lastStatisticOne": {
      "min": 0,
      "max": 10
    },
    "lastStatisticTwo": {
      "min": 0,
      "max": 20
    },

    "firstStatisticOne": {
      "min": 0,
      "max": 30,
    },
    "firstStatisticTwo": {
      "min": 0,
      "max": 40,
    },
  },
  "statisticValue": [
   none important Data
  ]
}

What I try to achieve is:

statisticNew =
[
  {
   "lastStatisticOne": [{ "name": "min", "value": 0 }, { "name": "max", "value": 10 }]
  },
  {
   "lastStatisticTwo": [{ "name": "min", "value": 0 }, { "name": "max", "value": 20 }]
  },
  {
   "firstStatisticOne": [{ "name": "min", "value": 0 }, { "name": "max", "value": 30 }]
  },
  {
   "firstStatisticTwo": [{ "name": "min", "value": 0 }, { "name": "max", "value": 40 }]
  }
]

My attempt failed:

const statistic = [];
statistic.push(datastat.statisticData);

for(let item in statistic){
 if (statistic.hasOwnProperty(item)) {
  const result = Object.keys(statistic[0]).map(e => ({name: e, value: statistic[0][e]}));
  console.log(result);
 }
}

How can I achieve the correct output?

Answer 1

This should do it:

let datastat = {
  "statisticData": {
    "lastStatisticOne": {
      "min": 0,
      "max": 10
    },
    "lastStatisticTwo": {
      "min": 0,
      "max": 20
    },

    "firstStatisticOne": {
      "min": 0,
      "max": 30,
    },
    "firstStatisticTwo": {
      "min": 0,
      "max": 40,
    },
  }
}

let newStat = Object.keys(datastat.statisticData).reduce((acc, key) => {
  let vals = Object.entries(datastat.statisticData[key]).map(([key, val]) => ({
    name: key,
    value: val
  }))
  acc.push({
    [key]: vals
  });
  return acc;
}, []);

Answer 2

This is the Solution provided by Chris G and works perfekt. Thank you!

const statisticNew = Object.entries(datastat.statisticData).map(([key, val]) => ({
  [key]: Object.entries(val).map(([name, value]) => ({ name, value }))
}));

Answer 3

You can iterate over the keys of your dataStat and get your expected output like below:

                let statisticNew = [];
                Object.keys(datastat['statisticData']).map(function (item) {
                  let stat_obj = {};
                  let temp_arr  = [];
                  let inner_dict = datastat['statisticData'][item];
                  Object.keys(inner_dict).map(function (inner_item) {
                      let temp_obj = {};
                      temp_obj['name'] = inner_item;
                      temp_obj['value'] = inner_dict[inner_item];
                      temp_arr.push(temp_obj)
                  });
                  stat_obj[item] = temp_arr;
                  statisticNew.push(stat_obj);
                });
                console.log(statisticNew)

Answer 4

You can first reduce value using reduce function and then mapping it accordingly. Here is how:

 var datastat = { "statisticData": { "lastStatisticOne": { "min": 0, "max": 10 }, "lastStatisticTwo": { "min": 0, "max": 20 }, "firstStatisticOne": { "min": 0, "max": 30, }, "firstStatisticTwo": { "min": 0, "max": 40, }, }, "statisticValue": []}; reducedValue = Object.entries(datastat.statisticData).reduce((acc, [key, value])=>{ acc[key] = acc[key] || []; for(const [k, v] of Object.entries(value)){ acc[key].push({name: k, value:v}) } return acc; },{}); var result = Object.entries(reducedValue).map(([k,v])=>({[k]:v})); console.log(result)