前端页面展示json格式化显示

最新推荐文章于 2024-07-31 17:29:33 发布
最新推荐文章于 2024-07-31 17:29:33 发布
阅读量2.6k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/henry1zhao/article/details/103362288
版权

前端页面展示json格式化显示
一般html

<head>
<title>前端页面展示json格式化显示</title>
</head>
 
<body>
<p id="noraml_show">{ "filename": "Bugdoc", "counter":"23", "password": "2883279.." }</p>
<pre id="form_show"></pre>
 
</body>
<script type="text/javascript">
 
　 var text = document.getElementById('noraml_show').innerText; //获取json格式内容
  
   var result = JSON.stringify(JSON.parse(text), null, 2);//将字符串转换成json对象
 
   document.getElementById('form_show').innerText= result ;
</script>
显示结果 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20191203101327151.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlbnJ5MXpoYW8=,size_16,color_FFFFFF,t_70)
henry1zhao
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html页面展示json数据并格式化
再见，再也不见
11-01 1万+
json数据在html页面展示并格式化 一、展现效果图 描述信息： key值全部采用红色标出，表示重要参数； value值采用不同颜色标出，数值类型的采用橘黄色，字符串采用绿色，布尔采用蓝色。。。 二、源代码展示 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content=...
前端页面展示JSON格式化的字符串
06-18
NULL 博文链接：https://aoyouzi.iteye.com/blog/2331323
Js选择大学的弹出框 JSON数据格式
weixin_34343308的博客
09-03 241
效果预览: http://jsfiddle.net/dtdxrk/8v6Yw/embedded/result/ Js选择大学的弹出框 JSON数据格式 制作过程 看别人用jquery做的 自己再用原生的写一个 js数据地址 http://files.cnblogs.com/technology/school.js 1.创建html css 2.点击input显示学校div 3.控制学...
后端返回json字符串，前端分层级展示
最新发布
bantoumingasong的博客
07-31 170
1.先把json字符串转化为js对象，因为这是一个多层级对象，所以采用。后端返回一个json字符串，包含内容是一个多层级对象。把js对象转化为json字符串，并序列化处理。标签展示序列化的json字符串，效果如下。需求是要展示为下面的效果。
WEB浏览器页面上可视化展示JSON数据的方法
轻狂书生FS的博客
09-02 9020
0 、引言 最近需要做一个接口管理的功能，需要在前端页面展示从接口获取到的json数据，我上网查了一些资料，发现有 jquery的一个插件可以使用:jQuery.json-viewer。页面展示的效果很好，但是需要安装npm包来实现。那么有没有不用安装npm包又能实现同样功能的方法呢？我继续搜索，终于发现了一个非常简单的方法： 1、实现方法（不用JSON-Viewer） 方法其实很简单，直...
一起来做一个json格式化工具吧
sinat_33488770的博客
06-26 2509
本文从头实现了一个简单的json格式化工具，如果有更好的实现欢迎评论区见。这个小工具也发布到了npm。。有缘再会~
flask bootstrap页面json格式化
09-08
本篇文章将深入探讨如何在Flask应用中结合Bootstrap来展示和格式化JSON数据。 首先，确保已安装了Flask、Bootstrap和相关的依赖。可以使用以下命令安装： ```bash pip install flask flask-bootstrap ``` 接下来...
json数据在Html页面格式化显示
11-01
在描述中提到的“采用光标事件格式化展示”，意味着在页面上，当用户通过鼠标光标选中或点击某部分JSON数据时，会以某种方式（如高亮、折叠展开等）进行格式化显示，以便于查看和对比接口文档。 要实现这样的功能，...
前端必备的谷歌浏览器JSON可视化插件：JSON-Handle
05-27
然而，原始的JSON字符串往往难以理解和调试，这时就需要借助工具进行格式化和可视化。 "JSON-Handle"是一个专为前端开发者设计的谷歌浏览器插件，它提供了一种高效的方式来查看和处理JSON数据。该插件的核心功能...
页面JSON格式化
Allen_kai_hui的博客
09-07 727
前端页面JSON格式化
前端JSON格式化显示
大话家的博客
07-28 3974
一、现状 项目开发过程中，遇到JSON字符串回显的情况。直接显示的话，效果很丑，不方便查看。 因此，需要在前端页面对JSON进行格式化显示，期望可以实现如下效果。 JSON格式化解析网站：https://www.json.cn/ 二、分析该网站解析的实现 通过浏览器的开发者工具，我们可以获取到该网站解析JSON所依赖的最基础的css和js，如下： <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.j.
前端显示json格式化
php-yyds
12-27 3647
用户可以在文本框中输入JSON数据，然后点击"格式化JSON"按钮，就可以看到格式化后的JSON数据在页面上展示出来了。这样，格式化的JSON数据就会显示在指定的HTML元素中。获取JSON数据：首先，你需要获取要展示的JSON数据。格式化JSON：使用JavaScript的JSON对象，可以将JSON数据转换为字符串，并使用。然后，我们添加了一个按钮，当用户点击按钮时，会调用。方法将JSON对象格式化为字符串，并将格式化后的JSON字符串赋值给。函数中，我们首先获取用户输入的JSON数据，并使用。
探囊取物之前端常见数据JSON格式化
renyuhost的博客
11-28 581
Cookie转化为JSON对象,头数据转化为JSON对象,深度格式字符串为JSON对象
前端实现json数据格式化展示
Kuroko's Development Notes
05-23 1万+
1. 故事前景： 后端返回给前端一串json字符串，前端需要做格式化处理并将其美观地展示给用户。 2. 效果演示： 3. 实现代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte...
JSON前端页面解析
weixin_30315435的博客
07-11 457
JSON 指的是 JavaScript 对象表示法（JavaScriptObjectNotation） JSON 是轻量级的文本数据交换格式 JSON 独立于语言* JSON 具有自我描述性，更易理解 JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 这个 employe...
前端显示格式化后的json
几钱清风
01-18 2876
var data = { "extendId": "string", "objectCode": "string", "objectType": 0, "mayouchen":{ "name":"youchen", "age&quo
JSON字符格式化后在前端展示或者格式化文本域的JSON
山海一哥的博客
06-21 2420
repeat (s, count) { return new Array(count + 1).join(s) }, formatJson (json) { var i = 0, il = 0, tab = " ", newJson = "", indentLevel = 0, ...
几种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...
前端将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、付费专栏及课程。

余额充值