Chuyển đổi mảng JSON thành mảng JavaScript

Thông thường, các tệp JSON chứa một mảng và cần ánh xạ mảng một cách hiệu quả để dữ liệu của các đối tượng của nó được đưa vào thành phần. Nguồn của tệp JSON có thể là bất kỳ thứ gì, từ tệp JSON cục bộ hoặc cuộc gọi mạng. Hướng dẫn này sẽ trình bày cách lấy dữ liệu JSON dưới dạng một mảng và phân tích cú pháp hoặc truy cập mảng JSON từ tệp cục bộ

Chuyển đổi JSON thành mảng bằng cách sử dụng `json. phân tích cú pháp () `

Tệp JSON thường chứa một key prop đại diện cho cây của đối tượng bên trong nội dung tệp. Nếu bạn muốn sử dụng dữ liệu JSON cùng với khóa, thì có thể sử dụng hàm

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

Hàm

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

1JSON.parse(JSON_source)

jsx

Đảm bảo rằng nó có giá trị chuỗi đến từ máy chủ hoặc nguồn cục bộ. Nếu vậy thì chức năng phân tích cú pháp sẽ hoạt động

Để làm theo ví dụ trong hướng dẫn này, hãy tạo một giá trị trạng thái với một giá trị chuỗi bao gồm một mảng các mục

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

jsx

Biến trạng thái có tên là

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}

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

jsx

Sau khi phân tích giá trị, nó có thể được sử dụng để kết xuất. Dưới đây là ví dụ hoàn chỉnh cho việc phân tích cú pháp 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 Arrayh3>
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

Sau khi nhận được các giá trị từ máy chủ, hàm

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}

Chuyển đổi JSON thành mảng từ tệp cục bộ

Có thể tệp JSON cần được sử dụng từ nguồn cục bộ và nó cũng có thể chứa một mảng các mục hoặc đối tượng

Để chuyển đổi mảng từ tệp JSON cục bộ sang đối tượng dựa trên JavaScript, bạn có thể sử dụng câu lệnh nhập ES6 để nhập tệp JSON cục bộ và sử dụng nó trong các thành phần hiện có

Bất kỳ tệp JSON nào cũng có thể được nhập từ thư mục cục bộ

1import Students from "./Students";

jsx

Ở đây trong câu lệnh nhập ở trên,

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

Sau khi nhập tệp JSON từ nguồn cục bộ, bạn sẽ có thể sử dụng đối tượng nguồn. Điều này cũng được sử dụng để trích xuất dữ liệu, như hình dưới đây

Chúng ta có thể chuyển đổi JSON thành mảng không?

Làm cách nào tôi có thể chuyển đổi JSON thành chuỗi?

JSON có thể bắt đầu bằng mảng không?

Có mảng nào trong JSON không?