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
0 . 1constructor[props] {
2 super[props];
3 this.state = {
4 stringData: '["VALUE1", "VALUE2", "VALUE3", "VALUE4", "VALUE5"]'
5 };
6}
Hàm
0 lấy đối số của nguồn JSON và chuyển đổi nó thành định dạng JSON, bởi vì hầu hết thời gian khi bạn tìm nạp . 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à
0 có giá trị chuỗi hiện chứa mảng các mục. Sẽ hữu ích nếu bạn sử dụng hàm 1constructor[props] {
2 super[props];
3 this.state = {
4 stringData: '["VALUE1", "VALUE2", "VALUE3", "VALUE4", "VALUE5"]'
5 };
6}
0 để chuyển đổi giá trị chuỗi thành đối tượng JavaScript. 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
18 Using local JSON file Array
19
20 {valuesArray.map[item => {
21 return {item};
22 }]}
23
24
25
26 ];
27 }
28}
29
30export default Example1;
jsx
Sau khi nhận được các giá trị từ máy chủ, hàm
0 đã được sử dụng. Dữ liệu phân tích dưới dạng một mảng có thể được ánh xạ bằng cách sử dụng hàm 1constructor[props] {
2 super[props];
3 this.state = {
4 stringData: '["VALUE1", "VALUE2", "VALUE3", "VALUE4", "VALUE5"]'
5 };
6}
3 , hàm này lặp qua mảng các mục. 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,
4 sẽ đại diện cho nguồn của tệp JSON và bạn cần cung cấp đường dẫn của tệp đó từ đâu. . Dưới đây là tệp ______15 mẫu mà bạn có thể sử dụng làm bản demo. 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