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. docker镜像导入导出备份迁移

    导出: docker save -o centos.tar centos:latest #将centos:latest镜像导出为centos.tar文件 导入: docker load -i cent ...

  2. 一些有价值bug产生的思考

    1.异步处理时防止重复点击的逻辑校验 场景 打款请求时,进入异步处理的队列,生成一个任务号,存在如数据库,且状态为未完成.此时,如果并发操作,如重复点击或者重复调用接口,则发出的两条请求可能被分配到不 ...

  3. axios如何先请求A接口然后在请求B接口

    总结:在第一个then的请求结束后,在添加一个then,表示请求第二个接口,在第二个then里面写第二个接口的请求方式 axios.get("./a.json").then(res ...

  4. vue+node+elementUI实现注册功能

    后端代码 在后端的文件 routes文件夹下的connect.js文件中 // 引入mysql const mysql = require('mysql'); // 创建连接对象 const conn ...

  5. 6.Java基础_Java自增自减/关系/逻辑/三元运算符

    /* 自增自减运算符 关系运算符 逻辑运算符 三元运算符 (同C++) */ public class OperatorDemo01 { public static void main(String[ ...

  6. 《Verilog数字系统设计教程(第2版).pdf》

    Verilog数字系统设计教程(第2版).pdf https://github.com/shigh1005/pdf_book <Linux设备驱动开发详解:基于最新的Linux 4.0内核.pd ...

  7. 20191031 Codeforces Round #539 (Div. 1) - Virtual Participation

    这场怎么全是数据结构题...

  8. luoguP2824 [HEOI2016/TJOI2016]排序(二分答案做法)

    题意 这题的思路实在巧妙. 首先我们肯定无法对区间进行sort,那么考虑如何使得sort简化. 问:如果给的序列是一个0-1序列,让你区间排序,那么怎么做? 答:建一颗线段树维护sum,求出当前区间中 ...

  9. LeetCode98. 验证二叉搜索树

     验证二叉搜索树  *  * https://leetcode-cn.com/problems/validate-binary-search-tree/description/  *  * algor ...

  10. linux 安装盘作为 repo

    1) CentOS 7.7 安装完之后, /etc/yum.repos.d 下面有很多.repo. 其中有一个CentOS-Media.repo. 编辑文件把enabled 改成 1 . 然后把其他. ...