您现在的位置是：首页 > 技术教程 正文

前端显示json格式化

admin 阅读： 2024-03-28
后台-插件-广告管理-内容页头部广告（手机）

实现效果
在这里插入图片描述

在前端页面上展示格式化的JSON数据可以通过以下步骤完成：

  1. 获取JSON数据：首先，你需要获取要展示的JSON数据。你可以从后端API获取数据，或者直接在前端定义一个JSON对象。

  2. 格式化JSON：使用JavaScript的JSON对象，可以将JSON数据转换为字符串，并使用JSON.stringify()方法进行格式化。例如：

var jsonData = { "name": "John", "age": 30, "city": "New York" }; var formattedJson = JSON.stringify(jsonData, null, 2);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

这里的2表示缩进的空格数，用于展示更好的可读性。

  1. 在页面上展示：将格式化后的JSON字符串插入到HTML元素中，例如一个标签或一个标签，这样可以保留JSON的格式。例如：
<pre id="jsonContainer">pre>
  • 1

然后，使用JavaScript将格式化的JSON字符串赋值给该元素的内容：

document.getElementById("jsonContainer").textContent = formattedJson;
  • 1

这样，格式化的JSON数据就会显示在指定的HTML元素中。请注意，这只是一种基本的展示方法，你可以根据需求进行样式化和其他定制化处理。

以下是一个示例代码，允许用户输入JSON数据，并在前端页面上显示格式化后的JSON：

DOCTYPE html> <html> <head> <title>用户输入JSON格式化展示title> <title>用户输入JSON格式化展示title> <style> pre { background-color: #f5f5f5; padding: 10px; } style> head> <body> <textarea id="jsonInput" rows="10" cols="50" placeholder="在这里输入JSON数据">textarea> <br> <button onclick="formatJson()">格式化JSONbutton> <br> <pre id="jsonContainer">pre> <script> function formatJson() { var jsonInput = document.getElementById("jsonInput").value; var jsonData; try { jsonData = JSON.parse(jsonInput); } catch (error) { alert("输入的JSON数据无效，请检查格式！"); return; } var formattedJson = JSON.stringify(jsonData, null, 2); document.getElementById("jsonContainer").textContent = formattedJson; } script> body> html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37

在上述代码中，我们添加了一个