Angular的fromJson与toJson方法
Wscats opened this issue · 0 comments
Wscats commented
<!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);
}