JS代码如下,这里用了jq的语法:

<script type="text/javascript">
$(function(){
var text = $("#show_json").html();
var result = JSON.stringify(JSON.parse(text), null, 4);
$("#show_json").html("<pre>"+result+"</pre>");
});
</script>

html部分代码:

<table>
<tr>
<td>json: </td>
<td><p id="show_json">{"aaa":"111", "bbb":"222", "ccc":"333"}<p></td>
</tr>
</table>

看下效果图:

JS格式化JSON串显示在表格中的更多相关文章

  1. 将JSON数组显示前台Table中

    将JSON数组显示前台Table中 在最近的学习中遇到一个小问题,如何把JSON数组显示在前台的table中,经过一番借鉴和学习之后终于解决了这个问题.具体的代码如下: (前提:利用ajax获取过来的 ...

  2. 原生js格式化json和格式化xml的方法

    在工作中一直看各位前辈的博客解决各种问题,对我的帮助很大,非常感谢! 之前一直比较忙没有写博客,终于过年有了点空闲时间,可以把自己积累的东西分享下,笔记中的部分函数不是自己写的,都是工作中一点点积累的 ...

  3. 原生js格式化json的方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. js格式化JSON数据

    前言: 最近做的项目中遇到个需要在前端页面中将某个设备需要的数据格式展示出来,方便用户配置.一开始单纯的将数据格式写入到pre标签中, 但是通过pre标签写入的数据格式在代码可视化上不是很优雅.由于上 ...

  5. 原生js格式化json工具

    json格式化小工具,原生js编写,直接上代码: <!DOCTYPE html> <html lang="en"> <head> <met ...

  6. js如何实现动态的在表格中添加和删除行?(两种方法)

    js如何实现动态的在表格中添加和删除行?(两种方法) 一.总结 1.table元素有属性和一些方法(js使用) 方法一:添加可通过在table的innerHTML属性中添加tr和td来实现 tab.i ...

  7. js 格式化 json 字符串

    1.JSON.stringify的三个参数 var json = {"@odata.context":"$metadata#AddTableOne_466281s&quo ...

  8. 8.在python中用data_only=True设置显示excel表格中公式的结果为None的解决方法

    在用python调用excel文件显示带公式的表格内容,有两种显示结果:第一种是直接显示表格中公式人内容:另一种是显示其表格中公式的结果. 显示第一种,可以这样输入代码: 显示第二种,可以这样输入代码 ...

  9. C#后台格式化JSON字符串显示

    很多时候我们从服务器上获取的JSON字符串是没有格式化的,如下: {"BusinessId":null,"Code":200,"Data": ...

随机推荐

  1. 用maven运行指定java类main方法

    mvn exec:java -Dexec.mainClass="com.java2s.ide.App"

  2. 线上可用django和gunicorn的dockerfile内容

    一,基础镜像 [xxx.com.cn/3rd_part/python.3.6.8:alpine3.9-mysqlclient1.4.2] FROM python:3.6.8-alpine3.7 MAI ...

  3. Vue项目开发前的准备工作,node的安装,vue-cli的安装

    一.安装node 1-  点击这里进入node官网下载 2- 3- 下载完成是这样的 4-  双击打开进行安装,一路next,安装完成是这样 5-  打开cmd进入安装node的文件夹,输入node ...

  4. Scrapy-splash

    Scrapy-splash Splash是一个javascript渲染服务.它是一个带有HTTP API的轻量级Web浏览器,使用Twisted和QT5在Python 3中实现.QT反应器用于使服务完 ...

  5. 三台三层交换机OSPF多区域划分动态路由实验

    一.实验拓扑 二.实验步骤 1.给主机设置IP,网关:给交换机划分VLAN,给VLAN划分端口,给VLAN设置IP 2.启用OSPF.宣告网段(network 网络地址 反掩码 区域名     其中0 ...

  6. SVN 中项目名字全是红色 和 文件夹图标上没标记绿钩解决办法

             没有绿色标记卸载Tortoise 小乌龟重装 ! 红色名字是 原来idea当前的project用了版本控制器, 那么建到这个project下面的所有项目就都是加入到版本控制里面的, ...

  7. Ubuntu安装有道词典

    dpkg -i youdao-dict.deb正常安装 会报一堆依赖关系的错误, 1.更新系统 #更新系统 apt-get update apt-get dist-upgrade 2.对每一个未安装的 ...

  8. Pencil 基于Electron的GUI原型工具之菜单再探

    为什么要重试呢? 主要是觉得Pencil这个工具还是比较有价值.就像Linus对Linux下分发版的态度"让用户有选择"一样,在现在这个Sass服务.Web服务化越来越普遍越便利的 ...

  9. 物联网架构成长之路(37)-基于C#开发串口工具

    0. 前言 作为物联网平台开发,最基础的工具链还是要有的.前几篇博客,介绍了用C#开发一个MQTT的客户端,用于模拟设备连接平台,并发送数据到平台.但是对于一些硬件来说,可能会用到串口uart来发送数 ...

  10. Flink是如何实现exactly-once语义的

    转自:https://blog.csdn.net/xianpanjia4616/article/details/86375224 最少一次:断了之后 重新执行 再去重 严格一次:根据检查点,再执行一次 ...