Javascript: rearrage json output in a specific array format

Question

Another dumb moment for me. Spent hours through for loops, maps, reduce, dictionaries but just can't seem to figure it out. I have a json data that look like this

{
  "timeline": [
    {
      "series": "series1",
      "data": [
        {
          "date": "20200713T120000Z",
          "value": 0
        },
        {
          "date": "20200714T120000Z",
          "value": 8
        },
        {
          "date": "20200715T120000Z",
          "value": 0
        }
      ]
    },
    {
      "series": "series2",
      "data": [
        {
          "date": "20200713T120000Z",
          "value": 0
        },
        {
          "date": "20200714T120000Z",
          "value": 0
        }
      ]
    },
    {
      "series": "series3",
      "data": [
        {
          "date": "20200713T120000Z",
          "value": 1
        },
        {
          "date": "20200714T120000Z",
          "value": 0
        }
      ]
    },
    {
      "series": "series4",
      "data": [
        {
          "date": "20200713T120000Z",
          "value": 2
        },
        {
          "date": "20200714T120000Z",
          "value": 4
        }
      ]
    }
  ]
}

I need it in this format

[
  {
    date: "20200713T120000Z",
    series1: 0,
    series2: 0,
    series3: 1,
    series4: 2
  },
  {
    date: "20200714T120000Z",
    series1: 8,
    series2: 0,
    series3: 0,
    series4: 4
  }
]

Need to do this in JavaScript. Any help/ pointers will be much appreciated.

Answer 1

This is temporary solution for this, you can try this. I'm using lodash , so please install it.

var _ = require('lodash')

const data = {"timeline": [ { "series": "series1", "data": [ { "date": "20200713T120000Z", "value": 0 },{ "date": "20200714T120000Z", "value": 8 },{ "date": "20200715T120000Z", "value": 0 }] },{ "series": "series2", "data": [ { "date": "20200713T120000Z", "value": 0 },{ "date": "20200714T120000Z", "value": 0 }] },{ "series": "series3", "data": [ { "date": "20200713T120000Z", "value": 1 },{ "date": "20200714T120000Z", "value": 0 }] },{ "series": "series4", "data": [ { "date": "20200713T120000Z", "value": 2 },{ "date": "20200714T120000Z", "value": 4 }] }] }

const t = _.flattenDeep(data.timeline.map(i => i.data.map(d => ({...d, series: i.series}))))

const result = t.reduce((acc, i) => {
    const index = acc.findIndex(a => a.date === i.date)
    if(index !== -1){
        acc[index] = {
            ...acc[index],
            [i.series]: i.value
        }

        
    }else {
        acc.push({
            date: i.date,
            [i.series]: i.value
        })
    }

    return acc
}, [])

console.log(result)

Answer 2

Use multiple forEach loops and build an object to track. Then get Object.values

 const convert = (arr) => { const res = {}; arr.forEach(({ series, data }) => data.forEach( ({ date, value }) => (res[date] = {...(res[date]?? { date }), [series]: value }) ) ); return Object.values(res); }; obj = {"timeline": [ { "series": "series1", "data": [ { "date": "20200713T120000Z", "value": 0 },{ "date": "20200714T120000Z", "value": 8 },{ "date": "20200715T120000Z", "value": 0 }] },{ "series": "series2", "data": [ { "date": "20200713T120000Z", "value": 0 },{ "date": "20200714T120000Z", "value": 0 }] },{ "series": "series3", "data": [ { "date": "20200713T120000Z", "value": 1 },{ "date": "20200714T120000Z", "value": 0 }] },{ "series": "series4", "data": [ { "date": "20200713T120000Z", "value": 2 },{ "date": "20200714T120000Z", "value": 4 }] }] } const res = convert(obj.timeline); console.log(res)

Answer 3

You could take an object forgrouping and an array for storing all keys for getting an ordered result with all same keys.

This approach filters all zero values from the result set.

 const data = { timeline: [{ series: "series1", data: [{ date: "20200713T120000Z", value: 0 }, { date: "20200714T120000Z", value: 8 }, { date: "20200715T120000Z", value: 0 }] }, { series: "series2", data: [{ date: "20200713T120000Z", value: 0 }, { date: "20200714T120000Z", value: 0 }] }, { series: "series3", data: [{ date: "20200713T120000Z", value: 1 }, { date: "20200714T120000Z", value: 0 }] }, { series: "series4", data: [{ date: "20200713T120000Z", value: 2 }, { date: "20200714T120000Z", value: 4 }] }] }, keys = ['date'], result = Object.values(data.timeline.reduce((r, { series, data }) => { keys.push(series); data.forEach(({ date, value }) => { if (;value) return; if (;r[date]) r[date] = { date }; r[date][series] = value; }), return r. }. {})).map(o => ({...Object,fromEntries(keys,map(k => [k. 0])). .;.o })); console.log(result);

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