Sử dụng mảng đối tượng JSON trong JavaScript – đối tượng json với mảng

Hướng dẫn này giải thích mảng đối tượng JSON.

Bạn đang xem : đối tượng json với mảng

Đối tượng JSON là một đối tượng JavaScript đơn giản. Chúng ta có thể tạo một mảng với nhiều đối tượng JSON giống nhau. Không giống như các ngôn ngữ như C, C ++, Java, v.v., trong javascript, việc xử lý mảng đối tượng JSON rất dễ dàng. Nó có thể so sánh với một Mảng cấu trúc trong C hoặc một mảng của một đối tượng lớp trong Java. Trong bài viết này, chúng ta sẽ thảo luận về cách tạo mảng đối tượng JSON thông qua việc lặp lại và tìm một phần tử trong đó.

Tạo một mảng Đối tượng JSON

Chúng ta có thể tạo một mảng đối tượng JSON bằng cách gán mảng JSON cho một biến hoặc bằng cách thêm động các giá trị trong mảng đối tượng bằng toán tử .push () hoặc thêm một đối tượng vào chỉ mục của mảng bằng cách sử dụng các cấu trúc lặp như vòng lặp for hoặc vòng lặp while . Tham khảo đoạn mã sau để hiểu rõ hơn.

  var months = [{"id": 1, "name": "January"}, {"id" : 2, "name": "Tháng Hai"}];
console.log (JSON.stringify (tháng));
var monthNames = ["Tháng 1", "Tháng 2"];
var tháng = {};
var thángArray = [];
for (cho i = 0; i & lt; 2; i ++) {
    tháng.id = (i + 1);
    month.name = monthNames [i];
    monthsArray.push ({... tháng});
}
console.log (JSON.stringify (monthsArray));
 

Đầu ra:

  [{"id": 1, "name": "January"}, {"id ": 2," tên ":" tháng 2 "}]
[{"id": 1, "name": "January"}, {"id": 2, "name": "Tháng Hai"}]
 

Trong đoạn mã trên, biến months giữ mảng các đối tượng JSON được chỉ định rõ ràng, trong khi monthsArray là một mảng JSON các đối tượng được tạo bằng cách gán giá trị bên trong vòng lặp for . Chúng tôi sử dụng hàm mảng .push () để thêm đối tượng javascript đã tạo vào cuối monthsArray . Lưu ý rằng cả hai mảng đều hiển thị cùng một cấu trúc khi được ghi bằng câu lệnh JavaScript console.log () . Hàm JSON.stringify () chuyển đổi mảng JSON thành định dạng chuỗi để làm cho nó ở định dạng mà con người có thể đọc được.

Truy cập một đối tượng từ một mảng các đối tượng JSON

Chúng tôi đã tạo một mảng các đối tượng JSON. Hãy để chúng tôi xem cách chúng tôi có thể truy cập một phần tử của mảng này. Cách tiếp cận cũng giống như chúng ta làm đối với một mảng chuỗi đơn giản hoặc một mảng số. Chúng ta có thể truy cập một đối tượng mảng bằng cách sử dụng Chỉ mục mảng (bắt đầu từ 0 ) và thao tác giá trị đối tượng tại chỉ mục đó. Tham khảo đoạn mã sau.

  var months = [{"id": 1, "name": "January"}, {"id": 2, "name": "Tháng Hai"}];
console.log (tháng [0] .id);
console.log (tháng [0] .name);
tháng [0] .id = 3;
tháng [0] .name = "Tháng 3";
console.log (tháng [0] .id);
console.log (tháng [0] .name);
 

Đầu ra:

  1
tháng Giêng
3
Bước đều
 

Trong mã, chúng tôi đã thay đổi giá trị của các tham số đối tượng bằng cách truy cập chỉ mục đầu tiên của mảng tháng bằng cách sử dụng Chỉ mục mảng . Tương tự, chúng ta có thể thay đổi giá trị của bất kỳ đối tượng nào khác của mảng bằng cách sử dụng chỉ mục của nó.

Xem Thêm  11 cách để căn giữa Div hoặc văn bản trong Div trong CSS - div giữa trên một trang

Lặp lại trên một mảng đối tượng JSON

Chúng ta có thể lặp lại mảng đối tượng giống như cách chúng ta làm đối với mảng chuỗi hoặc mảng số. Chúng ta có thể sử dụng vòng lặp for hoặc vòng lặp while cho mục đích của mình. Chúng ta có thể truy cập các phần tử bằng cách sử dụng các chỉ số mảng. Chúng tôi lặp lại mảng từ chỉ số thứ 0 đến độ dài của mảng. Thuộc tính .length cũng trả về độ dài của mảng đối tượng. Tham khảo đoạn mã sau đây hiển thị giá trị lặp lại của mảng và giá trị in của từng đối tượng trong đó.

  var months = [{"id": 1, "name" : "Tháng Giêng"}, {"id": 2, "name": "Tháng Hai"}];
for (let i = 0; i & lt; months.length; i ++) {
  console.log (`$ {i} id: $ {months [i] .id}, name: $ {months [i] .name}`)
}
 

Đầu ra:

  0 id: 1, name: January
1 id: 2, tên: tháng 2
 

Thêm đối tượng vào mảng đối tượng JSON

Chúng tôi có đã tạo một mảng các đối tượng và lặp lại chúng. Bây giờ chúng ta hãy xem cách thêm các phần tử vào mảng JSON. Chúng ta có thể sử dụng hàm .push () để thêm một đối tượng JSON vào cuối mảng. Hàm .unshift () thêm một phần tử vào đầu mảng JSON. .splice () chèn một đối tượng tại một chỉ mục được chỉ định trong một mảng. Tham khảo đoạn mã sau mô tả cách sử dụng của từng chức năng này.

 var months = [{"id": 1, "name": "January"}, {"id": 2, "name": "January"}];
months.push ({"id": 4, "name": "April"});
console.log (JSON.stringify (tháng));
months.unshift ({"id": 12, "name": "December"})
console.log (JSON.stringify (tháng));
months.splice (3, 0, {"id": 3, "name": "March"});
console.log (JSON.stringify (tháng));
 

Đầu ra:

  [{"id": 1, "name": "January"}, {"id ": 2," name ":" Tháng 2 "}, {" id ": 4," name ":" Tháng 4 "}]
[{"id": 12, "name": "December"}, {"id": 1, "name": "January"}, {"id": 2, "name": "Tháng Hai"}, { "id": 4, "name": "April"}]
[{"id": 12, "name": "December"}, {"id": 1, "name": "January"}, {"id": 2, "name": "Tháng Hai"}, { "id": 3, "name": "March"}, {"id": 4, "name": "April"}]
 

Lưu ý, chúng ta có thể sử dụng hàm .splice () để thay thế các đối tượng từ một mảng với các giá trị mới hơn được truyền dưới dạng tham số. Tham số đầu tiên của phương thức .splice () là chỉ mục mà chúng ta thực hiện các thao tác. Là tham số thứ hai, chúng tôi đề cập đến số phần tử mà chúng tôi muốn thay thế. Tham số cuối cùng là giá trị mà chúng tôi chèn vào mảng.

Xóa một đối tượng khỏi một mảng đối tượng JSON

Chúng tôi có thể xóa các phần tử khỏi một mảng đối tượng theo cách tương tự như trong các mảng JavaScript đơn giản. Chúng ta có thể sử dụng phương thức .pop () của javascript để xóa phần tử khỏi phần cuối của mảng đối tượng JSON. .shift () xóa một đối tượng khỏi đầu mảng đối tượng JSON. Hàm .splice () loại bỏ một phần tử tại một chỉ mục được chỉ định của mảng JSON. Tham khảo đoạn mã sau.

  var months = [{"id": 12, "name": "December"}, {"id": 1, "name": "January"}, {"id": 2, "name": "Tháng Hai"}, {"id": 3, "name": "March"}, {"id": 4, "name ":"Tháng tư"}];
tháng.shift ();
console.log (JSON.stringify (tháng));
tháng.pop ();
console.log (JSON.stringify (tháng));
tháng.splice (1,1);
console.log (JSON.stringify (tháng));
 

Đầu ra:

  [{"id": 1, "name": "January"}, {"id ": 2," name ":" January "}, {" id ": 3," name ":" March "}, {" id ": 4," name ":" April "}]
[{"id": 1, "name": "January"}, {"id": 2, "name": "Tháng Hai"}, {"id": 3, "name": "March"}]
[{"id": 1, "name": "January"}, {"id": 3, "name": "March"}]
 

Tìm kiếm một phần tử từ mảng đối tượng JSON

Chúng ta có thể sử dụng .indexOf () hoặc include () để kiểm tra xem một phần tử có trong một mảng chuỗi đơn giản hay không. Nhưng những phương thức này sẽ không hoạt động đối với một mảng đối tượng. Chúng ta có thể sử dụng một số hàm tương tự như .filter () , .find () , findIndex () để kiểm tra xem một phần tử có trong mảng. Chúng tôi có thể lặp lại mảng theo cách thủ công và kiểm tra xem phần tử có tồn tại hay không bằng cách sử dụng các cấu trúc lặp (như vòng lặp for , while , v.v.), nhưng đó có thể là tùy chọn cuối cùng được xem xét, vì nó sẽ dẫn đến mã cồng kềnh. Các hàm có sẵn trong javascript như .filter () , .find () , findIndex () rất hữu ích để tìm kiếm các đối tượng trong một mảng đối tượng JSON. Hàm .filter () trả về một mảng chứa các đối tượng thỏa mãn một điều kiện nhất định, .find () trả về đối tượng thỏa mãn điều kiện được truyền dưới dạng hàm nội tuyến cho nó , .findIndex () sẽ trả về chỉ mục của đối tượng nếu nó có thể tìm thấy nó trong mảng, nếu không nó sẽ trả về -1 . Do đó, bằng cách biết kiểu trả về của các hàm, chúng ta có thể thiết kế chức năng tìm kiếm trong một mảng các đối tượng JSON. Tham khảo đoạn mã sau để hiểu rõ hơn cách sử dụng của .filter () , .find () , findIndex () .

  var months = [{"id": 12, "name": "December"}, {"id": 1, "name": "January"}, { "id": 2, "name": "January"}, {"id": 3, "name": "March"}, {"id": 4, "name": "April"}];
(months.filter (i = & gt; i.name === "April"). length)? console.log ("Tìm thấy tháng 4"): console.log ("Không tìm thấy");
(months.find (i = & gt; i.name === "Tháng 1")! = {})? console.log ("Tìm thấy tháng 1"): console.log ("Không tìm thấy");
(months.findIndex (i = & gt; i.name === "April") & gt; -1)? console.log ("Tìm thấy tháng 4"): console.log ("Không tìm thấy");
 

Đầu ra:

  Tìm thấy tháng 4
Tháng một được tìm thấy
Tháng tư tìm thấy
 

Viết cho chúng tôi

Các bài viết trên DelftStack được viết bởi những người yêu thích phần mềm như bạn. Nếu bạn cũng muốn đóng góp cho DelftStack bằng cách viết các bài báo trả phí, bạn có thể xem trang viết cho chúng tôi .


Xem thêm những thông tin liên quan đến chủ đề đối tượng json với mảng

How to read and create JSON objects in Power Automate

  • Tác giả: Alex Tofan
  • Ngày đăng: 2020-03-27
  • Đánh giá: 4 ⭐ ( 5866 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: How to read and create JSON objects in Power Automate.
    If you want me to create a tutorial about something related to Power Platform, please leave a comment below.

JSON Parsing: Phân giải dữ liệu JSON với PHP

  • Tác giả: laptrinhvienphp.com
  • Đánh giá: 3 ⭐ ( 9163 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài hướng dẫn tự học Lập trình PHP này, bạn sẽ dược học cách mã hóa (endcode) và giải mã (decode) dữ liệu JSON với PHP.

Mảng (Array) trong JSON

  • Tác giả: viettuts.vn
  • Đánh giá: 4 ⭐ ( 8843 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mảng trong JSON đại diện cho danh sách thứ tự các giá trị. Mảng trong JSON có thể lưu trữ nhiều giá trị. Nó có thể lưu trữ chuỗi, số, boolean hoặc đối tượng

Lập Trình Từ Đầu

  • Tác giả: laptrinhtudau.com
  • Đánh giá: 5 ⭐ ( 4920 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mảng – Array trong JSON – Lập Trình Từ Đầu 9 JSON Trong JavaScript

JSON: Mảng JSON

  • Tác giả: v1study.com
  • Đánh giá: 5 ⭐ ( 6725 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mảng trong JSON gần giống như mảng trong JavaScript. Trong JSON, các giá trị mảng phải có kiểu chuỗi, số, đối tượng, mảng, boolean hoặc null. Trong JavaS

JSON trong Javascript

  • Tác giả: kungfutech.edu.vn
  • Đánh giá: 4 ⭐ ( 1704 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JSON là viết tắt của JavaScript Object Notation, là một kiểu định dạng dữ liệu tuân theo một quy luật nhất định mà hầu hết các ngôn ngữ lập trình hiện nay đều có thể đọc được. JSON là một tiêu chuẩn mở để trao đổi dữ liệu trên web.

[JSON Là Gì] – Tìm hiểu JSON qua các ví dụ cụ thể

  • Tác giả: vietnix.vn
  • Đánh giá: 4 ⭐ ( 1383 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn đã nghe đến thuật ngữ JSON? Nhưng không biết JSON từ đâu, cú pháp hay cấu trúc JSON như thế nào? Bài viết này, giúp bạn nắm được JSON là gì qua các ví dụ cụ thể.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình