亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

實現(xiàn)效果

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1、數(shù)據(jù)庫存的json數(shù)據(jù)換行，為標準展示格式：

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

…

直接將后端數(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;

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

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

這種情況下，獲取到后端數(shù)據(jù)后，前端需要將字符串進行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ù)庫存儲數(shù)據(jù)方面，還是頁面展示效果方面來說，第二種都比較友好一點。

總結(jié)

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

相關文章

最新評論