Hướng dẫn get data from json object in javascript - lấy dữ liệu từ đối tượng json trong javascript

Việc sử dụng JSON phổ biến là trao đổi dữ liệu thành/từ máy chủ web.

Khi nhận dữ liệu từ một máy chủ web, dữ liệu luôn là một chuỗi.

Phân tích dữ liệu với JSON.parse() và dữ liệu trở thành đối tượng JavaScript.

Ví dụ - Phân tích cú pháp JSON

Hãy tưởng tượng chúng tôi đã nhận được văn bản này từ một máy chủ web:

'{"Tên": "John", "Tuổi": 30, "Thành phố": "New York"}'

Sử dụng chức năng JavaScript JSON.parse() để chuyển đổi văn bản thành đối tượng JavaScript:

const obj = json.parse ('{"name": "john", "tuổi": 30, "thành phố": "new york"}');

Hãy chắc chắn rằng văn bản ở định dạng JSON, nếu không bạn sẽ gặp lỗi cú pháp.

Sử dụng đối tượng JavaScript trong trang của bạn:

Thí dụ

document.getEuityById ("demo"). Internhtml = obj.Name;
document.getElementById("demo").innerHTML = obj.name;

Hãy tự mình thử »

Mảng là json

Khi sử dụng JSON.parse() trên JSON có nguồn gốc từ một mảng, phương thức sẽ trả về một mảng JavaScript, thay vì đối tượng JavaScript.

Thí dụ

const text = '["Ford", "BMW", "Audi", "Fiat"]';
const myArr = JSON.parse(text);

Hãy tự mình thử »

Mảng là json

Khi sử dụng JSON.parse() trên JSON có nguồn gốc từ một mảng, phương thức sẽ trả về một mảng JavaScript, thay vì đối tượng JavaScript.

const text = '["ford", "bmw", "audi", "fiat"]'; const myarr = json.parse (văn bản);

Ngoại lệ

Ngày phân tích cú pháp

Thí dụ

Convert a string into a date:

document.getEuityById ("demo"). Internhtml = obj.Name;
const obj = JSON.parse(text);
obj.birth = new Date(obj.birth);

Hãy tự mình thử »

Hãy tự mình thử »

Mảng là json

Khi sử dụng JSON.parse() trên JSON có nguồn gốc từ một mảng, phương thức sẽ trả về một mảng JavaScript, thay vì đối tượng JavaScript.

Thí dụ

Convert a string into a date, using the reviver function:

document.getEuityById ("demo"). Internhtml = obj.Name;
const obj = JSON.parse(text, function (key, value) {
  if (key == "birth") {
    return new Date(value);
  } else {
    return value;
  }
});

Hãy tự mình thử »

Hãy tự mình thử »

Mảng là json

Khi sử dụng JSON.parse() trên JSON có nguồn gốc từ một mảng, phương thức sẽ trả về một mảng JavaScript, thay vì đối tượng JavaScript.

const text = '["ford", "bmw", "audi", "fiat"]'; const myarr = json.parse (văn bản);

Ngoại lệ

Thí dụ

Convert a string into a function:

document.getEuityById ("demo"). Internhtml = obj.Name;
const obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");

Hãy tự mình thử »

Hãy tự mình thử »

Mảng là json

Làm thế nào lấy dữ liệu JSON từ tìm nạp?

Để lấy JSON từ máy chủ bằng API tìm nạp, bạn có thể sử dụng phương thức Phản hồi.json (). Phản hồi. Phương thức JSON () đọc dữ liệu được máy chủ trả về và trả về một lời hứa giải quyết với một đối tượng JSON.

Làm cách nào để hiển thị một đối tượng JSON?JavaScript Object Notation. JSON is extremely lightweight data-interchange format for data exchange between server and client which is quick and easy to parse and generate.

Tuyên bố một đối tượng JSON và lưu trữ nó vào biến. Sử dụng phương thức JSON.Stringify (OBJ) để chuyển đổi các đối tượng JavaScript thành chuỗi và hiển thị nó.

• Trong hướng dẫn này, bạn sẽ tìm hiểu cách mã hóa và giải mã dữ liệu JSON trong JavaScript. This is defined as an unordered collection of key/value pairs (i.e.

  {
      "fruits": [
          "Apple",
          "Banana",
          "Strawberry",
          "Mango"
      ]
  }

  2). Each object begins with a left curly bracket

  {
      "fruits": [
          "Apple",
          "Banana",
          "Strawberry",
          "Mango"
      ]
  }

  3 and ends with a right curly bracket

  {
      "fruits": [
          "Apple",
          "Banana",
          "Strawberry",
          "Mango"
      ]
  }

  4. Multiple key/value pairs are separated by a comma

  {
      "fruits": [
          "Apple",
          "Banana",
          "Strawberry",
          "Mango"
      ]
  }

  5.
• Mảng: Điều này được định nghĩa là một danh sách các giá trị được đặt hàng. Một mảng bắt đầu bằng một khung bên trái

  {
      "fruits": [
          "Apple",
          "Banana",
          "Strawberry",
          "Mango"
      ]
  }

  6 và kết thúc bằng một khung bên phải

  {
      "fruits": [
          "Apple",
          "Banana",
          "Strawberry",
          "Mango"
      ]
  }

  7. Các giá trị được phân tách bằng dấu phẩy

  {
      "fruits": [
          "Apple",
          "Banana",
          "Strawberry",
          "Mango"
      ]
  }

  5. This is defined as an ordered list of values. An array begins with a left bracket

  {
      "fruits": [
          "Apple",
          "Banana",
          "Strawberry",
          "Mango"
      ]
  }

  6 and ends with a right bracket

  {
      "fruits": [
          "Apple",
          "Banana",
          "Strawberry",
          "Mango"
      ]
  }

  7. Values are separated by a comma

  {
      "fruits": [
          "Apple",
          "Banana",
          "Strawberry",
          "Mango"
      ]
  }

  5.

Trong JSON, tên hoặc khóa thuộc tính luôn là chuỗi, trong khi giá trị có thể là

{
    "fruits": [
        "Apple",
        "Banana",
        "Strawberry",
        "Mango"
    ]
}

{"name": "Peter", "age": 22, "country": "United States"}

{"name": "Peter", "age": 22, "country": "United States"}

{"name": "Peter", "age": 22, "country": "United States"}

{"name": "Peter", "age": 22, "country": "United States"}

{"name": "Peter", "age": 22, "country": "United States"}

{"name": "Peter", "age": 22, "country": "United States"}

{"name": "Peter", "age": 22, "country": "United States"}

{"name": "Peter", "age": 22, "country": "United States"}

{"name": "Peter", "age": 22, "country": "United States"}

{"name": "Peter", "age": 22, "country": "United States"}

{
    "book": {
        "name": "Harry Potter and the Goblet of Fire",
        "author": "J. K. Rowling",
        "year": 2000,
        "genre": "Fantasy Fiction",
        "bestseller": true
    }
}

Trong khi đó một ví dụ về mảng JSON sẽ trông giống như thế này:

{
    "fruits": [
        "Apple",
        "Banana",
        "Strawberry",
        "Mango"
    ]
}

Mẹo: Định dạng-Interchange là một định dạng văn bản được sử dụng để trao đổi hoặc trao đổi dữ liệu giữa các nền tảng và hệ điều hành khác nhau. JSON là định dạng-Interchange dữ liệu phổ biến và nhẹ nhất cho các ứng dụng web. A data-interchange format is a text format which is used to interchange or exchange data between different platforms and operating systems. JSON is the most popular and lightweight data-interchange format for web applications.

Phân tích dữ liệu JSON trong JavaScript

Trong JavaScript, bạn có thể dễ dàng phân tích dữ liệu JSON nhận được từ máy chủ web bằng phương thức JSON.parse(). Phương thức này phân tích chuỗi JSON và xây dựng giá trị JavaScript hoặc đối tượng được mô tả bởi chuỗi. Nếu chuỗi đã cho không hợp lệ JSON, bạn sẽ gặp lỗi cú pháp.

Giả sử chúng ta đã nhận được chuỗi được mã hóa JSON sau đây từ một máy chủ web:

{"name": "Peter", "age": 22, "country": "United States"}

Bây giờ, chúng ta chỉ có thể sử dụng phương thức JavaScript JSON.parse() để chuyển đổi chuỗi JSON này thành đối tượng JavaScript và truy cập các giá trị riêng lẻ bằng ký hiệu chấm (

// Store JSON data in a JS variable
var json = '{"name": "Peter", "age": 22, "country": "United States"}';

// Converting JSON-encoded string to JS object
var obj = JSON.parse(json);

// Accessing individual value from JS object
alert(obj.name); // Outputs: Peter
alert(obj.age); // Outputs: 22
alert(obj.country); // Outputs: United States

// Store JSON data in a JS variable
var json = '{"name": "Peter", "age": 22, "country": "United States"}';

// Converting JSON-encoded string to JS object
var obj = JSON.parse(json);

// Accessing individual value from JS object
alert(obj.name); // Outputs: Peter
alert(obj.age); // Outputs: 22
alert(obj.country); // Outputs: United States

Vui lòng kiểm tra hướng dẫn về phân tích cú pháp PHP JSON để tìm hiểu, cách trả về dữ liệu JSON từ máy chủ web để đáp ứng, cũng như, cách mã hóa/giải mã dữ liệu JSON ở phía máy chủ bằng PHP.

Phân tích dữ liệu JSON lồng nhau trong JavaScript

Đối tượng và mảng JSON cũng có thể được lồng nhau. Một đối tượng JSON có thể tùy ý chứa các đối tượng JSON, mảng khác, mảng lồng nhau, mảng các đối tượng JSON, v.v. Ví dụ sau đây sẽ chỉ cho bạn cách phân tích đối tượng JSON lồng nhau và trích xuất tất cả các giá trị trong JavaScript.

/* Storing multi-line JSON string in a JS variable
using the new ES6 template literals */
var json = `{
    "book": {
        "name": "Harry Potter and the Goblet of Fire",
        "author": "J. K. Rowling",
        "year": 2000,
        "characters": ["Harry Potter", "Hermione Granger", "Ron Weasley"],
        "genre": "Fantasy Fiction",
        "price": {
            "paperback": "$10.40", "hardcover": "$20.32", "kindle": "$4.11"
        }
    }
}`;

// Converting JSON object to JS object
var obj = JSON.parse(json);

// Define recursive function to print nested values
function printValues(obj) {
    for(var k in obj) {
        if(obj[k] instanceof Object) {
            printValues(obj[k]);
        } else {
            document.write(obj[k] + "<br>");
        };
    }
};

// Printing all the values from the resulting object
printValues(obj);

document.write("<hr>");

// Printing a single value
document.write(obj["book"]["author"] + "<br>");  // Prints: J. K. Rowling
document.write(obj["book"]["characters"][0] + "<br>");  // Prints: Harry Potter
document.write(obj["book"]["price"]["hardcover"]);  // Prints: $20.32

Mã hóa dữ liệu dưới dạng JSON trong JavaScript

Đôi khi đối tượng hoặc giá trị JavaScript từ mã của bạn cần được chuyển sang máy chủ trong quá trình giao tiếp AJAX. JavaScript cung cấp phương thức

// Store JSON data in a JS variable
var json = '{"name": "Peter", "age": 22, "country": "United States"}';

// Converting JSON-encoded string to JS object
var obj = JSON.parse(json);

// Accessing individual value from JS object
alert(obj.name); // Outputs: Peter
alert(obj.age); // Outputs: 22
alert(obj.country); // Outputs: United States

Chuỗi một đối tượng JavaScript

Ví dụ sau đây sẽ chỉ cho bạn cách chuyển đổi đối tượng JavaScript sang chuỗi JSON:

// Sample JS object
var obj = {"name": "Peter", "age": 22, "country": "United States"};

// Converting JS object to JSON string
var json = JSON.stringify(obj);
alert(json);

Đầu ra của ví dụ trên sẽ trông giống như thế này:

{"Tên": "Peter", "Age": 22, "Quốc gia": "Hoa Kỳ"}

Lưu ý: Mặc dù, các đối tượng JavaScript và JSON trông khá giống nhau, nhưng chúng không chính xác giống nhau. Ví dụ: trong JavaScript, tên thuộc tính đối tượng có thể được đặt trong các trích dẫn đơn (

// Store JSON data in a JS variable
var json = '{"name": "Peter", "age": 22, "country": "United States"}';

// Converting JSON-encoded string to JS object
var obj = JSON.parse(json);

// Accessing individual value from JS object
alert(obj.name); // Outputs: Peter
alert(obj.age); // Outputs: 22
alert(obj.country); // Outputs: United States

// Store JSON data in a JS variable
var json = '{"name": "Peter", "age": 22, "country": "United States"}';

// Converting JSON-encoded string to JS object
var obj = JSON.parse(json);

// Accessing individual value from JS object
alert(obj.name); // Outputs: Peter
alert(obj.age); // Outputs: 22
alert(obj.country); // Outputs: United States

// Store JSON data in a JS variable
var json = '{"name": "Peter", "age": 22, "country": "United States"}';

// Converting JSON-encoded string to JS object
var obj = JSON.parse(json);

// Accessing individual value from JS object
alert(obj.name); // Outputs: Peter
alert(obj.age); // Outputs: 22
alert(obj.country); // Outputs: United States

// Store JSON data in a JS variable
var json = '{"name": "Peter", "age": 22, "country": "United States"}';

// Converting JSON-encoded string to JS object
var obj = JSON.parse(json);

// Accessing individual value from JS object
alert(obj.name); // Outputs: Peter
alert(obj.age); // Outputs: 22
alert(obj.country); // Outputs: United States

Chuỗi một mảng javascript

Tương tự, bạn có thể chuyển đổi các mảng JavaScript thành chuỗi JSON, như thế này:

// Sample JS array
var arr = ["Apple", "Banana", "Mango", "Orange", "Papaya"];

// Converting JS array to JSON string
var json = JSON.stringify(arr);
alert(json);

Đầu ra của ví dụ trên sẽ trông giống như thế này:

{"Tên": "Peter", "Age": 22, "Quốc gia": "Hoa Kỳ"}

Lưu ý: Mặc dù, các đối tượng JavaScript và JSON trông khá giống nhau, nhưng chúng không chính xác giống nhau. Ví dụ: trong JavaScript, tên thuộc tính đối tượng có thể được đặt trong các trích dẫn đơn (

// Store JSON data in a JS variable
var json = '{"name": "Peter", "age": 22, "country": "United States"}';

// Converting JSON-encoded string to JS object
var obj = JSON.parse(json);

// Accessing individual value from JS object
alert(obj.name); // Outputs: Peter
alert(obj.age); // Outputs: 22
alert(obj.country); // Outputs: United States

// Store JSON data in a JS variable
var json = '{"name": "Peter", "age": 22, "country": "United States"}';

// Converting JSON-encoded string to JS object
var obj = JSON.parse(json);

// Accessing individual value from JS object
alert(obj.name); // Outputs: Peter
alert(obj.age); // Outputs: 22
alert(obj.country); // Outputs: United States

{
    "fruits": [
        "Apple",
        "Banana",
        "Strawberry",
        "Mango"
    ]
}

{
    "fruits": [
        "Apple",
        "Banana",
        "Strawberry",
        "Mango"
    ]
}

Làm thế nào chúng ta có thể truy cập các giá trị từ đối tượng JSON?

Làm thế nào để bạn phân tích một đối tượng trong JavaScript?

Làm thế nào lấy dữ liệu JSON từ tìm nạp?

Làm cách nào để hiển thị một đối tượng JSON?