JS格式化JSON串显示在表格中

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>

看下效果图:

 

转载于:https://www.cnblogs.com/jimmyshan-study/p/11229373.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JSON(JavaScript Object Notation)是一种常用的数据交换格式,而JavaScript是用于网页开发的脚本语言。实现JSON可视化编辑主要是通过JavaScript来操作JSON对象,并在网页上提供可视化的界面供用户编辑和查看。 在实现JSON可视化编辑时,可以借助于一些JavaScript库和框架,例如jQuery和Vue.js等。首先,需要在网页上引入相关的JavaScript库,并创建一个空的JSON对象作为初始值。然后,通过JavaScript代码来实现对JSON对象的增删改查操作。 JSON可视化编辑的主要功能包括:显示JSON数据的结构、编辑JSON数据的内容、添加新的JSON数据、删除已有的JSON数据等。首先,通过JavaScript代码解析JSON数据,将其转换为树状结构或表格的形式展示在网页上。用户可以通过点击展开或折叠的方式查看JSON的层级结构。然后,用户可以在界面上编辑JSON数据的内容,例如修改某个字段的值、添加新的字段等。通过监听用户的操作,及时更新JSON对象的值。用户还可以选择删除已有的JSON数据,通过JavaScript代码将其从JSON对象移除。 在实现JSON可视化编辑时,需要处理一些特殊情况,例如数组类型的数据和嵌套的JSON对象。对于数组,可以通过列表形式展示,并提供添加和删除元素的功能。对于嵌套的JSON对象,可以采用递归的方式展示其子对象,便于用户查看和编辑。 总之,通过使用JavaScript编写代码,结合合适的JavaScript库和框架,可以实现JSON可视化编辑。这样,用户可以通过直观的界面操作JSON数据,提高开发效率和用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值