微信小程序中格式化json字符串

js内容

var cont = {"name":"小王","age":36,"gender":"男","chirdrens":[{"name":"王二小","age": 10, "gender":"男"},{"name":"王三小","age": 6, "gender":"男"}]};
cont = JSON.stringify(cont);
console.log(cont);
this.setData({
  content: cont
});

wxml内容

<text class="text-json" user-select="true">{{content}}</text>

展示效果

image.png
这种形式看起来很乱，我们希望看到的是被格式化的方法，很明显不能直接通过JSON.stringify(cont)来进行格式化，通过搜索，我们可以用另外一个方法JSON.stringify(value[, replacer[, space]]),于是修改上面代码为如下所示：

var cont = {"name":"小王","age":36,"gender":"男","chirdrens":[{"name":"王二小","age": 10, "gender":"男"},{"name":"王三小","age": 6, "gender":"男"}]};
    cont = JSON.stringify(cont,null,2);
    console.log(cont);
    this.setData({
      content: cont
    });

image.png

我们发现现在的展示已经比较清晰了，但是没有缩进，通过在网上搜索，需要对text标签的属性space进行设置

<text space="nbsp" class="text-json" user-select="true">{{content}}</text>

现在展示效果就是我们想要的了

image.png

JSON.stringify(value[, replacer[, space]])引用自菜鸟教程

space="nbsp" 引用如下

在小程序中HTML的网页实体无法正常使用，小程序中的写法为：
一、空格，换行
<text>你好！\t七月流火啊！\n我在下一行</text>
\t 空格（ 多个只会显示一个空格）
\n 换行
二、连续空格
<view>
<text space="ensp">你好 啊 哈哈哈（空格是中文字符一半大小）</text>
</view>
<view>
<text space="emsp">你好 啊 哈哈哈（空格是中文字符大小）</text>
</view>
<view>
<text space="nbsp">你好 啊 哈哈哈（空格根据字体设置）</text>
</view>

点击查看原文链接