Как получить данные от JSON ReactJs - PullRequest
0 голосов
/ 29 апреля 2020

У меня есть JSON данные, подобные этим: Мои JSON данные

И это мой код:

class WorldLineChart extends Component{
    constructor(props) {
        super(props);
    
        this.state = {
          data: []
        };
      }
    componentDidMount(){
        axios.get(`https://td.fpt.ai/corona/corona-total.json`)
        .then(res => {
            const data = res.data;
            console.log(data);
            this.setState({data: data});
        });
    }

    render(){

        const data = this.state
       
        return(
            <div>
               
            </div>
        )
    }

}
Это то, что я получаю после запуска приведенного выше кода: Результат

Интересно, как я могу получить все ключи и каждое значение (которое является массивом)? чтобы нарисовать линейный график, используя ReactJs.

Это код моей линейной диаграммы:

const lineChart = (
        data
        ? (
            <Line
                data = {{
                    labels: //what i have to put in here,
                    datasets: [{
                        data: //what i have to put in here,
                        label: 'Infected',
                        borderColor: '#3333ff',
                        fill: true
                    }, {
                        data: //what i have to put in here,
                        label: 'Recovered',
                        borderColor: 'green',
                        backgroundColor: 'rgba(255,0,0,0.5)',
                        fill: true
                    },{
                        data: //what i have to put in here,
                        label: 'Deaths',
                        borderColor: 'red',
                        backgroundColor: 'rgba(0, 255, 0, 0.5)',
                        fill: true
                    }],
                }}
            /> ): null
    );

Большое спасибо!

Ответы [ 2 ]

0 голосов
/ 29 апреля 2020

Доступ к вашим данным можно получить с помощью this.state.data, вам необходимо провести рефакторинг

const data = this.state

до

const {data} = this.state

Что означает:

const data = this.state.data
0 голосов
/ 29 апреля 2020
{
Array.isArray(data) ?
data.map((data,index) => <div key={index}>{data.bind your data}</div>) :  error
}

думаю, что это должно помочь.

...