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.

1. For x-axis i need a object of unique dates.
2. 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)

CodePudding user response：

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)