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

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

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

>

来自：

[
  {
    "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","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
  },"cases": 1510778,"deaths": 49784,"recovered": 1426417
  },"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();
  },[]);

解决方法

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","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));

,

您可以收集各个州并为每个国家返回新对象。

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