0

Overview

  1. I need to make a chart in my react project.
  2. Using data from a json (Object Array). Example json:
[
{recruiter_id: 1, datetime_created: "1/01/2021", name: "Aaron"},
{recruiter_id: 2, datetime_created: "9/01/2021", name: "Bob"},
{recruiter_id: 1, datetime_created: "9/01/2021", name: "Aaron"},
{recruiter_id: 3, datetime_created: "20/01/2021", name: "Jane"}
]
  1. Result object array structure required:
[
{name: name,
 recruiter_id: recruiter_id,
 week_qty: [0,2,1,0,2,0,0,0,0,0,0,0,0,1,0,0,0,...] },
...]

// week_qty will be an array of 52 to represent each week of the year. It will be a 0 if there was no dates for that week.

Goal

This is what the new object array should look like, if we used the example json.

[
{name: "Aaron", recruiter_id:1, week_qty: [1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,...]},
{name: "Bob", recruiter_id:2, week_qty: [0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,...]},
{name: "Jane", recruiter_id:3, week_qty: [0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,...]}
]

What I have

I dont have any working code yet. I am currently working on object[0] to attempt to put the dates into the 52 array. And then after that I will then turn it into a loop to work on each object. Once I have it semi working, I will post it for example.

--- Edit ---

   var array = result
        var flags = [], output = [], l = array.length, i;
        for (i = 0; i < l; i++) {
            if (flags[array[i].recruiter_id]) continue;
            flags[array[i].recruiter_id] = true;
            var temp = {}
            temp.Recruiter_id = array[i].recruiter_id
            temp.Name = array[i].name
            temp.QTY = []
            output.push(temp);
        }
        console.log("output : ", output)

This produces the new object array structure with the id and name filled out.

[
{name: name,
 recruiter_id: recruiter_id,
 week_qty: [] },
...]

It only has 1 object for each id

Now I need to work on getting the week numbers for the dates and put them into each of those objects.


Question

Any code suggestions on how to get this result?


Side Note

If your curious to know how I then plan on using the new object array to use with my chart.

  1. I will let the user select the week. Lets say week 1.
  2. I will then map through the object array and get the week_qty for index 1 and the name value of the object.
  3. I will store that week_qty and the name in a new new object array.
  4. That new new object array will then look like this
[{name: "Aaron",QTY: 2},{name: "Bob",QTY: 1,]
  1. That will then be passed as the x and y value to the chart.
E_net4
  • 27,810
  • 13
  • 101
  • 139
Random Stuff
  • 172
  • 2
  • 12
  • Are you using any library for dates like `moment.js` / `date-fns`/ `Luxon` etc ? – Gabriele Petrioli Feb 19 '21 at 20:43
  • No, I use this to get a clean date from the original json from the db. object_array.map(data => { data.datetime_created = new Date(data[datetime_key]).toLocaleString().split(",")[0] }) return object_array – Random Stuff Feb 19 '21 at 20:48

1 Answers1

1

You can use reduce and increase the week counter after parsing each date and getting the week (using moment.js for that part here)

But you can see Get week of year in JavaScript like in PHP for more details on how to calculate it yourself

const data = [
  {recruiter_id: 1, datetime_created: "1/01/2021", name: "Aaron"},
  {recruiter_id: 2, datetime_created: "9/01/2021", name: "Bob"},
  {recruiter_id: 1, datetime_created: "9/01/2021", name: "Aaron"},
  {recruiter_id: 3, datetime_created: "20/01/2021", name: "Jane"}
 ];

const weekly = data.reduce((acc, item, index, array) => {
  const {
    recruiter_id,
    datetime_created,
    name
  } = item;
  let existing = acc.find(({
    recruiter_id: id
  }) => id === recruiter_id);
  
  if (!existing) {
    existing = {recruiter_id, name, week_qty:Array(52).fill(0)};
    acc.push(existing);
  }
  
  const week = moment(datetime_created,'D/M/YYYY').week()-1;
  existing.week_qty[week]++;
  return acc;
}, []);

console.log(JSON.stringify(weekly))
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous"></script>
Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317