取得したAPIを、chart.jsで取得できる形に加工したい。

前提・実現したいこと

chart.jsで折れ線グラフを動的に描画するために、取得したAPIをchart.jsで取得できる形に加工したいです。

発生している問題・エラーメッセージ

APIをchart.jsで扱うことができる形にしたいのですが、手が止まってしまいました。また、APIを加工する方法以外にもグラフを動的に描画できる方法があれば教えていただきたいです。

該当のソースコード

このようなapiのデータを

JavaScript
1 "data": [{
2                "year": 1980,
3                "value": 12817
4            }, {
5                "year": 1985,
6                "value": 12707
7            }, {
8                "year": 1990,
9                "value": 12571
10            }, {
11                "year": 1995,
12                "value": 12602
13            }, {
14                "year": 2000,
15                "value": 12199
16            }, {
17                "year": 2005,
18                "value": 11518
19            }, {
20                "year": 2010,
21                "value": 10888
22            }, {
23                "year": 2015,
24                "value": 10133
25            }, {
26                "year": 2020,
27                "value": 9275
28            }, {
29                "year": 2025,
30                "value": 8431
31            }, {
32                "year": 2030,
33                "value": 7610
34            }, {
35                "year": 2035,
36                "value": 6816
37            }, {
38                "year": 2040,
39                "value": 6048
40            }, {
41                "year": 2045,
42                "value": 5324
43            }]

↓のようなデータの形に加工したいです。

JavaScript
1const graphData = {
2    labels: [
3      data.year, data.year, data.year…
4    ],上記APIデータのyearの値が入ります。
5    datasets: [
6      {
7        data: [data.value, data.value, data.value,…],
8        // 上記APIデータのvalueの値が入ります。
9      },
10      {
11        data: [data.value, data.value, data.value,…],
12        // 上記のようなAPIを複数取得した場合、このようにオブジェクトが増えます。(2つ取得した場合)
13      },
14      {
15        data: [data.value, data.value, data.value,…],
16        // 上記のようなAPIを複数取得した場合、このようにオブジェクトが増えます。(3つ取得した場合)
17      },
18    ],
19  };
20

現在のコード

Babel
1import React from "react";
2import { Line } from "react-chartjs-2";
3
4export default class Chart extends React.Component {
5  constructor(props) {
6    super(props);
7    this.state = {
8      error: null,
9      isLoaded: false,
10      population: [],
11      chartData: {
12        labels: [
13          1960,
14          1965,
15          1970,
16          1975,
17          1980,
18          1985,
19          1990,
20          1995,
21          2000,
22          2005,
23          2010,
24          2015,
25          2020,
26          2025,
27          2030,
28          2035,
29          2040,
30          2045,
31        ],
32        datasets: [
33          {
34            data: [
35              1239655,
36              1239655,
37              1239655,
38              1239655,
39              12817,
40              12707,
41              12571,
42              12602,
43              12602,
44              11518,
45              10888,
46              10133,
47              9275,
48              8431,
49              7610,
50              6816,
51              6048,
52              5324,
53            ],// 仮にデータを入れてみました。
54          },
55        ],
56      },
57    };
58  }
59
60  getData = () => {
61    const chartData = this.state.chartData;
62    this.state.population.map((obj) => {
63      const data = [];
64      data.push(obj.value);
65    });
66    const dataObj = {};
67  };　// ここで手が止まってしまいました。
68
69  fetchPopulation = (prefCode) => {
70    fetch(
71      `https://opendata.resas-portal.go.jp/api/v1/population/composition/perYear?cityCode=-&prefCode=${prefCode}`,
72      {
73        headers: {
74          "X-API-KEY": "APIキーなので伏せます",
75        },
76      }
77    )
78      .then((res) => res.json())
79      .then(
80        (data) => {
81          const population = this.state.population;
82          population.push([data.result.data[0].data]);
83          this.setState({
84            isLoaded: true,
85            population: population,
86          });
87          console.log(this.state.population);
88        },
89        (error) => {
90          this.setState({
91            isLoaded: true,
92            error,
93          });
94        }
95      );
96  };
97
98  componentDidUpdate(prevProps) {
99    if (prevProps.checkedCodes !== this.props.checkedCodes) {
100      this.setState({
101        population: [],
102      });
103      this.props.checkedCodes.forEach((prefCode) => {
104        this.fetchPopulation(prefCode);
105      });
106    }
107  }
108
109  render() {
110    const { error, isLoaded } = this.state;
111    if (error) {
112      return <div>Error: {error.message}</div>;
113    } else if (!isLoaded) {
114      return <div>Loading...</div>;
115    } else {
116      return <Line data={this.state.chartData} />;
117    }
118  }
119}
120

参考サイト

ReactとChart.jsでグラフを複数描画する
 react-chart-js-2 の使い方まとめ

補足情報（FW/ツールのバージョンなど）

react-chart-js-2

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1
2const api_1 = {
3  "data": [{
4    "year": 1980,
5    "value": 12817
6  }, {
7    "year": 1985,
8    "value": 12707
9  }, {
10    "year": 1990,
11    "value": 12571
12  }]
13};
14
15
16const labels = api_1.data.map(r => r.year);
17const api_1_vals = api_1.data.map(r => r.value);
18const datasets = [{data: api_1_vals}];
19
20const graphData = { labels, datasets };
21