[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