Cara mendorong data json ke dalam array javascript

Biasanya file JSON berisi larik, dan larik perlu dipetakan secara efektif agar data objeknya dimasukkan ke dalam komponen. Sumber file JSON bisa apa saja, baik dari file JSON lokal atau panggilan jaringan. Panduan ini akan menunjukkan cara mendapatkan data JSON sebagai larik dan menguraikannya atau mengakses larik JSON dari file lokal

Konversikan JSON ke Array Menggunakan `json. mengurai()`

File JSON biasanya berisi satu key prop yang mewakili pohon objek di dalam konten file. Jika Anda ingin menggunakan data JSON beserta kuncinya, maka fungsi parse() dapat digunakan.

Fungsi parse() mengambil argumen sumber JSON dan mengonversinya ke format JSON, karena sebagian besar waktu saat Anda mengambil .

1JSON.parse(JSON_source)

jsx

Pastikan itu memiliki nilai string yang berasal dari server atau sumber lokal. Jika demikian, maka fungsi parse akan berfungsi

Untuk mengikuti contoh dalam panduan ini, buat nilai status dengan nilai string yang terdiri dari larik item

1constructor(props) {
2    super(props);
3    this.state = {
4        stringData: '["VALUE1", "VALUE2", "VALUE3", "VALUE4", "VALUE5"]'
5    };
6}

jsx

Variabel status yang disebut

1constructor(props) {
2    super(props);
3    this.state = {
4        stringData: '["VALUE1", "VALUE2", "VALUE3", "VALUE4", "VALUE5"]'
5    };
6}

1const valuesArray = JSON.parse(this.state.stringData);

jsx

Setelah mem-parsing nilainya, itu dapat digunakan untuk rendering. Di bawah ini adalah contoh lengkap untuk penguraian JSON

1import React, { Component } from "react";
2
3export class Example1 extends Component {
4    constructor(props) {
5        super(props);
6        this.state = {
7            stringData: '["VALUE1", "VALUE2", "VALUE3", "VALUE4", "VALUE5"]'
8        };
9    }
10
11    render() {
12        // Parsed valued from string
13        const valuesArray = JSON.parse(this.state.stringData);
14
15        return (
16            <>
17                <div>
18                    <h3>Using local JSON file Array</h3>
19                    <ul>
20                        {valuesArray.map(item => {
21                            return <li>{item}</li>;
22                        })}
23                    </ul>
24                </div>
25            </>
26        );
27    }
28}
29
30export default Example1;

jsx

Setelah mendapatkan nilai dari server, fungsi parse() telah digunakan. Data parse sebagai larik dapat dipetakan menggunakan fungsi

1constructor(props) {
2    super(props);
3    this.state = {
4        stringData: '["VALUE1", "VALUE2", "VALUE3", "VALUE4", "VALUE5"]'
5    };
6}

Konversikan JSON ke Array dari File Lokal

Mungkin saja file JSON perlu digunakan dari sumber lokal, dan mungkin juga berisi array item atau objek

Untuk mengonversi array dari file JSON lokal ke objek berbasis JavaScript, Anda dapat menggunakan pernyataan impor ES6 untuk mengimpor file JSON lokal dan menggunakannya di komponen yang ada

File JSON apa pun dapat diimpor dari direktori lokal

1import Students from "./Students";

jsx

Di sini, di pernyataan impor di atas,

1constructor(props) {
2    super(props);
3    this.state = {
4        stringData: '["VALUE1", "VALUE2", "VALUE3", "VALUE4", "VALUE5"]'
5    };
6}

1constructor(props) {
2    super(props);
3    this.state = {
4        stringData: '["VALUE1", "VALUE2", "VALUE3", "VALUE4", "VALUE5"]'
5    };
6}

1{
2  "students": [
3    {
4      "name": "Student 1",
5      "age": "22",
6      "department": "Information Technology",
7      "rollno": "123"
8    },
9    {
10      "name": "Student 2",
11      "age": "21",
12      "department": "Computer Engineering",
13      "rollno": "456"
14    },
15    {
16      "name": "Student 3",
17      "age": "23",
18      "department": "Information Technology",
19      "rollno": "789"
20    }
21  ]
22}

json

Setelah mengimpor file JSON dari sumber lokal, Anda akan dapat menggunakan objek sumber. Ini juga digunakan untuk mengekstrak data, seperti yang ditunjukkan di bawah ini

Bagaimana cara mendorong data JSON ke dalam array di JavaScript?

Bagaimana cara memasukkan data JSON ke dalam array?

Bagaimana cara mendorong objek ke dalam array di JavaScript?

Bagaimana cara mendorong data ke file JSON di JavaScript?