Hướng dẫn javascript get value from json array by key - javascript nhận giá trị từ mảng json theo khóa

JSON, hoặc ký hiệu đối tượng JavaScript, là tất cả xung quanh chúng ta. Nếu bạn đã từng sử dụng một ứng dụng web, rất có thể nó đã sử dụng JSON để cấu trúc, lưu trữ và truyền dữ liệu giữa các máy chủ và thiết bị của bạn.

Trong bài viết này, chúng tôi sẽ xem xét ngắn gọn sự khác biệt giữa JSON và JavaScript, sau đó nhảy vào các cách khác nhau để phân tích JSON với JavaScript trong trình duyệt và trong các dự án Node.js.

Sự khác biệt giữa JSON và JavaScript

Mặc dù JSON trông giống như JavaScript thông thường, tốt hơn là nên nghĩ về JSON như một định dạng dữ liệu, tương tự như một tệp văn bản. Nó chỉ xảy ra rằng JSON được lấy cảm hứng từ cú pháp JavaScript, đó là lý do tại sao chúng trông rất giống nhau.

Chúng ta hãy xem các đối tượng JSON và mảng JSON và so sánh chúng với các đối tác JavaScript của họ.

Đối tượng JSON vs JavaScript đối tượng theo nghĩa đen

Đầu tiên, đây là đối tượng JSON:

Sự khác biệt chính giữa đối tượng JSON và đối tượng JavaScript thông thường - còn được gọi là một đối tượng theo nghĩa đen - đi xuống các dấu ngoặc kép. Tất cả các khóa và giá trị loại chuỗi trong một đối tượng JSON phải được bọc trong các dấu ngoặc kép (

{
  "name": "Jane Doe",
  "favorite-game": "Stardew Valley",
  "subscriber": false
}

Biểu nghĩa đối tượng JavaScript linh hoạt hơn một chút. Với các chữ cái đối tượng, bạn không cần phải bọc các phím và chuỗi trong các dấu ngoặc kép. Thay vào đó, bạn có thể sử dụng dấu ngoặc đơn (

{
  "name": "Jane Doe",
  "favorite-game": "Stardew Valley",
  "subscriber": false
}

Đây là những gì mã trên có thể trông như một đối tượng JavaScript theo nghĩa đen:

const profile = {
  name: 'Jane Doe',
  'favorite-game': 'Stardew Valley',
  subscriber: false
}

Lưu ý rằng khóa

const profile = {
  name: 'Jane Doe',
  'favorite-game': 'Stardew Valley',
  subscriber: false
}

const profile = {
  name: 'Jane Doe',
  'favorite-game': 'Stardew Valley',
  subscriber: false
}

Nếu bạn muốn tránh các dấu ngoặc kép, bạn có thể viết lại khóa để sử dụng vỏ lạc đà (

const profile = {
  name: 'Jane Doe',
  'favorite-game': 'Stardew Valley',
  subscriber: false
}

const profile = {
  name: 'Jane Doe',
  'favorite-game': 'Stardew Valley',
  subscriber: false
}

Mảng json vs mảng javascript

Các mảng JSON hoạt động khá giống với các mảng trong JavaScript và có thể chứa các chuỗi, booleans, số và các đối tượng JSON khác. Ví dụ:

[
  {
    "name": "Jane Doe",
    "favorite-game": "Stardew Valley",
    "subscriber": false
  },
  {
    "name": "John Doe",
    "favorite-game": "Dragon Quest XI",
    "subscriber": true
  }
]

Đây là những gì có thể trông như thế nào trong JavaScript đơn giản:

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

Json dưới dạng chuỗi

Bạn có thể tự hỏi, nếu có các đối tượng và mảng JSON, bạn không thể sử dụng nó trong chương trình của mình như một đối tượng JavaScript thông thường theo nghĩa đen hoặc mảng?

Lý do tại sao bạn không thể làm điều này là JSON thực sự chỉ là một chuỗi.

Ví dụ: khi bạn viết JSON vào một tệp riêng biệt như với

const profile = {
  name: 'Jane Doe',
  'favorite-game': 'Stardew Valley',
  subscriber: false
}

const profile = {
  name: 'Jane Doe',
  'favorite-game': 'Stardew Valley',
  subscriber: false
}

Và nếu bạn đưa ra yêu cầu cho API, nó sẽ trả về một cái gì đó như thế này:

{"name":"Jane Doe","favorite-game":"Stardew Valley","subscriber":false}

Cũng giống như với các tệp văn bản, nếu bạn muốn sử dụng JSON trong dự án của mình, bạn sẽ cần phân tích hoặc thay đổi nó thành thứ gì đó ngôn ngữ lập trình của bạn có thể hiểu. Chẳng hạn, phân tích cú pháp đối tượng JSON trong Python sẽ tạo ra một từ điển.

Với sự hiểu biết đó, chúng ta hãy xem xét các cách khác nhau để phân tích JSON trong JavaScript.

Cách phân tích cú pháp JSON trong trình duyệt

Nếu bạn đang làm việc với JSON trong trình duyệt, có lẽ bạn đang nhận hoặc gửi dữ liệu qua API.

Hãy xem một vài ví dụ.

Cách phân tích cú pháp JSON với const profile = { name: 'Jane Doe', 'favorite-game': 'Stardew Valley', subscriber: false } 6

Cách dễ nhất để lấy dữ liệu từ API là với

const profile = {
  name: 'Jane Doe',
  'favorite-game': 'Stardew Valley',
  subscriber: false
}

const profile = {
  name: 'Jane Doe',
  'favorite-game': 'Stardew Valley',
  subscriber: false
}

Dưới đây là một số mã sử dụng

const profile = {
  name: 'Jane Doe',
  'favorite-game': 'Stardew Valley',
  subscriber: false
}

[
  {
    "name": "Jane Doe",
    "favorite-game": "Stardew Valley",
    "subscriber": false
  },
  {
    "name": "John Doe",
    "favorite-game": "Dragon Quest XI",
    "subscriber": true
  }
]

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal
  .then(data => console.log(data));

Nếu bạn chạy mã đó trong trình duyệt, bạn sẽ thấy một cái gì đó như thế này đã đăng nhập vào bảng điều khiển:

{
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
}

Mặc dù nó trông giống như một đối tượng JSON, nhưng nó thực sự là một đối tượng JavaScript theo nghĩa đen và bạn có thể sử dụng nó một cách tự do trong chương trình của mình.

Cách xâu chuỗi JSON với [ { "name": "Jane Doe", "favorite-game": "Stardew Valley", "subscriber": false }, { "name": "John Doe", "favorite-game": "Dragon Quest XI", "subscriber": true } ] 1

Nhưng nếu bạn muốn gửi dữ liệu đến API thì sao?

Chẳng hạn, giả sử bạn muốn gửi một trò đùa Chuck Norris cho API Chuck Norris để người khác có thể đọc nó sau.

Đầu tiên, bạn sẽ viết trò đùa của mình như một đối tượng JS theo nghĩa đen:

(function() {
  
  var array = [
    {
      amount: 12185,
      job: "GAPA",
      month: "JANUARY",
      year: "2010"
    },
    {
      amount: 147421,
      job: "GAPA",
      month: "MAY",
      year: "2010"
    },
    {
      amount: 2347,
      job: "GAPA",
      month: "AUGUST",
      year: "2010"
    }
  ];
  
  var entry;
  var name;
  var count;
  
  entry = array[0];
  
  display("Keys for entry 0:");
  count = 0;
  for (name in entry) {
    display(name);
    ++count;
  }
  display("Total enumerable keys: " + count);

  // === Basic utility functions
  
  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = msg;
    document.body.appendChild(p);
  }
  
})();

Sau đó, vì bạn đang gửi dữ liệu đến API, bạn cần phải biến đối tượng

[
  {
    "name": "Jane Doe",
    "favorite-game": "Stardew Valley",
    "subscriber": false
  },
  {
    "name": "John Doe",
    "favorite-game": "Dragon Quest XI",
    "subscriber": true
  }
]

May mắn thay, JavaScript bao gồm một phương pháp siêu hữu ích để làm điều đó -

[
  {
    "name": "Jane Doe",
    "favorite-game": "Stardew Valley",
    "subscriber": false
  },
  {
    "name": "John Doe",
    "favorite-game": "Dragon Quest XI",
    "subscriber": true
  }
]

(function() {
  
  var array = [
    {
      amount: 12185,
      job: "GAPA",
      month: "JANUARY",
      year: "2010"
    },
    {
      amount: 147421,
      job: "GAPA",
      month: "MAY",
      year: "2010"
    },
    {
      amount: 2347,
      job: "GAPA",
      month: "AUGUST",
      year: "2010"
    }
  ];
  
  var entry;
  var name;
  var count;
  
  entry = array[0];
  
  display("Keys for entry 0:");
  count = 0;
  for (name in entry) {
    display(name);
    ++count;
  }
  display("Total enumerable keys: " + count);

  // === Basic utility functions
  
  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = msg;
    document.body.appendChild(p);
  }
  
})();

Mặc dù chúng tôi đang chuyển đổi một đối tượng theo nghĩa đen thành chuỗi JSON trong ví dụ này,

[
  {
    "name": "Jane Doe",
    "favorite-game": "Stardew Valley",
    "subscriber": false
  },
  {
    "name": "John Doe",
    "favorite-game": "Dragon Quest XI",
    "subscriber": true
  }
]

Cuối cùng, bạn chỉ cần gửi trò đùa JSON Stringified của mình đến API với yêu cầu

[
  {
    "name": "Jane Doe",
    "favorite-game": "Stardew Valley",
    "subscriber": false
  },
  {
    "name": "John Doe",
    "favorite-game": "Dragon Quest XI",
    "subscriber": true
  }
]

Lưu ý rằng API cười Chuck Norris không thực sự có tính năng này. Nhưng nếu nó đã làm, đây là những gì mã có thể trông như thế nào:

(function() {
  
  var array = [
    {
      amount: 12185,
      job: "GAPA",
      month: "JANUARY",
      year: "2010"
    },
    {
      amount: 147421,
      job: "GAPA",
      month: "MAY",
      year: "2010"
    },
    {
      amount: 2347,
      job: "GAPA",
      month: "AUGUST",
      year: "2010"
    }
  ];
  
  var entry;
  var name;
  var count;
  
  entry = array[0];
  
  display("Keys for entry 0:");
  count = 0;
  for (name in entry) {
    display(name);
    ++count;
  }
  display("Total enumerable keys: " + count);

  // === Basic utility functions
  
  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = msg;
    document.body.appendChild(p);
  }
  
})();

Và chỉ như vậy, bạn đã phân tích cú pháp JSON đến với

const profile = {
  name: 'Jane Doe',
  'favorite-game': 'Stardew Valley',
  subscriber: false
}

[
  {
    "name": "Jane Doe",
    "favorite-game": "Stardew Valley",
    "subscriber": false
  },
  {
    "name": "John Doe",
    "favorite-game": "Dragon Quest XI",
    "subscriber": true
  }
]

Cách làm việc với các tệp JSON cục bộ trong trình duyệt

Thật không may, không thể (hoặc khuyến khích) tải tệp JSON cục bộ trong trình duyệt.

const profile = {
  name: 'Jane Doe',
  'favorite-game': 'Stardew Valley',
  subscriber: false
}

(function() {
  
  var array = [
    {
      amount: 12185,
      job: "GAPA",
      month: "JANUARY",
      year: "2010"
    },
    {
      amount: 147421,
      job: "GAPA",
      month: "MAY",
      year: "2010"
    },
    {
      amount: 2347,
      job: "GAPA",
      month: "AUGUST",
      year: "2010"
    }
  ];
  
  var entry;
  var name;
  var count;
  
  entry = array[0];
  
  display("Keys for entry 0:");
  count = 0;
  for (name in entry) {
    display(name);
    ++count;
  }
  display("Total enumerable keys: " + count);

  // === Basic utility functions
  
  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = msg;
    document.body.appendChild(p);
  }
  
})();

Và bạn muốn phân tích nó và tạo một danh sách các trò đùa trên một trang HTML đơn giản.

Nếu bạn tạo một trang với phần sau và mở nó trong trình duyệt của bạn:

(function() {
  
  var array = [
    {
      amount: 12185,
      job: "GAPA",
      month: "JANUARY",
      year: "2010"
    },
    {
      amount: 147421,
      job: "GAPA",
      month: "MAY",
      year: "2010"
    },
    {
      amount: 2347,
      job: "GAPA",
      month: "AUGUST",
      year: "2010"
    }
  ];
  
  var entry;
  var name;
  var count;
  
  entry = array[0];
  
  display("Keys for entry 0:");
  count = 0;
  for (name in entry) {
    display(name);
    ++count;
  }
  display("Total enumerable keys: " + count);

  // === Basic utility functions
  
  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = msg;
    document.body.appendChild(p);
  }
  
})();

Bạn sẽ thấy điều này trong bảng điều khiển:

(function() {
  
  var array = [
    {
      amount: 12185,
      job: "GAPA",
      month: "JANUARY",
      year: "2010"
    },
    {
      amount: 147421,
      job: "GAPA",
      month: "MAY",
      year: "2010"
    },
    {
      amount: 2347,
      job: "GAPA",
      month: "AUGUST",
      year: "2010"
    }
  ];
  
  var entry;
  var name;
  var count;
  
  entry = array[0];
  
  display("Keys for entry 0:");
  count = 0;
  for (name in entry) {
    display(name);
    ++count;
  }
  display("Total enumerable keys: " + count);

  // === Basic utility functions
  
  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = msg;
    document.body.appendChild(p);
  }
  
})();

Theo mặc định, các trình duyệt không cho phép truy cập vào các tệp cục bộ vì lý do bảo mật. Đây là một điều tốt, và bạn không nên cố gắng làm việc xung quanh hành vi này.

Thay vào đó, điều tốt nhất để làm là chuyển đổi tệp JSON cục bộ thành JavaScript. May mắn thay, điều này khá dễ dàng vì cú pháp JSON rất giống với JavaScript.

Tất cả những gì bạn cần làm là tạo một tệp mới và khai báo JSON của bạn là một biến:

(function() {
  
  var array = [
    {
      amount: 12185,
      job: "GAPA",
      month: "JANUARY",
      year: "2010"
    },
    {
      amount: 147421,
      job: "GAPA",
      month: "MAY",
      year: "2010"
    },
    {
      amount: 2347,
      job: "GAPA",
      month: "AUGUST",
      year: "2010"
    }
  ];
  
  var entry;
  var name;
  var count;
  
  entry = array[0];
  
  display("Keys for entry 0:");
  count = 0;
  for (name in entry) {
    display(name);
    ++count;
  }
  display("Total enumerable keys: " + count);

  // === Basic utility functions
  
  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = msg;
    document.body.appendChild(p);
  }
  
})();

Và thêm nó vào trang của bạn dưới dạng tập lệnh riêng biệt:

(function() {
  
  var array = [
    {
      amount: 12185,
      job: "GAPA",
      month: "JANUARY",
      year: "2010"
    },
    {
      amount: 147421,
      job: "GAPA",
      month: "MAY",
      year: "2010"
    },
    {
      amount: 2347,
      job: "GAPA",
      month: "AUGUST",
      year: "2010"
    }
  ];
  
  var entry;
  var name;
  var count;
  
  entry = array[0];
  
  display("Keys for entry 0:");
  count = 0;
  for (name in entry) {
    display(name);
    ++count;
  }
  display("Total enumerable keys: " + count);

  // === Basic utility functions
  
  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = msg;
    document.body.appendChild(p);
  }
  
})();

Bạn sẽ có thể sử dụng mảng

[
  {
    "name": "Jane Doe",
    "favorite-game": "Stardew Valley",
    "subscriber": false
  },
  {
    "name": "John Doe",
    "favorite-game": "Dragon Quest XI",
    "subscriber": true
  }
]

Bạn cũng có thể sử dụng JavaScript

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

Nhưng điều gì sẽ xảy ra nếu bạn muốn làm việc với các tệp JSON cục bộ và cài đặt Node.js? Hãy xem cách làm điều đó ngay bây giờ.

Cách phân tích cú pháp JSON trong Node.js

Node.js là thời gian chạy JavaScript cho phép bạn chạy JavaScript bên ngoài trình duyệt. Bạn có thể đọc tất cả về Node.js ở đây.

Cho dù bạn sử dụng Node.js để chạy mã cục bộ trên máy tính của bạn hoặc để chạy toàn bộ ứng dụng web trên máy chủ, thật tốt khi biết cách làm việc với JSON.

Đối với các ví dụ sau, chúng tôi sẽ sử dụng cùng một tệp

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

(function() {
  
  var array = [
    {
      amount: 12185,
      job: "GAPA",
      month: "JANUARY",
      year: "2010"
    },
    {
      amount: 147421,
      job: "GAPA",
      month: "MAY",
      year: "2010"
    },
    {
      amount: 2347,
      job: "GAPA",
      month: "AUGUST",
      year: "2010"
    }
  ];
  
  var entry;
  var name;
  var count;
  
  entry = array[0];
  
  display("Keys for entry 0:");
  count = 0;
  for (name in entry) {
    display(name);
    ++count;
  }
  display("Total enumerable keys: " + count);

  // === Basic utility functions
  
  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = msg;
    document.body.appendChild(p);
  }
  
})();

Cách phân tích tệp JSON với const profiles = [ { name: 'Jane Doe', 'favorite-game': 'Stardew Valley', subscriber: false }, { name: 'John Doe', 'favorite-game': 'Dragon Quest XI', subscriber: true } ]; 2

Hãy bắt đầu với phương pháp dễ nhất.

Nếu bạn có tệp JSON cục bộ, tất cả những gì bạn cần làm là sử dụng

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

(function() {
  
  var array = [
    {
      amount: 12185,
      job: "GAPA",
      month: "JANUARY",
      year: "2010"
    },
    {
      amount: 147421,
      job: "GAPA",
      month: "MAY",
      year: "2010"
    },
    {
      amount: 2347,
      job: "GAPA",
      month: "AUGUST",
      year: "2010"
    }
  ];
  
  var entry;
  var name;
  var count;
  
  entry = array[0];
  
  display("Keys for entry 0:");
  count = 0;
  for (name in entry) {
    display(name);
    ++count;
  }
  display("Total enumerable keys: " + count);

  // === Basic utility functions
  
  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = msg;
    document.body.appendChild(p);
  }
  
})();

Tệp JSON sẽ tự động phân tích cú pháp cho bạn và bạn có thể bắt đầu sử dụng nó trong dự án của mình:

for (name in entry) {
  if (entry.hasOwnProperty(name)) {
    display(name);
    ++count;
  }
}

Lưu ý rằng đây là đồng bộ, có nghĩa là chương trình của bạn sẽ dừng cho đến khi nó phân tích toàn bộ tệp trước khi tiếp tục. Các tệp JSON thực sự lớn có thể khiến chương trình của bạn chậm lại, vì vậy hãy cẩn thận với điều đó.

Ngoài ra, vì phân tích cú pháp JSON theo cách này tải toàn bộ vào bộ nhớ, nên tốt hơn là sử dụng phương pháp này cho các tệp JSON tĩnh. Nếu tệp JSON thay đổi trong khi chương trình của bạn đang chạy, bạn sẽ không có quyền truy cập vào các thay đổi đó cho đến khi bạn khởi động lại chương trình của mình và phân tích tệp JSON được cập nhật.

Cách phân tích tệp JSON với const profiles = [ { name: 'Jane Doe', 'favorite-game': 'Stardew Valley', subscriber: false }, { name: 'John Doe', 'favorite-game': 'Dragon Quest XI', subscriber: true } ]; 4) và const profiles = [ { name: 'Jane Doe', 'favorite-game': 'Stardew Valley', subscriber: false }, { name: 'John Doe', 'favorite-game': 'Dragon Quest XI', subscriber: true } ]; 5

Đây là cách truyền thống hơn (vì thiếu thuật ngữ tốt hơn) để phân tích các tệp JSON trong các dự án Node.js - đọc tệp với mô -đun

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

Hãy xem làm thế nào để làm điều này với phương pháp

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

for (name in entry) {
  if (entry.hasOwnProperty(name)) {
    display(name);
    ++count;
  }
}

Sau đó, tạo một biến mới để lưu trữ đầu ra của tệp

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

for (name in entry) {
  if (entry.hasOwnProperty(name)) {
    display(name);
    ++count;
  }
}

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

for (name in entry) {
  if (entry.hasOwnProperty(name)) {
    display(name);
    ++count;
  }
}

Nhưng nếu bạn đăng nhập

{"name":"Jane Doe","favorite-game":"Stardew Valley","subscriber":false}

for (name in entry) {
  if (entry.hasOwnProperty(name)) {
    display(name);
    ++count;
  }
}

Điều đó chỉ có nghĩa là mô-đun

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

Đối với các tệp dựa trên văn bản, mã hóa thường là

{"name":"Jane Doe","favorite-game":"Stardew Valley","subscriber":false}

for (name in entry) {
  if (entry.hasOwnProperty(name)) {
    display(name);
    ++count;
  }
}

Bây giờ nếu bạn đăng nhập

{"name":"Jane Doe","favorite-game":"Stardew Valley","subscriber":false}

Nhưng cho đến nay chúng tôi chỉ đọc tệp và nó vẫn là một chuỗi. Chúng ta sẽ cần sử dụng một phương pháp khác để phân tích

{"name":"Jane Doe","favorite-game":"Stardew Valley","subscriber":false}

Để làm điều đó, chúng tôi sẽ sử dụng

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

for (name in entry) {
  if (entry.hasOwnProperty(name)) {
    display(name);
    ++count;
  }
}

Như tên cho thấy,

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

Giống như với phương pháp

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal
  .then(data => console.log(data));

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

Ngoài ra, nó chỉ đọc tệp một lần và tải nó vào bộ nhớ. Nếu tệp thay đổi, bạn sẽ cần đọc lại tệp tại một số điểm. Để làm cho mọi thứ dễ dàng hơn, bạn có thể muốn tạo một chức năng đơn giản để đọc các tệp.

Đây là những gì có thể trông như thế nào:

for (name in entry) {
  if (entry.hasOwnProperty(name)) {
    display(name);
    ++count;
  }
}

Cách phân tích cú pháp JSON với fetch('https://api.chucknorris.io/jokes/random?category=dev') .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal .then(data => console.log(data)); 3) và const profiles = [ { name: 'Jane Doe', 'favorite-game': 'Stardew Valley', subscriber: false }, { name: 'John Doe', 'favorite-game': 'Dragon Quest XI', subscriber: true } ]; 5

Phương pháp

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal
  .then(data => console.log(data));

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

Đây là một ví dụ cơ bản:

for (name in entry) {
  if (entry.hasOwnProperty(name)) {
    display(name);
    ++count;
  }
}

Cho đến nay, điều này trông tương tự như những gì chúng tôi đã làm với

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

{"name":"Jane Doe","favorite-game":"Stardew Valley","subscriber":false}

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal
  .then(data => console.log(data));

Thay vào đó, chúng tôi sẽ sử dụng chức năng gọi lại và phân tích JSON bên trong nó:

for (name in entry) {
  if (entry.hasOwnProperty(name)) {
    display(name);
    ++count;
  }
}

Mà in như sau cho bảng điều khiển:

{
  "name": "Jane Doe",
  "favorite-game": "Stardew Valley",
  "subscriber": false
}

Giống như với

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal
  .then(data => console.log(data));

Ngoài ra, mặc dù

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal
  .then(data => console.log(data));

Cách xâu chuỗi JSON với [ { "name": "Jane Doe", "favorite-game": "Stardew Valley", "subscriber": false }, { "name": "John Doe", "favorite-game": "Dragon Quest XI", "subscriber": true } ] 1 trong Node.js

Cuối cùng, nếu bạn đang phân tích JSON với Node.js, rất có thể bạn sẽ cần trả lại JSON tại một số điểm, có thể là phản hồi API.

May mắn thay, điều này hoạt động giống như trong trình duyệt - chỉ cần sử dụng

[
  {
    "name": "Jane Doe",
    "favorite-game": "Stardew Valley",
    "subscriber": false
  },
  {
    "name": "John Doe",
    "favorite-game": "Dragon Quest XI",
    "subscriber": true
  }
]

{
  "name": "Jane Doe",
  "favorite-game": "Stardew Valley",
  "subscriber": false
}

Và đó là nó! Chúng tôi đã đề cập đến mọi thứ bạn cần biết về việc làm việc với JSON trong các dự án trình duyệt và trong Node.js.

Bây giờ hãy ra khỏi đó và phân tích hoặc xâu chuỗi JSON cho nội dung trái tim của bạn.

Tôi đã bỏ lỡ điều gì đó? Làm thế nào để bạn phân tích JSON trong các dự án của bạn? Hãy cho tôi biết trên Twitter.