Nhận giá trị từ đối tượng JSON trong JavaScript (Mã ví dụ) – lấy giá trị từ đối tượng json trong javascript

JSON là một định dạng trao đổi dữ liệu nhẹ. Chúng ta sẽ xem cách lấy giá trị từ đối tượng JSON trong JavaScript với nhiều ví dụ …

Bạn đang xem: lấy giá trị từ đối tượng json trong javascript

Nhận giá trị từ đối tượng JSON trong JavaScript

< / p>

Hầu hết giao dịch dữ liệu giữa máy khách và máy chủ là ở dạng Đối tượng JSON. Trong bài viết này, chúng ta sẽ xem cách lấy giá trị từ đối tượng JSON trong JavaScript.

< p class = "ezoic-ad medrectangle-3 medrectangle-3136 adtester-container adtester-container-136">

Trong các ứng dụng web hiện đại, chúng tôi sử dụng JSON để gửi dữ liệu giữa máy khách và máy chủ vì đây là định dạng trao đổi dữ liệu nhẹ. JSON cũng được sử dụng để lưu trữ dữ liệu cục bộ.

Trước khi gửi dữ liệu JSON đến máy chủ qua API, chúng tôi cần chuyển đổi dữ liệu đó thành một chuỗi. Theo cách tương tự, dữ liệu máy chủ bạn nhận được qua API cũng cần được chuyển đổi thành đối tượng JSON và sau đó bạn có thể truy cập dữ liệu.

Hãy xem cách lấy dữ liệu từ kho lưu trữ đối tượng JSON cục bộ hoặc nhận qua API trong JavaScript.

Nhận giá trị từ đối tượng JSON được lưu trữ cục bộ

Đầu tiên, chúng ta sẽ xem cách lấy dữ liệu từ đối tượng JSON được lưu trữ cục bộ trong một biến.

Hãy để dữ liệu sau:

  var worker = `{
  "Nhân viên": {
    "name": "John",
    "tuổi": 30,
    "lương": 5000,
    "thành phố": "New York",
    "kỹ năng": ["JavaScript", "CSS", "HTML"]
  }
} `;  

Dữ liệu được hiển thị ở trên là dữ liệu JSON được lưu trữ trong một biến có tên là nhân viên.

Lưu ý: Dữ liệu JSON là cặp khóa: giá trị được phân tách bằng dấu phẩy, trong đó khóa là một chuỗi và giá trị có thể là bất kỳ kiểu dữ liệu hợp lệ nào như string , number , boolean , mảng , đối tượng , null hoặc không xác định.

Để nhận giá trị từ đối tượng JSON được lưu trữ cục bộ, trước tiên, chúng tôi cần chuyển đổi nó thành đối tượng JSON dữ liệu JSON được lưu trữ ở định dạng chuỗi .

Ví dụ

  var data = `{
  "Nhân viên": {
    "name": "John",
    "tuổi": 30,
    "lương": 5000,
    "thành phố": "New York",
    "kỹ năng": ["JavaScript", "CSS", "HTML"]
  }
} ';
// kiểu dữ liệu hiện tại là chuỗi 'dữ liệu'
console.log (kiểu dữ liệu);

// chuyển đổi dữ liệu thành đối tượng JSON
var parsedData = JSON.parse (dữ liệu);
console.log (typeof parsedData);

// lấy giá trị từ đối tượng JSON trong JavaScript
console.log (parsedData.employee.name,
            parsedData.employee.age,
            parsedData.employee.skills);  

Đoạn mã trên nhận giá trị từ đối tượng JSON được lưu trữ cục bộ và sau đó in giá trị trong bảng điều khiển. Các bước mà chúng tôi đã làm theo là:

Xem Thêm  Các lớp tĩnh trong PHP: Hướng dẫn Liên hệ giữa chúng với các phương thức và thuộc tính - thuộc tính lớp tĩnh php

  1. Chuyển đổi dữ liệu JSON thành đối tượng JSON bằng cách sử dụng phương thức

    JSON.parse ()

    .

  2. Chuỗi JSON hiện đã được chuyển đổi thành đối tượng JSON.
  3. Nhận giá trị từ đối tượng JSON bằng cách sử dụng ký hiệu

    dot

    .

Vòng qua Đối tượng JSON

Ở trên, chúng tôi nhận các giá trị riêng lẻ từ đối tượng JSON. Nhưng chúng ta cũng có thể lấy tất cả các giá trị từ đối tượng JSON bằng cách sử dụng vòng lặp for-in.

Nó giống như lặp qua một đối tượng trong JavaScript .

Ví dụ

  var data = `{
  "Nhân viên": {
    "name": "John",
    "tuổi": 30,
    "lương": 5000,
    "thành phố": "New York",
    "kỹ năng": ["JavaScript", "CSS", "HTML"]
  }
} ';

// chuyển đổi dữ liệu thành đối tượng JSON
var parsedData = JSON.parse (dữ liệu);

// lặp qua đối tượng JSON
for (khóa var trong parsedData.employee) {
  console.log (key, parsedData.employee [key]);
}  

Đoạn mã trên nhận tất cả các giá trị từ đối tượng JSON và in chúng trong bảng điều khiển. Các bước mà chúng tôi đã làm theo là:

  1. Đã chuyển đổi dữ liệu JSON thành đối tượng JSON bằng cách sử dụng phương thức

    JSON.parse ()

    . Giờ đây, nó có thể được coi như một đối tượng JavaScript bình thường.

  2. Bây giờ, lặp qua đối tượng JSON bằng cách sử dụng

    vòng lặp for-in

    .

Nhận giá trị bằng cách sử dụng ký hiệu dấu ngoặc nhọn

Ở trên, chúng tôi đã truy cập giá trị từ đối tượng JSON bằng ký hiệu dấu chấm nhưng chúng tôi cũng có thể truy cập giá trị bằng ký hiệu dấu ngoặc.

Trong ký hiệu dấu ngoặc, bạn phải chuyển khóa của giá trị bạn muốn truy cập dưới dạng một chuỗi.

Đây là một ví dụ sử dụng ký hiệu ngoặc:

Ví dụ

  var data = `{
  "Nhân viên": {
    "name": "John",
    "tuổi": 30,
    "lương": 5000,
    "thành phố": "New York",
    "kỹ năng": ["JavaScript", "CSS", "HTML"]
  }
} ';

var parsedData = JSON.parse (dữ liệu);

console.log (parsedData.employee ["name"]);
console.log (parsedData.employee ["age"]);
console.log (parsedData.employee ["skills"]);  

Dữ liệu nhận được từ máy chủ

Dữ liệu JSON mà chúng tôi nhận được từ máy chủ ở dạng chuỗi. Vì vậy, để nhận các giá trị từ chuỗi dữ liệu này, trước tiên chúng ta cần chuyển đổi nó thành một đối tượng JSON.

Về cơ bản, không có quá trình nào khác mà chúng tôi sẽ thực hiện để nhận được giá trị. Một lần nữa ở đây chúng ta sẽ sử dụng phương thức JSON.parse () để chuyển đổi một chuỗi thành đối tượng JSON và sau đó sẽ truy cập giá trị.

Ví dụ

  // dữ liệu nhận được từ máy chủ
// '{"nhân viên": {"tên": "John", "tuổi": 30, "lương": 5000, "thành phố": "New York", "kỹ năng": ["JavaScript", "CSS" , "HTML"]}} ';

var data = JSON.parse ('{"worker": {"name": "John", "age": 30, "Lương": 5000, "city": "New York", "skills": ["JavaScript "," CSS "," HTML "]}} ');

// giá trị trao đổi
console.log (data.employee.name);
console.log (data.employee.age);
console.log (data.employee.skills);  

Nhận giá trị từ tệp JSON cục bộ

Để nhận giá trị, trước tiên chúng ta cần đọc tệp JSON cục bộ . Chúng ta có thể làm điều đó bằng cách sử dụng phương thức fetch ().

Chuyển URL của tệp JSON dưới dạng một chuỗi đến phương thức fetch (), nó sẽ trả về một lời hứa. Lời hứa sẽ giải quyết bằng dữ liệu JSON dưới dạng chuỗi.

Đây là một ví dụ hoạt động:

Ví dụ

  // lấy dữ liệu từ tệp JSON cục bộ
tìm nạp ('data.json')
  .then (response = & gt; response.json ())
  .then (data = & gt; {
    console.log (data.employee.name);
    console.log (data.employee.age);
    console.log (data.employee.salary);
  })  

▶ Hãy dùng thử

Bạn cũng có thể sử dụng phương pháp tương tự cho bất kỳ tệp JSON bên ngoài nào, chỉ cần chuyển URL http thích hợp.

 Ezoic

báo cáo quảng cáo này

< h2 class = "header2"> Kết luận

Đây là phần cuối của cách lấy giá trị từ đối tượng JSON trong JavaScript. Chúng tôi đã đề cập đến tất cả các cách mà bạn có thể sử dụng các tình huống trường hợp khác nhau. Chúng tôi cũng đã đề cập đến cách nhận giá trị từ các tệp JSON cục bộ.


Xem thêm những thông tin liên quan đến chủ đề lấy giá trị từ đối tượng json trong javascript

[JAVASCRIPT] – [4. JSON & LocalStorage] Bài 3: JSON

alt

  • Tác giả: IT Hieu
  • Ngày đăng: 2020-04-09
  • Đánh giá: 4 ⭐ ( 9261 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

JSON: JSON.stringify()

  • Tác giả: v1study.com
  • Đánh giá: 5 ⭐ ( 1088 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách sử dụng phổ biến của JSON là trao đổi dữ liệu đến/từ máy chủ web. Khi gửi dữ liệu đến máy chủ web, dữ liệu phải là một chuỗi. Chuyển đổi một đối tượ

for…of trong JavaScript và cách lấy giá trị từ đối tượng

  • Tác giả: laptrinhcanban.com
  • Đánh giá: 5 ⭐ ( 6863 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách sử dụng for…of trong JavaScript. Bạn sẽ học được cách dùng for…of để lấy giá trị từ iterable objects (các đối tượng có thể lặp lại) trong JavaScript, cũng như sự khác biệt giữa for…in v

Object JSON trong JavaScript

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

Hướng dẫn xử lý JSON trong JavaScript

  • Tác giả: openplanning.net
  • Đánh giá: 4 ⭐ ( 4956 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Bài 10: Đối tượng trong Javascript – Object – JSON

  • Tác giả: goclamweb.com
  • Đánh giá: 4 ⭐ ( 8869 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài học này, chúng ta sẽ tìm hiểu về đối tượng trong Javascript. Ngoài ra, chúng ta cũng tìm hiểu một chút về JSON – JavaScript Object Notation.

JSON trong Javascript

  • Tác giả: kungfutech.edu.vn
  • Đánh giá: 4 ⭐ ( 7282 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.

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

Xem Thêm  Tắt nút gửi trên Gửi biểu mẫu bằng JavaScript - cách tắt nút gửi trong javascript