Javascript：以特定数组格式重新排列 json 输出答案

【问题标题】：Javascript: rearrage json output in a specific array formatJavascript：以特定数组格式重新排列 json 输出
【发布时间】：2020-08-13 06:47:20
【问题描述】：

对我来说又是一个愚蠢的时刻。花了几个小时浏览 for 循环、映射、reduce、字典，但似乎无法弄清楚。我有一个看起来像这样的 json 数据

{
  "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
        }
      ]
    }
  ]
}

我需要这种格式的

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

需要在 JavaScript 中执行此操作。任何帮助/指针将不胜感激。

【问题讨论】：

标签： javascript arrays json dictionary formatting

【解决方案1】：

您可以使用一个对象进行分组，并使用一个数组来存储所有键，以获得具有所有相同键的有序结果。

这种方法从结果集中过滤所有零值。

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; }

【讨论】：

【解决方案2】：

这是临时解决方案，你可以试试这个。我正在使用lodash，请安装它。

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)

【讨论】：

【解决方案3】：

使用多个forEach 循环并构建一个要跟踪的对象。然后获取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)

【讨论】：