1. Tổng quan về mảng trong JSON
Mảng trong JSON thực chất cũng giống như một mảng trong Js. Nhưng cũng có một số khác biệt. Trong JSON thì mảng sẽ có những giá trị là kiểu chuỗi, số, đối tượng, mảng, boolean hay null . Còn trong Js thì mảng có thể có giá trị là tất cả kiểu trên cùng với đó giá trị của nó cũng có thể là một biểu thức Js hợp lệ khác như hàm, ngày tháng hay unundefined.
Ví dụ:
Đây là một chuỗi JSON : '["Ford", "BMW", "Vinfast"]'
Bên trong chuỗi này có một mảng JSON : ["Ford", "BMW", "Vinfast"]
Ta cũng có thể tạo mảng Js bằng cách phân tích cú pháp JSON với việc sử dụng JSON.parse
Ví dụ:
<!DOCTYPE html>
<html>
<body>
<h2>Tạo một mảng từ JSON</h2>
<p id="demo"></p>
<script>
const myJSON = '["Ford", "BMW", "Vinfast"]';
const myArray = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myArray;
</script>
</body>
</html>
2. Truy cập và sửa đổi các giá trị trong mảng
Mảng JSON cũng có thể là giá trị của thuộc tính dối tượng JSON
{
"name":"Thành",
"age":19,
"cars":["Ford", "BMW", "Vinfast"]
}
Sau đó ta truy cập các giá trị mảng theo chỉ mục:
<!DOCTYPE html>
<html>
<body>
<h2>Truy cập giá trị mảng</h2>
<p id="demo"></p>
<script>
const myJSON = '{"name":"Thành", "age":19, "cars":["Ford", "BMW", "Vinfast"]}';
const myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.cars[0];
</script>
</body>
</html>
Ta cũng có thể dựa theo chỉ mục để sửa đổi mảng
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
"name":"Thành",
"age":19,
"cars":[ "Ford", "BMW", "Vinfast" ]
};
myObj.cars[1] = "Mercedes";
for (i in myObj.cars) {
x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
3. Lặp qua một mảng JSON
Ta có thể sử dụng vòng lặp for in để truy cập các giá trị của mảng
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
const myJSON = '{"name":"Thành", "age":19, "cars":["Ford", "BMW", "Vinfast"]}';
const myObj = JSON.parse(myJSON);
let text = "";
for (let i in myObj.cars) {
text += myObj.cars[i] + ", ";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Hoặc thay vào đó sử dụng một vòng lặp for
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
const myJSON = '{"name":"Thành", "age":19, "cars":["Ford", "BMW", "Vinfast"]}';
const myObj = JSON.parse(myJSON);
let text = "";
for (let i = 0; i < myObj.cars.length; i++) {
text += myObj.cars[i] + ", ";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
4. Mảng lồng nhau trong đối tượng JSON
Giá trị trong một mảng cũng có thể là một mảng khác hoặc thậm chí là một đối tượng JSON khác.
Ví dụ:
myObj = {
"name":"Thành",
"age":19,
"car":[
{"name":"Ford","models":["Fiesta","Focus","Mustang"]},
{"name":"BMW","models":["210","X5","X3"]},
{"name":"Vinfast","models":["Điện","C9","X4"]},
]
}
Để truy cập giá trị bên trong ta cũng sẽ sử dụng vòng lặp cho mảng
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var myObj, i, j, x = "";
myObj = {
"name":"Thành",
"age":19,
"cars": [
{"name":"Ford","models":["Fiesta","Focus","Mustang"]},
{"name":"BMW","models":["210","X5","X3"]},
{"name":"Vinfast","models":["Điện","C9","X4"]},
]
}
for (i in myObj.cars) {
x += "<h2>" + myObj.cars[i].name + "</h2>";
for (j in myObj.cars[i].models) {
x += myObj.cars[i].models[j] + "<br>";
}
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
5. Xóa chỉ mục trong mảng
Ta sử dụng delete để xóa các mục bên trong mảng
Ví dụ:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
"name":"Thành",
"age":19,
"cars": ["Ford","BMW","Vinfast"]
}
delete myObj.cars[1];
for (i in myObj.cars) {
x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
