How To Grouping Array Data With Date From Ajax Response? - Jquery ajax

LazyloryGaming
March 31, 2020
183 views
0 votes
2 Answers

i have array data like this

[{ 
   date: "January 2019",
   sum: 20,
   name: "Persada",
},{ 
   date: "Februay 2019",
   sum: 21,
   name: "Persada",
},{ 
   date: "April 2019",
   sum: 22,
   name: "Persada",
},{ 
   date: "January 2019",
   sum: 10,
   name: "Kharisma",
},{ 
   date: "March 2019",
   sum: 5,
   name: "Kharisma",
},{ 
   date: "Februari 2019",
   sum: 4,
   name: "Solusindo",
},{ 
   date: "Mai 2019",
   sum: 2,
   name: "Solusindo",
}]

From the data above, I have chosen a different date. so I get a date like this

["January 2019", "February 2019", "March 2019", "April 2019", "Mai 2019"]

and then i want to set data like this

[{
   date : ["January 2019", "February 2019", "March 2019", "April 2019", "Mai 2019"],
   sum: [20, 21, 0, 22, 0],
   name: "Persada",
},{
   date : ["January 2019", "February 2019", "March 2019", "April 2019", "Mai 2019"],
   sum: [0, 0, 10, 5, 0],
   name: "Kharisma",
},{
   date : ["January 2019", "February 2019", "March 2019", "April 2019", "Mai 2019"],
   sum: [0, 4, 0, 0, 2],
   name: "Solusindo",
}]

if there is no data on that date, then the data sum will automatically be replaced by 0. please help me to set data like that. thank you

Answers

extract unique dates from response (used Set, Array.from to create an initial entries)
create a dictionary from initial date entries (used Object.entries to create dictionary form array)
using Array.prototype.reduce create a dictionary of date and sum with name as key
used Object.entries to loop through the dictionary to create the result set.
used Object.keys to extract dates from the date dictionary
used Object.values to extract sum from the date dictionary

const response = [{
  date: "January 2019",
  sum: 20,
  name: "Persada",
}, {
  date: "Februay 2019",
  sum: 21,
  name: "Persada",
}, {
  date: "April 2019",
  sum: 22,
  name: "Persada",
}, {
  date: "January 2019",
  sum: 10,
  name: "Kharisma",
}, {
  date: "March 2019",
  sum: 5,
  name: "Kharisma",
}, {
  date: "Februari 2019",
  sum: 4,
  name: "Solusindo",
}, {
  date: "Mai 2019",
  sum: 2,
  name: "Solusindo",
}];

const initialValues = Array.from(new Set(response.map(({date}) => date)), date => [date, 0]);

const dictionary = response.reduce((acc, {
  date,
  sum,
  name
}) => {
  acc[name] = acc[name] || Object.fromEntries(initialValues);

  acc[name][date] = (acc[name][date] || 0) + sum;

  return acc;
}, {});

const result = Object.entries(dictionary).map(([name, sumByDate]) => ({
  date: Object.keys(sumByDate),
  sum: Object.values(sumByDate),
  name
}));


console.log(result);

.as-console-wrapper {
  max-height: 100vh !important;
  top: 0;
}

1) Build an Object with unique keys as name and values of sum, date, name.

2) Go over data with forEach loop, if the key does not exist then add the default values of sum with array of ‘0’s with array size of dates.

3) Update the respective sum value.

4) In the function return the Object values of res as an array.

const update = data => {
  const dates = [
    "January 2019",
    "February 2019",
    "March 2019",
    "April 2019",
    "Mai 2019"
  ];
  // Alternatively get the dates like
  // const dates = [...new Set(data.map(({date}) => date))];
  const sums = dates.map(x => 0);
  const res = {};
  data.forEach(({ name, sum, date }) => {
    if (!res[name]) {
      res[name] = { date: [...dates], sum: [...sums], name };
    }
    const index = dates.findIndex(month => month === date);
    if (index !== -1) {
      res[name]["sum"][index] = sum;
    }
  });
  return Object.values(res);
};

const data = [
  {
    date: "January 2019",
    sum: 20,
    name: "Persada"
  },
  {
    date: "Februay 2019",
    sum: 21,
    name: "Persada"
  },
  {
    date: "April 2019",
    sum: 22,
    name: "Persada"
  },
  {
    date: "January 2019",
    sum: 10,
    name: "Kharisma"
  },
  {
    date: "March 2019",
    sum: 5,
    name: "Kharisma"
  },
  {
    date: "Februari 2019",
    sum: 4,
    name: "Solusindo"
  },
  {
    date: "Mai 2019",
    sum: 2,
    name: "Solusindo"
  }
];

console.log(update(data));

Please signup or login to give your own answer.

Click here to cancel reply.

How To Grouping Array Data With Date From Ajax Response? – Jquery ajax

Answers