iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
自我挑戰組

重新開始 JavaScript系列 第 27

[Day27] JSON

JSON (JavaScript Object Notation) 是一種資料交換格式,內容為屬性與值搭配組成,它屬於 JavaScript 的一個子集,而我們常用 JavaScript 習慣來撰寫 JSON

JSON 的格式

JSON 格式很像 JavaScript 的物件,他們都是利用屬性與值做搭配,在屬性上,物件可以使用字串型式,但 JSON 的屬性必須 使用雙引號包裹成字串,而在字串方面,物件可使用單引號,而 JSON 則 一律使用雙引號 ,其他方面則與物件類似

var family = {
    name: 'Carol 家',
    wallet: 3000,
    members: {
        dad: '老爸',
        mom: '老媽',
        child: 'Carol'
    }
};

var json = JSON.stringify(family);

console.log(json);
// {"name":"Carol 家","wallet":3000,"members":{"dad":"老爸","mom":"老媽","child":"Carol"}}

可利用 JSON.stringify 將物件轉為字串來看 JSON 格式

利用 vscode 撰寫 JSON 檔案時,將屬性雙引號取消或使用單引號皆會報錯

以下 2 個範例皆為使用 AJAX 來取得 JSON 檔案內容:

使用原生 AJAX

當使用原生 AJAX 讀取 JSON 檔案,可以看到傳進來的 JSON 資料,會是字串型式,透過 JSON.parse 把字串轉為 JavaScript 的物件格式

family.json 檔案

{
    "name": "Carol 家",
    "wallet": 3000,
    "members": {
        "dad": "老爸",
        "mom": "老媽",
        "child": "Carol"
    }
}

all.js 檔案

function getData() {
    var xhr = new XMLHttpRequest();
    xhr.open('get', 'family.json', true);
    xhr.send(null);
    xhr.onload = function() {
        var data = JSON.parse(xhr.responseText);
        console.log(data);
    }
}

getData();

Chrome Console 顯示

使用框架 AJAX - JQuery

使用 JQuery 的 ajax() 方法,所取得的值是物件,不需像原生 JSON 一樣再使用 JSON.parse 轉成 JavaScript物件,這是因框架當傳入 JSON 格式會自動轉為物件,讓開發者省去此步驟

也可以在 Chrome Console -> Network -> family.json -> Response 中也可看到回傳的值是 JSON 格式轉字串型式

family.json 檔案

{
    "name": "Carol 家",
    "wallet": 3000,
    "members": {
        "dad": "老爸",
        "mom": "老媽",
        "child": "Carol"
    }
}

all.js 檔案

$.ajax({
    url: 'family.json',
}).done(function (data) {
    console.log(data);
});

Chrome Console 顯示

Chrome Console -> Network -> family.json -> Response 顯示

參考文獻

六角學院 - JavaScript 核心篇

維基百科 - JSON


上一篇
[Day26] 求值策略
下一篇
[Day28] 函式
系列文
重新開始 JavaScript32

尚未有邦友留言

立即登入留言