How to transform Javascript Object based on one of the column?

Question

I am really struggling with the Object transformation. I have an array of Object and want to transform it into Highcharts multi line chart input.

For x-axis i need a object of unique dates.
For Y -axis i need a series of objects, each will have equal number of points as unique dates from step 1. For a ID and date if data is available it will add that value otherwise null.

Original:

[{
    "date": "1997-09-29",
    "Count": 100,
    "ID": "AB12-R"
  },
  {
    "date": "1997-12-30",
    "Count": 104.7,
    "ID": "AB13-R"
  },
  {
    "date": "1997-12-30",
    "Count": 1192,
    "ID": "BA12-R"
  },

  {
    "date": "1998-03-30",
    "Count": 981,
    "ID": "BA12-R"
  },
  {
    "date": "1998-06-01",
    "Count": 341,
    "ID": "BA12-R"
  }
]

Output:

[
  {
    Identiy: 'AB12-R',
    data: [100, null, null, null]
  },
  {
    Identiy: 'AB13-R',
    data: [null, 104.7, null, null]
  }, {
    Identiy: 'BA12-R',
    data: [null, 1192, 981, 341]
  }
]

Explanation:

In Original i have 4 unique dates, Hence the length of data for each identity is 4. Now for each unique date i'll check if there is any entry in Original if yes i'll push it in data if not that null.

My Code:

From some help from, this is what i was trying. But this is not checking the unique dates and just creating the data object length which is equal to number of object in the Original. Here is that implementation https://jsfiddle.net/3u9penko/

const data = [{"date":"1997-09-29","Count":100,"ID":"AB12-R"},{"date":"1997-12-30","Count":104.7,"ID":"AB13-R"},{"date":"1997-12-30","Count":1192,"ID":"BA12-R"},{"date":"1998-03-30","Count":981,"ID":"BA12-R"},{"date":"1998-06-01","Count":341,"ID":"BA12-R"}];

const hcData = [];

data.forEach((d, i) => {

  const checkIfExist = hcData.find(data => data.id === d["ID"])

  if (checkIfExist) {
    checkIfExist.data[i] = d["Count"];
  } else {
    const initialData = [...Array(data.length)]
    initialData.fill(null, 0, data.length)

    initialData[i] = d["Count"];
    hcData.push({
      data: initialData,
      id: d["ID"]
    })
  }
})

console.log(hcData)

There is a pattern which can be seen from the provided example. But especially how the data overlaps with the timestamps and the identities is as if it was made for this case. How about data where ID's do not fit so nicely into time ranges? Or can one assume that all the to be generated count arrays always match with the ID's in a way that everything fits perfectly along a time axis? — Peter Seliger
– Peter Seliger, Commented Sep 23, 2021 at 7:40
@PeterSeliger, Hello. I am a little unclear on your comment. But its gonna fit perfectly on the x-axis. The dates are mostly each quarter-end, So we can assume there is no much variation we will get (I am good with the perfect fit) — Shivam Agrawal
– Shivam Agrawal, Commented Sep 23, 2021 at 7:50
Does this answer your question? Transforming the array of object for Highcharts input? — Sebastian Wędzel
– Sebastian Wędzel, Commented Sep 23, 2021 at 9:27

Ori Drori · Accepted Answer · 2021-09-23 09:09:13Z

Create a Map of unique dates to index using a Set to get the unique dates, and then converting to a Map with the date as key, and the index as value.

Reduce the array to a Map using the ID as the key, and initializing the value with an empty array, that has the length of the dates Map size filled with null. Add the value of the current object to the array of nulls at the index of the date in the dates Map.

Convert the Map to an array of objects using Array.from().

const fn = arr => {
  // create a Map of uniqe dates with their index
  const dates = new Map(Array.from(
    new Set(arr.map(o => o.date)), 
    (v, i) => [v, i]
  ))

  return Array.from(
    arr.reduce((acc, o, i) => {
      // if an ID doesn't exist on the Map init it with an empty array of null values (counts)
      if(!acc.has(o.ID)) acc.set(o.ID, new Array(dates.size).fill(null))

      // add the current ID count to the array of counts
      acc.get(o.ID)[dates.get(o.date)] = o.Count

      return acc
    }, new Map),
    ([Identity, data]) => ({ Identity, data }) // convert to an array of objects
  )
}

const arr = [{"date":"1997-09-29","Count":100,"ID":"AB12-R"},{"date":"1997-12-30","Count":104.7,"ID":"AB13-R"},{"date":"1997-12-30","Count":1192,"ID":"BA12-R"},{"date":"1998-03-30","Count":981,"ID":"BA12-R"},{"date":"1998-06-01","Count":341,"ID":"BA12-R"}]

const result = fn(arr)

console.log(result)

Collectives™ on Stack Overflow

How to transform Javascript Object based on one of the column?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related