JSON基础

什么是JSON

JSON 是一种按照JavaScript对象语法的数据格式,由 Douglas Crockford 推广。虽然它是基于 JavaScript 语法,但它独立于JavaScript,这也是为什么许多程序环境能够读取(解读)和生成 JSON。

JSON可以作为一个对象或者字符串存在,前者用于解读 JSON 中的数据,后者用于通过网络传输 JSON 数据。 JavaScript 提供一个全局的可访问的 JSON 对象来对这两种数据进行转换。

一个 JSON 对象可以被储存在它自己的文件中,这基本上就是一个文本文件,扩展名为 .json, 还有 MIME type 用于 application/json.

JSON结构

JSON从JS获取灵感,自然可以想象到它和JS对象结构上的相似,示例如下:

{
  "squadName" : "Super hero squad",
  "homeTown" : "Metro City",
  "formed" : 2016,
  "secretBase" : "Super tower",
  "active" : true,
  "members" : [
    {
      "name" : "Molecule Man",
      "age" : 29,
      "secretIdentity" : "Dan Jukes",
      "powers" : [
        "Radiation resistance",
        "Turning tiny",
        "Radiation blast"
      ]
    },
    {
      "name" : "Madame Uppercut",
      "age" : 39,
      "secretIdentity" : "Jane Wilson",
      "powers" : [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    },
    {
      "name" : "Eternal Flame",
      "age" : 1000000,
      "secretIdentity" : "Unknown",
      "powers" : [
        "Immortality",
        "Heat Immunity",
        "Inferno",
        "Teleportation",
        "Interdimensional travel"
      ]
    }
  ]
}

可以看出它由属性名:属性值组成,每个数据用,隔开。

JSON对象也可以是一个数组:

[
  {
    "name" : "Molecule Man",
    "age" : 29,
    "secretIdentity" : "Dan Jukes",
    "powers" : [
      "Radiation resistance",
      "Turning tiny",
      "Radiation blast"
    ]
  },
  {
    "name" : "Madame Uppercut",
    "age" : 39,
    "secretIdentity" : "Jane Wilson",
    "powers" : [
      "Million tonne punch",
      "Damage resistance",
      "Superhuman reflexes"
    ]
  }
]

//访问方式示例
[0]["powers"][0]

JSON对象的访问

JSON对象的访问与JS对象访问方式一致,由.[]访问。对于复杂的数据可以采用链式访问,示例如下:

superHeroes["members"][1]["powers"][2]

注意事项

  • JSON 是一种纯数据格式,它只包含属性,没有方法
  • JSON要求在字符串和属性名称周围使用双引号。 单引号无效。甚至一个错位的逗号或分号就可以导致 JSON 文件出错。
  • JSON 可以将任何标准合法的 JSON 数据格式化保存,不只是数组和对象。比如,一个单一的字符串或者数字可以是合法的 JSON 对象。
  • 与 JavaScript 代码中对象属性可以不加引号不同,JSON 中只有带引号的字符串可以用作属性。

JSON示例

访问某网页请求JSON数据,得到后进行处理并显示。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON Test</title>
    <style>

    </style>
</head>

<body>
    <header>
    </header>

    <section>
    </section>
</body>
<script>
    var header = document.querySelector(‘header‘);
    var section = document.querySelector(‘section‘);
    var requestURL = ‘https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json‘;

    //创建一个HTTP请求对象
    var request = new XMLHttpRequest();
    //打开一个新的请求 参数:HTTP方法,URL
    request.open(‘GET‘, requestURL);
    //设置返回的数据格式,发送请求
    request.responseType = ‘json‘;
    request.send();
    //处理返回的数据,请求对象load事件只在请求成功时触发
    request.onload = function() {
        var superHeroes = request.response;
        populateHeader(superHeroes); //填充header
        showHeroes(superHeroes); //填充section
    }

    //定位header
    function populateHeader(jsonObj) {
        var myH1 = document.createElement(‘h1‘);
        myH1.textContent = jsonObj[‘squadName‘];
        header.appendChild(myH1);

        var myPara = document.createElement(‘p‘);
        myPara.textContent = ‘Hometown: ‘ + jsonObj[‘homeTown‘] + ‘ // Formed: ‘ + jsonObj[‘formed‘];
        header.appendChild(myPara);
    }

    //创建英雄信息卡片
    function showHeroes(jsonObj) {
        var heroes = jsonObj[‘members‘];

        for (i = 0; i < heroes.length; i++) {
            var myArticle = document.createElement(‘article‘);
            var myH2 = document.createElement(‘h2‘);
            var myPara1 = document.createElement(‘p‘);
            var myPara2 = document.createElement(‘p‘);
            var myPara3 = document.createElement(‘p‘);
            var myList = document.createElement(‘ul‘);

            myH2.textContent = heroes[i].name;
            myPara1.textContent = ‘Secret identity: ‘ + heroes[i].secretIdentity;
            myPara2.textContent = ‘Age: ‘ + heroes[i].age;
            myPara3.textContent = ‘Superpowers:‘;

            var superPowers = heroes[i].powers;
            for (j = 0; j < superPowers.length; j++) {
                var listItem = document.createElement(‘li‘);
                listItem.textContent = superPowers[j];
                myList.appendChild(listItem);
            }

            myArticle.appendChild(myH2);
            myArticle.appendChild(myPara1);
            myArticle.appendChild(myPara2);
            myArticle.appendChild(myPara3);
            myArticle.appendChild(myList);

            section.appendChild(myArticle);
        }
    }
</script>

</html>

如果返回的数据并非JSON对象,而是字符串,则处理如下:

  • parse(): 以文本字符串形式接受JSON对象作为参数,并返回相应的对象。
  • stringify(): 接收一个对象作为参数,返回一个对应的JSON字符串。
request.open(‘GET‘, requestURL);
request.responseType = ‘text‘; // now we‘re getting a string!
request.send();

request.onload = function() {
  var superHeroesText = request.response; // get the string from the response
  var superHeroes = JSON.parse(superHeroesText); // convert it to an object
  populateHeader(superHeroes);
  showHeroes(superHeroes);
}

反过来如果我们想把json对象转为字符串,则处理如下:

var myJSON = { "name" : "Chris", "age" : "38" };
var myString = JSON.stringify(myJSON);

JSON基础

上一篇:简单总结nodejs处理tcp连接的核心流程


下一篇:微信小程序开发MAP(地图)