将嵌套数组简化为用于绘制 Covid-19 时间线的简单数组

Question

我正在使用 React.js 开发 Covid-19 仪表板，我想简化一个嵌套数组，从 Disease.sh API 调用 https://disease.sh/v3/covid-19/historical/ng%2C%20za%2C?lastdays=2:to 一个简单的使用 ES6 或 lodash 或其他合适的方法

来自：

[
  {
    "country": "Nigeria",
    "province": [
      "mainland"
    ],
    "timeline": {
      "cases": {
        "2/26/21": 155076,
        "2/27/21": 155417
      },
      "deaths": {
        "2/26/21": 1902,
        "2/27/21": 1905
      },
      "recovered": {
        "2/26/21": 132544,
        "2/27/21": 133256
      }
    }
  },
  {
    "country": "South Africa",
    "province": [
      "mainland"
    ],
    "timeline": {
      "cases": {
        "2/26/21": 1510778,
        "2/27/21": 1512225
      },
      "deaths": {
        "2/26/21": 49784,
        "2/27/21": 49941
      },
      "recovered": {
        "2/26/21": 1426417,
        "2/27/21": 1429047
      }
    }
  },
  null
]

到简单数组：

[
  {
    "country": "Nigeria",
    "date": "2/26/21",
    "cases": 155076,
    "deaths": 1902,
    "recovered": 132544
  },
  {
    "country": "Nigeria",
    "date": "2/27/21",
    "cases": 155417,
    "deaths": 1905,
    "recovered": 133256
  },
  {
    "country": "South Africa",
    "date": "2/26/21",
    "cases": 1510778,
    "deaths": 49784,
    "recovered": 1426417
  },
  {
    "country": "South Africa",
    "date": "2/27/21",
    "cases": 1512225,
    "deaths": 49941,
    "recovered": 1429047
  }
]

我要重现赛车排行榜：https://www.infragistics.com/react-apps/covid-dashboard

这是我迄今为止失败的尝试：

const fetchData = async () => {
    const res = await axios(
      'https://disease.sh/v3/covid-19/historical?lastdays=30'
    );

    const temp_data = res.data;

    const data = temp_data.map((country) => ({
      country: country.country,
      date: Object.keys(country.timeline.cases),
      cases: Object.values(country.timeline.cases),
      deaths: Object.values(country.timeline.deaths),
      recovered: Object.values(country.timeline.recovered),
    }));

 
    console.log(data);
  };

 useEffect(() => {
    fetchData();
  }, []);

Answer 1

let data = [{
        "country": "Nigeria",
        "province": [
            "mainland"
        ],
        "timeline": {
            "cases": {
                "2/26/21": 155076,
                "2/27/21": 155417
            },
            "deaths": {
                "2/26/21": 1902,
                "2/27/21": 1905
            },
            "recovered": {
                "2/26/21": 132544,
                "2/27/21": 133256
            }
        }
    },
    {
        "country": "South Africa",
        "province": [
            "mainland"
        ],
        "timeline": {
            "cases": {
                "2/26/21": 1510778,
                "2/27/21": 1512225
            },
            "deaths": {
                "2/26/21": 49784,
                "2/27/21": 49941
            },
            "recovered": {
                "2/26/21": 1426417,
                "2/27/21": 1429047
            }
        }
    },
    null
]

const rebuildData = obj => {
    // create init object
    let output = []

    //start country loop
    for (let i = 0; i < data.length; i++) {

        // get single country
        const c = data[i];

        // if country is null next i
        if(c == null) continue;

        // get timeline
        let t = c.timeline;

        // loop thought cases representative for the others
        for (const key in t.cases) {
            if (Object.hasOwnProperty.call(t.cases, key)) {

                // build and push output
                output.push({
                    country: c.country,
                    date:key,
                    cases:t.cases[key],
                    deaths:t.deaths[key],
                    recovered:t.recovered[key],
                })
                
            }
        }
    }

    // return output
    return output;
}

console.log(rebuildData(data));

Answer 2

您可以为每个国家/地区收集各个州和 return 个新对象。

const
    data = [{ country: "Nigeria", province: ["mainland"], timeline: { cases: { "2/26/21": 155076, "2/27/21": 155417 }, deaths: { "2/26/21": 1902, "2/27/21": 1905 }, recovered: { "2/26/21": 132544, "2/27/21": 133256 } } }, { country: "South Africa", province: ["mainland"], timeline: { cases: { "2/26/21": 1510778, "2/27/21": 1512225 }, deaths: { "2/26/21": 49784, "2/27/21": 49941 }, recovered: { "2/26/21": 1426417, "2/27/21": 1429047 } } }],
    getCases = ({ country, timeline }) => Object.values(Object.entries(timeline).reduce((r, [key, o]) => {
        Object.entries(o).forEach(([date, value]) => {
            r[date] ??= { country, date };
            r[date][key] = value;
        });
        return r;
    }, {})),
    result = data.flatMap(o => o ? getCases(o) : []);

console.log(result);

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

将嵌套数组简化为用于绘制 Covid-19 时间线的简单数组

Simplifying nested array to simple array for plotting Covid-19 timeline

javascript

underscore.js

ecmascript-6

lodash

reactjs