javascript格式化json显示实例分析

接下来我将为你详细讲解“JavaScript格式化JSON显示实例分析”的完整攻略。

什么是JSON

JSON是JavaScript Object Notation的缩写，是一种轻量级的数据交换格式。JSON使用文本来描述数据对象，与XML不同，JSON更容易阅读、编写、解析，因为它的语法格式比XML更简洁。

格式化JSON

在处理JSON格式的数据时，我们通常需要把JSON格式的数据进行格式化操作以便于阅读和数据分析。下面是几种常见的JSON格式化方法：

使用JSON.stringify方法

可以使用JSON.stringify方法把JSON对象格式化成字符串形式，实现JSON的格式化，这是最常用的一种方式。

var jsonObj = {"name": "小红", "age": 20, "address": {"city": "北京", "street": "朝阳区"}}
var jsonString = JSON.stringify(jsonObj, null, 4);
console.log(jsonString);

其中，第一个参数是要格式化的JSON对象，第二个参数是过滤过程中需要排除的属性，第三个参数是格式化输出的缩进空格数。

使用JSON.stringify + split方法

在第一种方式的基础上，可以使用split方法对JSON字符串进行再次格式化，以便于阅读和数据分析。

var jsonObj = {"name": "小红", "age": 20, "address": {"city": "北京", "street": "朝阳区"}}
var jsonString = JSON.stringify(jsonObj, null, 4);
jsonString = jsonString.split('\n');
for (var i = 0; i < jsonString.length; i++) {
  console.log('    ' + jsonString[i]);
}

使用工具类库

除了以上两种方式，还可以使用一些工具类库来实现JSON格式化：

underscore.js

var jsonObj = {"name": "小红", "age": 20, "address": {"city": "北京", "street": "朝阳区"}}
var jsonString = JSON.stringify(jsonObj, null, 4);
console.log(_.escape(jsonString));

format-json

var jsonObj = {"name": "小红", "age": 20, "address": {"city": "北京", "street": "朝阳区"}}
var jsonString = JSON.stringify(jsonObj, null, 4);
console.log(formatJson(jsonString));

示例说明

下面是两个示例，分别演示了使用JSON.stringify和使用JSON.stringify + split方法对JSON对象进行格式化：

使用JSON.stringify方法

var jsonObj = {"name": "小红", "age": 20, "address": {"city": "北京", "street": "朝阳区"}}
var jsonString = JSON.stringify(jsonObj, null, 4);
console.log(jsonString);

输出结果：

{
    "name": "小红",
    "age": 20,
    "address": {
        "city": "北京",
        "street": "朝阳区"
    }
}

使用JSON.stringify + split方法

var jsonObj = {"name": "小红", "age": 20, "address": {"city": "北京", "street": "朝阳区"}}
var jsonString = JSON.stringify(jsonObj, null, 4);
jsonString = jsonString.split('\n');
for (var i = 0; i < jsonString.length; i++) {
  console.log('    ' + jsonString[i]);
}

输出结果：

    {
        "name": "小红",
        "age": 20,
        "address": {
            "city": "北京",
            "street": "朝阳区"
        }
    }

希望这些内容能对你有所帮助！