YUI JSON

原文： http://decentway.iteye.com/blog/1074305

 

JSON (JavaScript Object Notation) 是一種輕量級的數據交換格式。易於人閱讀和編寫，同時也易於機器解析和生成。它基於JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一個子集。 JSON採用完全獨立於語言的文本格式，但是也使用了類似於C語言家族的習慣（包括C, C++, C#, Java, JavaScript, Perl, Python等）。這些特性使JSON成爲理想的數據交換語言。

JSON模塊綜述：

爲了是腳本儘可能的小，JSON模塊被分成了以下幾個部分：

 json-parse,json-stringify,json

 

   json-parse：解析JSON字符串。

   json-stringify：將js對象轉化爲JSON字符串。

   json：同時實現以上兩者。

 

解析JSON字符串到本地JS值

YUI().use('json-parse', function (Y) {

var jsonString = '{"products":['+
    '{"id":1,"price":0.99,"inStock":true,"name":"grapes"},'+
    '{"id":2,"price":3.5,"inStock":false,"name":"passion fruit"},'+
    '{"id":3,"price":2.5,"inStock":true,"name":"bananas"}'+
']}';

// JSON.parse 當jsonString爲無效的JSON值時，要捕獲錯誤。
try {
    var data = Y.JSON.parse(jsonString);
}
catch (e) {
    alert("Invalid product data");
}

//使用JSON值。
for (var i = data.products.length - 1; i >= 0; --i) {
    var p = data.products[i];
    if (p.price < 1) {
        p.price += 1; // Price increase!
    }
}

});

 

使用可選的“reviver ”參數：

注意名值對：key——var

這個可選的第二個參數，如果返回reviver的值是沒有定義，那麼這個key將被忽略。

YUI().use('json-parse', function (Y) {

    var jsonString = '{"products":['+
        '{"id":1,"price":0.99,"inStock":true,"name":"grapes"},'+
        '{"id":2,"price":3.5,"inStock":false,"name":"passion fruit"},'+
        '{"id":3,"price":2.5,"inStock":true,"name":"bananas"}'+
    ']}';

    // 移除所有沒有庫存，name爲 bananas的條目，以及格式化price。
    var currencySymbol = '$';
    var reviver = function (key,val) {
        if (key === 'inStock' && !val) {
            return undefined;
        } else if (val === 'bananas') {
            return undefined;
        } else if (key === 'price') {
            val += val % 1 ? "0" : ".00";
            var pIdx = val.indexOf('.');
            val = pIdx ? "0" + val : val;
            val = currencySymbol + val.substr(0,pIdx + 3);
        }

        return val;
    };

    // 如果是無效的JSON，將拋出一個異常。
    try {
        var data = Y.JSON.parse(jsonString,reviver);
    }
    catch (e) {
        alert("Invalid product data");
    }

    // 使用處理過的數據。
    alert(data.products.length); // 1
    alert(data.products[0].price); // $0.99

});

 

不使用 eval：

eval() 函數可計算某個字符串，並執行其中的的 JavaScript 代碼。

參見：http://www.w3school.com.cn/js/jsref_eval.asp

使用JSON模塊的parse方法將更加安全：

// 不安全
var data = eval('(' + shouldBeJsonData + ')');

// 安全
var data = Y.JSON.parse(shouldBeJsonData);

 

從JS對象中創建JSON字符串

爲了把JS對象（或者是任何一個允許的值）轉換爲一個JSON字符串，傳遞對象到Y.JSON.stringify並且捕獲返回值。

YUI().use("json-stringify", function (Y) {

    var myData = {
        troop : [
            { name: "Ashley", age: 12 },
            { name: "Abby", age:9 }
        ]
    }; 

    var jsonStr = Y.JSON.stringify(myData);

    alert(jsonStr); // {"troop":[{"name":"Ashley","age":12},{"name":"Abby","age":9}]}
});

 

使用一個白名單：

爲了僅序列號一個固定的名的子集，該函數提供了一個key名數組作爲stringify的第二個參數。

YUI().use("json-stringify", function (Y) {

    var myData = {
        troop : [
            { name: "Ashley", age: 12 },
            { name: "Abby", age:9 }
        ]
    }; 

    var jsonStr = Y.JSON.stringify(myData);

    alert(jsonStr); // {"troop":[{"name":"Ashley","age":12},{"name":"Abby","age":9}]}
});YUI().use("json-stringify", function (Y) {

    // 對象記錄集
    var records = [
        {id:1, name: "Bob",   age: 47, favorite_color: "blue"},
        {id:2, name: "Sally", age: 30, favorite_color: "mauve"},
        {id:3, name: "Tommy", age: 13, favorite_color: "black"},
        {id:4, name: "Chaz",  age: 26, favorite_color: "plaid"}
    ];

    // 創建一個字符才僅僅包含id和age；
    var jsonStr = Y.JSON.stringify(records,["id","age"]);

    alert(jsonStr);
    // [{"id":1,"age":47},{"id":2,"age":30},{"id":3,"age":13},{"id":4,"age":26}]

}); 

使用一個自定義的”replacer“：

YUI().use("json-stringify", function (Y) {

    // 記錄集
    var records = [
        {id:1, name: "Bob",   birthdate: "2/27/1964", favorite_color: "blue"},
        {id:2, name: "Sally", birthdate: "9/30/1983", favorite_color: "mauve"},
        {id:3, name: "Tommy", birthdate: "3/11/1990", favorite_color: "black"},
        {id:4, name: "Chaz",  birthdate: "5/22/1975", favorite_color: "plaid"}
    ];

    // 將id 和 favorite_color加入黑名單，將生日轉換成爲UTC格式。
    var replacer = function (key,val) {
        // 將id 和 favorite_color加入黑名單
        if (key === 'id' || key === 'favorite_color') {
            return undefined;

        // 將生日轉換成爲UTC格式。
        } else if (key === 'birthdate') {
            var d = new Date(),
                bd = val.split('/');
            d.setFullYear(bd[2],bd[0]-1,bd[1]);
            d.setHours(0,0,0);
            return d;
        }

        return val;
    };

    var jsonStr = Y.JSON.stringify(records,replacer);

    alert(jsonStr);
    // [{"name":"Bobby","birthdate":"1964-02-28T08:00:00Z"},{"name":"Sally","birthdate":"1983-09-30T07:00:00Z"},{"name":"Tommy","birthdate":"1990-03-11T08:00:00Z"},{"name":"Chaz","birthdate":"1975-05-23T07:00:00Z"}]

});

格式化JSON輸出：

YUI().use('json-stringify', function (Y) {

    var fam = {
        family: "Franklin",
        children: [ "Bob", "Emily", "Sam" ]
    };

    //格式化：用四個空格。
    var jsonStr = Y.JSON.stringify(fam,null,4);

    alert(jsonStr);
    /*
    {
        "family": "Franklin",
        "children": [
            "Bob",
            "Emily",
            "Sam"
        ]
    }
    */

});

 

捕獲JSON錯誤

同parse，stringify也需要捕獲錯誤。

循環引用？

 

try {
    // BOOM
    Y.JSON.parse("{'this string': is, not_valid: ['J','S','O','N'] }");
}
catch (e) {
    alert("A string may eval to the same object, but might not be valid JSON");
}

// This is safe to stringify
var myData = {
    troop : [
        { name: "Ashley", age: 12 },
        { name: "Abby", age:9 }
    ]
}; 

// Create a cyclical reference
myData.troop[0]["NEWKEY"] = myData;

try {
    // BOOM
    jsonStr = Y.JSON.stringify(myData);
} catch (e) {
    alert("Cyclical references can sneak in.  Remember to wrap stringify.");
}