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. python的pip安装时,使用国内Pypi源

    有时,国外的网速确实不理想. 想安装python库,还是国内快点. 参考URL: http://www.mamicode.com/info-detail-2248964.html 阿里云 http:/ ...

  2. No implementation for org.apache.maven.model.path.PathTranslator was bound.

    2019-12-17 10:19:19,884 [ 688476] INFO - #org.jetbrains.idea.maven - org.apache.maven.model.resoluti ...

  3. 201871010135 张玉晶《面向对象程序设计(java)》第七周学习总结

    201871010135  张玉晶<面向对象程序设计(java)>第七周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...

  4. monkey参数

    一.参数分类 常规类参数:包括帮助参数和日志信息参数. 帮助类参数:monkey -h     -- 输出monkey命令使用指导 日志信息参数:monkey -v <event-count&g ...

  5. 基于C++的STL的vector实现静态链表,要求包含插入,删除,和查找功能

    //main.cpp部分 #include"List.cpp" int main() { StaticList<int> SL; SL.Insert(,); SL.In ...

  6. 提高python运行效率-numba

    Numba是Python的即时编译器,在使用NumPy数组和函数以及循环的代码上效果最佳.使用Numba的最常见方法是通过其装饰器集合,这些装饰器可应用于您的函数以指示Numba对其进行编译.调用Nu ...

  7. vs code 中配置git go

    { "window.zoomLevel": 1, "editor.fontSize": 15, //"files.autoSave": &q ...

  8. windows上安装python和python开发工具

    一.python安装: 登录python官网,下载需要的安装包:https://www.python.org/downloads/windows/.,一般就下载 executable installe ...

  9. Javal连载4-注释&class与public class区别

    一.Java注释 1.作用:不会编译倒.class文件之中:增强可读性 2.分类: (1)单行注释(只注释当前行):// (2)多行注释: /* 注释 注释 注释 */ (3)javadoc注释 /* ...

  10. Zookeeper 到底能帮我们解决哪些问题?

    Zookeeper 从设计模式角度来看,是一个基于观察者模式设计的分布式服务管理框架,它负责存储和管理大家都关心的数据,然后接受观察者的注册,一旦这些数据的状态发生变化,Zookeeper 就将负责通 ...