normalize data using map failed

Question

I want to reconstruct data using map, how can I turn from this

[{
    date: "2017-08-19",
    female_count: 4,
    male_count: 5,
    total_count: 9
},
{
    date: "2017-08-20",
    female_count: 120,
    male_count: 14,
    total_count: 134
}]

into this

[{
    date: "2017-08-19",
    total: 9,
    data: [{
        name: "male",
        value: 4,
        color: "blue" 
    },{
        name: "female",
        value: 5,
        color: "red" 
    }]
}]

My failed attempt, I'm stuck at pushing male and female count into a new data property.

data.map(obj => {

        let temp = {
            date: data.date,
            total: data.total_count
        }

        temp['data'] = {
            name: "male",
            value: obj.male_count,
            color: "blue"
        }

        temp['data'] = {
            name: "female",
            value: obj.female_count,
            color: "red"
        }

        return temp
    })

female will overwrite male, not sure I should use push. Need help.

Answer 1

Based on @alexmac's solution, you could write the map callback as a single object:

let items = [{
    date: "2017-08-19",
    female_count: 4,
    male_count: 5,
    total_count: 9
  },
  {
    date: "2017-08-20",
    female_count: 120,
    male_count: 14,
    total_count: 134
  }
];

let newItems = items.map(item => ({
  date: item.date,
  total: item.total_count,
  data: [{
      name: "male",
      value: item.male_count,
      color: "blue"
    },
    {
      name: "female",
      value: item.female_count,
      color: "red"
    }
  ]
}));

console.log(newItems);

(The parentheses around the curly braces are necessary for creating an object and not a function body.)

Answer 2

The problem is that you use data as an object, not as an array, and you rewrite it for each element. Declare it's as an array: data: [], and use push method to add elements.

let items = [
  {
    date: "2017-08-19",
    female_count: 4,
    male_count: 5,
    total_count: 9
  },
  {
    date: "2017-08-20",
    female_count: 120,
    male_count: 14,
    total_count: 134
  }
];

let newItems = items.map(obj => {
  let item = {
    date: obj.date,
    total: obj.total_count,
    data: []
  };
  item.data.push({
    name: "male",
    value: obj.male_count,
    color: "blue"
  });
  item.data.push({
    name: "female",
    value: obj.female_count,
    color: "red"
  });
  return item;
});

console.log(newItems);

Answer 3

I am not sure how you are arriving at the color property, but if you consider color based on gender, this could be a solution

const input = [{
    date: "2017-08-19",
    female_count: 4,
    male_count: 5,
    total_count: 9
},
{
    date: "2017-08-20",
    female_count: 120,
    male_count: 14,
    total_count: 134
}]

const output = input.map((v) => {
  const data = [
    {
      name: "male",
      value: v.male_count,
      color: "blue" 
    },
    {
      name: "female",
      value: v.female_count,
      color: "red" 
    }
  ];
  
  return {
    date: v.date,
    total: v.total_count,
    data: data
  };  
});

console.log('>>>>output', output);