JSON数据在页面上格式化展示

最新推荐文章于 2024-06-04 12:31:10 发布
最新推荐文章于 2024-06-04 12:31:10 发布
阅读量1.6k 收藏 2
点赞数 1
分类专栏： javascript 文章标签： json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46380656/article/details/120910900
版权

如何将一段json字符串在页面上展示出来。
默认是这样
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R3uoiRoJ-1634897013397)(https://www.freesion.com/images/838/8652e35b0ab6fadac0d190f33adb62ce.png)]

var jdata = JSON.stringify(JSON.parse(jsondata), null, 4);
console.log(jdata);//这是在输出框的json数据确实被格式话了
$(".showMessage").html("<pre>"+jdata+</pre> );//这时数据展示正确

在这里插入图片描述

小星落
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html页面展示json数据并格式化的方法
01-21
json数据在html页面展示并格式化 一、展现效果图 描述信息： key值全部采用红色标出，表示重要参数； value值采用不同颜色标出，数值类型的采用橘黄色，字符串采用绿色，布尔采用蓝色。。。 二、源代码展示 <!DOCTYPE html> <html> <head> <meta http-equiv=Content-Type content=text/html; charset=UTF-8> <style> pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; } .string {
页面json展示
04-11
NULL 博文链接：https://zhuzl5210798.iteye.com/blog/1685509
JSON 数据格式化方法
最新发布
小发菜
06-04 1万+
JSON 数据格式化是处理 JSON 数据的重要步骤，有助于提高数据的可读性和可维护性。您可以使用 IDE 或脚本语言提供的内置功能进行格式化，也可以使用在线工具进行格式化。非常推荐 [JSONS](https://www.sojson.com) 不仅支持格式化，而且还支持代码文本对比和替换等功能。
json格式化页面展示
m0_59865308的博客
03-10 461
JSON.stringify(JSON.parse(data), null, 2);这个是我代码里面写的，data是后台给的json串。 这个我去扒了官网发现JSON.stringify()支持三个参数： 第一个是将要序列化成 一个 JSON 字符串的值。 第二个是一个函数， 第三个是指定缩进用的空白字符串，一般都是数字，最大是10. 第一个参数必须，后两个参数可选。 ...
json数据在页面上格式化展示
yytIcon的博客
09-19 1万+
如何将一段json字符串在页面上展示出来。 第一不做任何处理后，在页面上的展示效果如图一所示: 图一 这时，下面这句代码会实现将json字符串格式化  var jdata = JSON.stringify(JSON.parse(jsondata), null, 4); console.log(jdata);//这是在输出框的json数据确实被格式话了 $(".showMessage"...
JSON数据格式化展示
wltsysterm的博客
04-17 1633
项目做多了，就发现，总结非常有必要。今天分享的是，json数据格式化展示的两种方法。 方法一 表格形式的数据展示： 效果如下： 实现代码如下：//////jsp代码如下： <table id="mess" class="frm" style="width:584px;height:362px;"></table> <script> content='{ "navnums": { "0":
JSON格式化展示
仅此一❤
04-20 709
知识整理（长期更新）： JS中对JSON格式化： JSON.stringify({'a':1,'c':2,aa:{'a':1,'c':2}}, null, "\t"); 输出结果 "{ "a": 1, "c": 2, "aa": { "a": 1, "c": 2 } }" Chrome 调试技巧 console....
json数据在Html页面格式化显示
11-01
总结来说，"json数据在Html页面格式化显示"是一个常见的开发需求，它涉及到JSON解析、HTML生成、JavaScript事件处理和CSS样式设计等多个技术领域。通过这些技术的结合，可以创建出一个用户友好的界面，便于查看和...
前端展示json数据，格式化，可折叠展开
05-12
本主题将详细介绍如何在前端实现JSON数据的格式化展示，以及支持折叠和展开的功能。 首先，理解JSON的基本结构是至关重要的。JSON由键值对组成，键必须是字符串，用双引号包围，而值可以是各种类型，如字符串、数字...
web页面数据展示新想法(json)
10-29
随着互联网技术的快速发展，Web应用的数据展示方式也在不断进步。在传统的Web应用中，...尽管存在一些技术挑战和安全问题，但通过适当的优化和安全措施，JSON数据交换格式在Web开发中仍然是一个值得推荐的解决方案。
flask bootstrap页面json格式化
09-08
本篇文章将深入探讨如何在Flask应用中结合Bootstrap来展示和格式化JSON数据。 首先，确保已安装了Flask、Bootstrap和相关的依赖。可以使用以下命令安装： ```bash pip install flask flask-bootstrap ``` 接下来...
json教程之页面格式化
yunduanaoligei的博客
11-12 414
今天分享下”json教程之页面格式化“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 ​​<​​​​html​​​​>​​ ​​<​​​​head​​​​>​​ ​​<​​​​meta​​​ ​​charset​​​​=​​​​"utf-8"​​​ ​​/>​​ ​​<​​​​title​​​​>hello</​​​​title​​​​>​​ ​​<​
HTML显示json字符串并且进行格式化
热门推荐
希望能找到你的答案
01-31 18万+
通过pre标签进行格式化展示，使用JSON.stringify()方法转换。 代码如下： HTML显示json字符串并且进行格式化 { "name": "Brett", "address":"北京路23号", "email": "123456@qq.com" } 　 var text = document.getElementById('show_p').innerTex
分享将json格式的数据格式化展示到界面中，高亮、折叠、自定义样式
du_aitiantian的博客
03-24 3547
json数据格式转化
几种JSON数据在页面上格式化展示的方案
Walle的博客
07-23 2万+
目录 1.JSON.stringify()方法 2.json-viewer插件 3. ACE 编辑器 1.JSON.stringify()方法 如下示例，original是一个 textarea，会在输入框失去焦点的时候格式化JSON数据 <textarea class="form-control" id="original" rows="20" placeh...
利用控制台（console）来格式化json文件内容
小小英雄的博客
02-17 3112
在工作中，我们经常拿到json文件都是格式后的，变成来一行，导致我们很难查看原来的信息。当然网上有很多工具支持json格式化成原来的样子。 今天我们用更简单的方法，控制台+copy方式来实现json文件还原。 具体方式如下： 1、打开json文件，并复制内容 2、打开网页控制台，输入 a =，后面黏贴上之前复制的内容 3、控制台输入 copy(a) 4、找个文档，黏贴 ...
把后端返回的json数据格式化显示在页面上，类似json.cn
csdn_smartyang的博客
09-30 2041
今天老大提了一个需求，想要做一个按钮点击后出现一个类似于json.cn代码格式化,把后端返回给你的一个json数据格式化以后显示在页面上，经高人指点知道了这样一个jsoneditor模块 一.介绍 JSON编辑器是基于Web的工具，用于查看，编辑，格式化和验证JSON。 它具有多种模式，例如树编辑器，代码编辑器和纯文本编辑器。 该编辑器可以用作您自己的Web应用程序中的组件。 该库可以作为CommonJS模块，AMD模块或常规javascript文件加载。 支持的浏览器：Chrome，Firefox，Saf
el-tooltip显示成json格式，提示框大小设置
xzln000000的博客
03-30 1356
学习记录~ 【目的】将内容显示成json格式，文字展示正常 其中：apiDetail_requestHeaders为object格式的变量。js中，string变为object的方法：aa =JSON.stringify(bb,null,4)//使用四个空格缩进 【效果如下】 <el-form-item label="请求头" :rules="{ required: true, message: '不能为空'}" > <el-tooltip...
记spring boot + Layui 数据对接
weixin_44001878的博客
07-15 1095
工作需要开发一个记录收费信息项目，我选择了用Layui作为前端框架模板，完成开发后记一下一些比较常用或者踩过的小坑： ①样式文件以及JS文件的引入： //注意这里引入方式除了平常的 href 和 src ，最好再加上 th:href="@{}"，src="@{}" 其中的 @{} 里边必须要以“/”开头，才能正确根据项目路径找到相应的静态资源 <link rel="stylesheet" th:href="@{/layui/css/layui.css}" href="../static/layui/c
前端将json对象数据格式化展示的方法
05-28
前端可以通过以下方法将 JSON 对象数据格式化展示： 1. 使用 JSON.stringify() 方法将 JSON 对象转换为字符串格式。 2. 使用 JSON.parse() 方法将字符串格式的 JSON 对象转换为 JavaScript 对象。 3. 使用 JSON Viewer 或其他 JSON 格式化工具将 JSON 对象格式化展示。 4. 使用 JavaScript 的循环和条件语句将 JSON 对象格式化展示，例如使用 for 循环遍历 JSON 对象的属性和值，并根据需要添加 HTML 标签和样式。 以下是一个使用 JSON Viewer 将 JSON 对象格式化展示的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JSON Viewer</title> <script src="https://cdn.jsdelivr.net/npm/json-viewer@1.0.1/index.min.js"></script> </head> <body> <div id="json"></div> <script> const data = { "name": "John", "age": 30, "city": "New York" }; document.getElementById("json").appendChild(JsonViewer(data)); </script> </body> </html> ``` 这段代码将会在页面中展示一个格式化后的 JSON 对象，如下所示： ``` { "name": "John", "age": 30, "city": "New York" } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值