JSON

MDN JS学习之json

字号+ 作者:H5之家 来源:H5之家 2017-09-16 13:02 我要评论( )

JSon.md1.json是一种数据传输格式,几乎可以看作是jsobject,大体上符合jsobject对象的语法规范。之所以说是大体上主要是因为:1.数组也可以是json对象2.它只有p

JSon.md

1.json是一种数据传输格式,几乎可以看作是js object, 大体上符合js object对象的语法规范。
之所以说是大体上主要是因为:1.数组也可以是json对象 2.它只有properties,没有methods 3.json对象member的name 必须要用双引号。也就是不用标识符作为properties,只用string来做properties

2.json的载入
主要是通过XMLHttpRequest的对象来实现的,或者说Ajax

var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; var request = new XMLHttpRequest(); request.open('GET', requestURL); request.responseType = 'json'; request.send(); request.onload = function() { var superHeroes = request.response; populateHeader(superHeroes); showHeroes(superHeroes); } 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 (var 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 (var 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); } }

3.json和string之间的相互转换
从string到json:JSON.parse()

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到string:JSON.stringify()

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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • python2.7写中文数据到json文件报错UnicodeEncodeError

    python2.7写中文数据到json文件报错UnicodeEncodeError

    2017-09-16 14:08

  • JSON解析之 getJSONObject 与 optJSONObject 的区别

    JSON解析之 getJSONObject 与 optJSONObject 的区别

    2017-09-15 16:00

  • FastXML Jackson / JSON 学习记录

    FastXML Jackson / JSON 学习记录

    2017-09-15 14:23

  • javascript重新排列json数据

    javascript重新排列json数据

    2017-09-15 08:06

网友点评