前端显示json格式化

• 前端

实现效果

在这里插入图片描述

在前端页面上展示格式化的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);

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

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


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


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



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


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




    用户输入JSON格式化展示
  用户输入JSON格式化展示
  
    pre {
      background-color: #f5f5f5;
      padding: 10px;
    }
  


  
  

  
  

  


    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;
    }


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