angular json - meetbill/butterfly-fe GitHub Wiki

前端格式化输出 Json 数据

1 前言

1.1 $http 默认返回的是 json 对象

对于所有通过 $http 服务发出的请求和收到的响应来说，AngularJS 都会进行一些基本的转换，包括如下内容。

  • 转换请求：如果请求的配置对象属性中包含 JS 对象，那么就把这个对象序列化成 JSON 格式。
  • 转换响应：如果检测到了 XSRF 前缀，则直接丢弃。如果检测到了 JSON 响应，则使用 JSON 解析器对它进行反序列化。

1.2 场景

前端展示格式化的 json 数据，比如参数之类的

1.3 JSON 和 JS 对象相互转换

JSON 与 JS 对象的关系

JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。

angularjs 中有 fromJson 和 toJson 两个方法用于处理 json 和 JS 对象之间的转换

var obj = {a: 'ni', b: 'hao'};          //这是一个对象，注意键名也是可以使用引号包裹的
var json = '{"a": "ni", "b": "hao"}';   //这是一个 JSON 字符串，本质是一个字符串

JSON 转换为 JS 对象

obj = angular.fromJson(json)

JS 对象转换为 JSON

json = angular.toJson(obj)

2 操作步骤

2.1 json 对象转换为 json 字符串 ---js 部分

缩进 2 个空格

for (var i = 0; i < $scope.task_detail.tasks.length; i++) {
    var params_data = angular.fromJson($scope.task_detail.tasks[i].params)
    $scope.task_detail.tasks[i].params = angular.toJson(params_data,2)
    console.log($scope.task_detail.tasks[i].params)
}

这个阶段 console.log($scope.task_detail.tasks[i].params) 输出的是格式化的 json 数据

但在前端显示的还是紧凑的形式

2.2 前端格式化输出 --- Html 部分

<pre>__task.params__</pre>

这个阶段已经是格式化输出，但是默认不折行

2.3 前端格式化输出，而且进行折行 --- Html 部分

<pre style='white-space: pre-wrap;'>__task.params__</pre>

3 参考

⚠️ **GitHub.com Fallback** ⚠️