【JavaScript編程】JSON: JavaScript Object Notation(JavaScript 對象表示法)

<body>

<p>演示JSON的基本類型、語法、元素、轉換:</p>
<p id="demo"></p>
<p id="demo1"></p>
<p id="demo2"></p>

<script>
var str="";
var user = {
    "name":"fiction", //字符串
    "age":30 ,    //數字
    "flag":true,   //布爾值
    "icCard":null, //空值null
    "phones": [    //數組
    { "name":"中國移動" , "number":"1234567890" }, 
    { "name":"中國聯通" , "number":"0987654321" }, 
    { "name":"中國電信" , "number":"6789054321" }
    ],
    "friend": {   //對象
        "name":"胡歌",
        "age":30,
        "phone":"12345678765"
    }
}

//獲取名字
var name = user.name;
str += "我的名字:" + name + "<br>";
//獲取年齡
var age = user["age"];
str += "我的年齡:" + age + "<br>";
//##################################
//獲取對象
var friend = user.friend;
//循環對象
for( item in friend){
    str += "朋友:" + item + "  is:  " + friend[item] + "<br>" ;
}
//朋友 對象轉爲字符串
var friendStr = JSON.stringify(friend);
str += "朋友的信息:" + friendStr  + "<br>";
//獲取朋友名字
var friendName = user.friend.name;
//獲取朋友年齡
var friendAge = user.friend["age"];
//##################################
//獲取數組
var phones = user.phones;
//循環數組
for( item in phones){  //item只是索引,不是數組裏的元素
    str += "聯繫方式:" + phones[item].name + "  is:  "+phones[item].number + "<br>" ;
}
//數組轉字符串
var phonesStr = JSON.stringify(phones);
str += "聯繫方式字符串:" + phonesStr  + "<br>";
document.getElementById("demo").innerHTML = str;
//轉JSON對象的函數解析
var textWithFunc = '{ "name":"Runoob", "alexa":"function () {return 10000;}", "site":"www.runoob.com"}';
var toJsonFunc = JSON.parse(textWithFunc);
toJsonFunc.alexa = eval("(" + toJsonFunc.alexa + ")");
document.getElementById("demo1").innerHTML = toJsonFunc.name + " Alexa 排名:" + toJsonFunc.alexa(); 
//轉JSON對象的日期解析
var textWithDate = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
var toJsonDate = JSON.parse(textWithDate, function (key, value) {
	if (key == "initDate") {
	    return new Date(value);
	} else {
	    return value;
}});
document.getElementById("demo2").innerHTML = toJsonDate.name + "創建日期:" + toJsonDate.initDate;
</script>

</body>

1、JSON語法

2、JSON對象

3、JSON數組

4、JSON.parse()

5、JSON.stringify()

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章