腳本之家服務器常用軟件

快捷導航

前端顯示json格式化示例代碼

更新時間：2024年03月02日 09:08:28 作者：PHP隔壁老王鄰居

項目開發(fā)過程中遇到JSON字符串回顯的情況,直接顯示的話效果很丑,不方便查看,因此需要在前端頁面對JSON進行格式化顯示,下面這篇文章主要給大家介紹了關于前端顯示json格式化的相關資料,需要的朋友可以參考下

實現效果

在前端頁面上展示格式化的JSON數據可以通過以下步驟完成：

獲取JSON數據：首先，你需要獲取要展示的JSON數據。你可以從后端API獲取數據，或者直接在前端定義一個JSON對象。
格式化JSON：使用JavaScript的JSON對象，可以將JSON數據轉換為字符串，并使用JSON.stringify()方法進行格式化。例如：

var jsonData = {
  "name": "John",
  "age": 30,
  "city": "New York"
};

var formattedJson = JSON.stringify(jsonData, null, 2);

這里的2表示縮進的空格數，用于展示更好的可讀性。

在頁面上展示：將格式化后的JSON字符串插入到HTML元素中，例如一個<pre>標簽或一個<code>標簽，這樣可以保留JSON的格式。例如：

<pre id="jsonContainer"></pre>

然后，使用JavaScript將格式化的JSON字符串賦值給該元素的內容：

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

這樣，格式化的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()">格式化JSON</button>
  <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>

在上述代碼中，我們添加了一個<textarea>元素，允許用戶在其中輸入JSON數據。然后，我們添加了一個按鈕，當用戶點擊按鈕時，會調用formatJson()函數。

在formatJson()函數中，我們首先獲取用戶輸入的JSON數據，并使用JSON.parse()方法嘗試將其解析為JSON對象。如果解析失敗，將彈出一個警告框提示用戶輸入的JSON數據無效。

如果解析成功，我們將使用JSON.stringify()方法將JSON對象格式化為字符串，并將格式化后的JSON字符串賦值給jsonContainer元素的內容，以在頁面上顯示。

你可以將上述代碼保存為一個HTML文件，并在瀏覽器中打開該文件。用戶可以在文本框中輸入JSON數據，然后點擊"格式化JSON"按鈕，就可以看到格式化后的JSON數據在頁面上展示出來了。

附：前端彈窗展示JSON數據

在頁面彈窗展示json數據，需要換行展示，在這里有兩種情況：

1、數據庫存的json數據換行，為標準展示格式：

這種情況下，獲取到后端數據后，前端只需要進行以下操作：

…

直接將后端數據展示：

ts部分：

openInformationDialog(row) {
  isShowInfoDialog.value = true
  if (row) {
	informationJSON.value = row
  }
}

div部分：

  &lt;div style="white-space: pre-line"&gt;
    &lt;pre&gt;{{informationJSON}}&lt;/pre&gt;
  &lt;/div&gt;

存在的問題，空格不展示，只有換行，后面需要探究一下。

2、數據庫存的數據為字符串類型的json數據，無換行，無空格。

這種情況下，獲取到后端數據后，前端需要將字符串進行JSON轉換

ts部分：

openInformationDialog(row) {
  isShowInfoDialog.value = true
  if (row) {
    informationJSON.value = JSON.stringify(JSON.parse(row), null, 4)
  }
}

div部分：

 <div style="white-space: pre-line">
    <pre>{{informationJSON.value}}</pre>
 </div>

這里推薦使用第二種方式，不論是數據庫存儲數據方面，還是頁面展示效果方面來說，第二種都比較友好一點。

總結

到此這篇關于前端顯示json格式化的文章就介紹到這了,更多相關前端顯示json格式化內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

前端顯示json格式化示例代碼

相關文章

最新評論

大家感興趣的內容

最近更新的內容

常用在線小工具