從JSON文件創建UI /寫入HTML

我有一個由Lighthouse生成的非常長，笨拙，未格式化的JSON文件（一種執行頁面加載時間分析的工具 - 因此該文件具有測試結果）。爲了使其格式化爲人們可讀，我需要在這個文件周圍創建一個UI。我的問題是，我不知道如何開始工作。從JSON文件創建UI /寫入HTML

我已經閱讀過有關從JSON對象創建HTML的內容，我想我會嘗試在瀏覽器中顯示測試中的所有信息......但我會在哪裏寫這些內容？我現在有一個Node.js文件，它正在運行測試並使用JSON.stringify()將JSON結果粘貼到文件中。創建JSON後，我可以生成HTML嗎？（和主要問題 - 我將如何從JSON文件創建HTML？）

我剛剛開始與Node和JSON，任何提示都非常感謝。

來源

2017-07-25 P. Po

是的，您可以從JSON文件創建HTML。

下面是與jQuery完成的，首先創建的所有元素的陣列，並且然後使用.join("")解析它們一個簡單的例子。一旦解析，就可以簡單地在任何地方在DOM附加：

var json_file = { 
 
    "one": "Hi there", 
 
    "two": "Another item", 
 
    "three": "Third item" 
 
} 
 

 
var items = []; 
 

 
$.each(json_file, function(key, val) { 
 
    items.push("<li id='" + key + "'>" + val + "</li>"); 
 
}); 
 

 
$("<ul/>", { 
 
    "class": "json-list", 
 
    html: items.join("") 
 
}).appendTo("body"); 
 

 
// Sample extension showcasing manipulation of inserted HTML 
 
$(".json-list #two").css('color', 'red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

顯然，更復雜的JSON（與指定的HTML結構），解析JSON的更復雜的方法是將。

模板引擎會使你的工作變得更容易，和hunderds這些。一些比較流行的是：

希望這有助於！ :)

來源

2017-07-25 23:38:20

無論我是否使用模板引擎，在我看來，有一些手動方面來格式化HTML /指定我需要從JSON文件中得到什麼信息。這個文件可能是一百萬行，並且根本沒有格式化（這是textedit中的一大塊文本，當我用崇高的文本打開它時，只有一行非常長的行）。我想我必須將我的測試結果放入非JSON文件並找出另一種顯示方式。 –

嗯，我正在挖掘一個文件的怪物，現在我需要顯示的元素（和我使用的是鬍鬚）的名稱。我從上面給出的例子開始，但現在我已經切換到創建和編輯package.json文件。具體來說，我正在編輯「腳本」，以便可以使用cli命令生成模板。 –

從JSON文件創建UI /寫入HTML

回答

相關問題