從 JavaScript 中的 JSON 物件獲取值

Anika Tabassum Era 2023年1月30日 2022年5月5日
  1. 在 JavaScript 中使用 JSON.parse() 方法解析 JSON 物件
  2. 在 JavaScript 中編碼 JSON 物件
從 JavaScript 中的 JSON 物件獲取值

從 Web 伺服器接收資料時,格式為 JSON(Web 應用程式的資料交換格式)。該格式以 key:value 對形式預覽資料,並以 {}(對於物件)或 [](對於陣列)開頭和結尾。鍵總是傾向於是字串,值也可以是字串和其他資料型別。

本文將介紹如何在 JavaScript 中從 JSON 物件中獲取值。

在 JavaScript 中使用 JSON.parse() 方法解析 JSON 物件

讓我們將以下 JSON 物件視為接收到的資料。

注意
JSON 解析不支援單引號
{
"employee": {
    "name": "Roy Mustang",
	"age": 35,
	"favoriteColor": ["Blue", "Black", "Purple"],
	"siblings": {
		"Liza": 20, "Emily": 12
		}
	}
}

以下程式碼段和影象演示瞭解析方法。

程式碼片段:

const json = `{
  "employee": {
    "name": "Roy Mustang",
    "age": 35,
    "favoriteColor": ["Blue", "Black", "Purple"],
    "siblings": {
      "Liza": 20, "Emily": 12
      }
    }
  }`;

var data = JSON.parse(json);

var i;

for(i in data){
  if(data[i]instanceof Object){
    console.log(data[i]);
  }
}

輸出:

將 JSON 解析為 JavaScript

在 JavaScript 中使用點 (.) 操作訪問單個 JSON 資料

由於我們已經解析了資料,現在讓我們使用點 (.) 操作提取 key:value 對的各個值。

程式碼片段:

const json = `{
  "employee": {
    "name": "Roy Mustang",
    "age": 35,
    "favoriteColor": ["Blue", "Black", "Purple"],
    "siblings": {
      "Liza": 20, "Emily": 12
      }
    }
  }`;

var data = JSON.parse(json);

console.log(data.employee.name);
console.log(data.employee.favoriteColor[2]);
console.log(data.employee.siblings);
console.log(data.employee.siblings.Liza);

輸出:

在 javascript 中用點操作解析單個資料

在 JavaScript 中使用括號 [] 訪問單個 JSON 資料

此約定允許你以類似於陣列訪問其資料的類似方式檢索資料。

程式碼片段:

const json = `{
  "employee": {
    "name": "Roy Mustang",
    "age": 35,
    "favoriteColor": ["Blue", "Black", "Purple"],
    "siblings": {
      "Liza": 20, "Emily": 12
      }
    }
  }`;

var data = JSON.parse(json);

console.log(data["employee"]["name"]);
console.log(data["employee"]["favoriteColor"][2]);
console.log(data["employee"]["siblings"]);
console.log(data["employee"]["siblings"]["Emily"]);

輸出:

在 javascript 中用括號解析個人

在 JavaScript 中編碼 JSON 物件

假設你要修改一個 JSON 物件並重新傳送回伺服器,或者任務是將 JavaScript 轉換為 JSON 格式。這通常很有幫助,因為很難編輯大型 JSON 物件。因此,在解析物件並將其重定向到相同的格式後,我們使用 JSON.stringify 方法。

程式碼片段:

const json = `{
  "employee": {
    "name": "Roy Mustang",
    "age": 35,
    "favoriteColor": ["Blue", "Black", "Purple"],
    "siblings": {
       "Liza": 20, "Emily": 12
      }
    }
  }`;

var data = JSON.parse(json);
data.employee.name= "Riza Hawkeye";
const new_data = JSON.stringify(data);
console.log(new_data);

輸出:

JavaScript JSON.stringify

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook