Angular的fromJson與toJson方法
阿新 • • 發佈：2019-01-27
<!DOCTYPE html> <html ng-app="App"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div ng-controller="jsonController"> <button ng-click="fromJson()">fromJson</button> <button ng-click="toJson()">toJson</button> </div> </body> <script src="ng.js"></script> <script> angular.module("App", []).controller("jsonController", function($scope) { var json = '{"name":"autumnswind", "skill":"1"}'; var jsonArr = '[{"name":"autumnswind", "skill":"2"},{"name":"wscats", "skill":"3"}]'; var obj = { name: "wscats", skill: "4" } $scope.fromJson = function() { var obj = angular.fromJson(json); console.log(obj.name); var objArr = angular.fromJson(jsonArr); console.log(objArr[1].name); console.log(objArr[1].skill); } $scope.toJson = function() { var str = angular.toJson(obj, true); console.log(str); } }) </script> </html>
**angular.fromJson()方法是把json轉化為物件或者物件陣列**
**angular.fromJson()方法是把物件或者陣列轉化json**
其實它是angular內部開放出來的其中一個常用的API
其他開放的API可以參考這個文件
http://www.runoob.com/angularjs/angularjs-reference.html
它們在angular的原始碼裡面是這樣的，注意toJson()還可以傳入一個pretty引數
function toJson(obj, pretty) { return "undefined" == typeof obj ? undefined : JSON.stringify(obj, toJsonReplacer, pretty ? " " : null) } function fromJson(json) { return isString(json) ? JSON.parse(json) : json }
看原始碼可以得知，其實這裡用了兩個關鍵的函式JSON.stringify()和JSON.parse 所以上面其實可以用JS的方法來實現，結果一樣，只是angular把它封裝成一個常用的方法，因為angular自身的框架內部也其實運用到這個方法
var obj1 = JSON.parse(json);
console.log(obj1);
var obj = angular.fromJson(json);//兩者結果一樣
console.log(obj);var str = angular.toJson(obj, true); console.log(str); var str = JSON.stringify(obj); console.log(str);
注意
JSON.stringify(obj, toJsonReplacer, pretty ? " " : null)第二個引數用於轉換結果的函式或陣列。
- 如果第二個引數為函式，則 JSON.stringify 將呼叫該函式，並傳入每個成員的鍵和值。使用返回值而不是原始值。如果此函式返回 undefined，則排除成員。根物件的鍵是一個空字串：""。
- 如果第二個引數是一個數組，則僅轉換該陣列中具有鍵值的成員。成員的轉換順序與鍵在陣列中的順序一樣。當第一個引數也為陣列時，將忽略第二個引數的陣列。
第三個引數也是可選的。它向返回值 JSON 文字新增縮排、空格和換行符以使其更易於讀取。
- 如果省略第三個引數，則將生成返回值文字，而沒有任何額外空格。
- 如果第三個引數是一個數字，則返回值文字在每個級別縮排指定數目的空格。如果第三個引數大於 10，則文字縮排 10 個空格。
- 如果第三個引數是一個非空字串（例如“\t”），則返回值文字在每個級別中縮排字串中的字元。
- 如果第三個引數是長度大於 10 個字元的字串，則使用前 10 個字元。
而angular把它第二個引數設定成toJsonReplacer，就是傳給toJsonReplacer函式去執行一些判斷，判斷處理後的json鍵對應的值是否合法
function toJsonReplacer(key, value) {
var val = value;
return "string" == typeof key && "$" === key.charAt(0) ? val = undefined : isWindow(value) ? val = "$WINDOW" : value && document === value ? val = "$DOCUMENT" : isScope(value) && (val = "$SCOPE"), val
}舉一反三我們也可以寫個自己的方法放在第二個引數裡面，例如寫一個把處理的陣列輸出全部變成大寫字母的函式
var arr = ["autumnswind", "skill"];
$scope.toJson = function() {
var str = angular.toJson(obj, true);
console.log(str);
var str = JSON.stringify(arr, replaceToUpper);
function replaceToUpper(key, value) {
return value.toString().toUpperCase();
}
console.log(str);
}返回如圖的結果
