Angular的fromJson与toJson方法

Question

Angular的fromJson与toJson方法

Wscats opened this issue 8 years ago · comments

<!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":"wscats", "skill":"1"}';
            var jsonArr = '[{"name":"wscats", "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.toJson()方法是把对象或者数组转化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 = ["wscats", "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);
}

返回如图的结果