欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2024年03月02日 09:08:28   作者：PHP隔壁老王鄰居  
項(xiàng)目開(kāi)發(fā)過(guò)程中遇到JSON字符串回顯的情況,直接顯示的話效果很丑,不方便查看,因此需要在前端頁(yè)面對(duì)JSON進(jìn)行格式化顯示,下面這篇文章主要給大家介紹了關(guān)于前端顯示json格式化的相關(guān)資料,需要的朋友可以參考下

實(shí)現(xiàn)效果

在前端頁(yè)面上展示格式化的JSON數(shù)據(jù)可以通過(guò)以下步驟完成：

  • 獲取JSON數(shù)據(jù)：首先，你需要獲取要展示的JSON數(shù)據(jù)。你可以從后端API獲取數(shù)據(jù)，或者直接在前端定義一個(gè)JSON對(duì)象。

  • 格式化JSON：使用JavaScript的JSON對(duì)象，可以將JSON數(shù)據(jù)轉(zhuǎn)換為字符串，并使用JSON.stringify()方法進(jìn)行格式化。例如：

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

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

這里的2表示縮進(jìn)的空格數(shù)，用于展示更好的可讀性。

  • 在頁(yè)面上展示：將格式化后的JSON字符串插入到HTML元素中，例如一個(gè)<pre>標(biāo)簽或一個(gè)<code>標(biāo)簽，這樣可以保留JSON的格式。例如：
<pre id="jsonContainer"></pre>

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

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

這樣，格式化的JSON數(shù)據(jù)就會(huì)顯示在指定的HTML元素中。請(qǐng)注意，這只是一種基本的展示方法，你可以根據(jù)需求進(jìn)行樣式化和其他定制化處理。

以下是一個(gè)示例代碼，允許用戶輸入JSON數(shù)據(jù)，并在前端頁(yè)面上顯示格式化后的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數(shù)據(jù)"></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數(shù)據(jù)無(wú)效，請(qǐng)檢查格式！");
        return;
      }

      var formattedJson = JSON.stringify(jsonData, null, 2);
      document.getElementById("jsonContainer").textContent = formattedJson;
    }
  </script>
</body>
</html>

在上述代碼中，我們添加了一個(gè)<textarea>元素，允許用戶在其中輸入JSON數(shù)據(jù)。然后，我們添加了一個(gè)按鈕，當(dāng)用戶點(diǎn)擊按鈕時(shí)，會(huì)調(diào)用formatJson()函數(shù)。

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

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

你可以將上述代碼保存為一個(gè)HTML文件，并在瀏覽器中打開(kāi)該文件。用戶可以在文本框中輸入JSON數(shù)據(jù)，然后點(diǎn)擊"格式化JSON"按鈕，就可以看到格式化后的JSON數(shù)據(jù)在頁(yè)面上展示出來(lái)了。

附：前端彈窗展示JSON數(shù)據(jù)

在頁(yè)面彈窗展示json數(shù)據(jù)，需要換行展示，在這里有兩種情況：

1、數(shù)據(jù)庫(kù)存的json數(shù)據(jù)換行，為標(biāo)準(zhǔn)展示格式：

這種情況下，獲取到后端數(shù)據(jù)后，前端只需要進(jìn)行以下操作：

…

直接將后端數(shù)據(jù)展示：

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;

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

2、數(shù)據(jù)庫(kù)存的數(shù)據(jù)為字符串類型的json數(shù)據(jù)，無(wú)換行，無(wú)空格。

這種情況下，獲取到后端數(shù)據(jù)后，前端需要將字符串進(jìn)行JSON轉(zhuǎn)換

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>

這里推薦使用第二種方式，不論是數(shù)據(jù)庫(kù)存儲(chǔ)數(shù)據(jù)方面，還是頁(yè)面展示效果方面來(lái)說(shuō)，第二種都比較友好一點(diǎn)。

總結(jié)

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

相關(guān)文章

最新評(píng)論