使用JSON生成HTML元素，多個類名和ID。 -沒有JQuery

Question

我一直在僅使用JS和CSS在codepen上構建虛擬rubik的多維數據集。 -原諒我任何明顯的愚蠢，我用JS編碼的時間少於3個月，而編碼的時間少於1個月。

我目前有兩個版本，但是對於版本3，我需要使用JSON和JS循環結構生成盡可能多的HTML。 盡管在JSON方面進行了大量的閱讀，但我還是無法像使用標准JS數組那樣完全理解使用它生成HTML的概念。 參見codepen鏈接-http : //codepen.io/Peachey_A/pen/hEcDH

雖然我使用了一些JQuery在版本2中添加類屬性； 我想在生成過程中避免使用它，因為我的目標是在不參與庫之前先了解JS。

對於特定網站或代碼段示例的任何建議，將不勝感激。

謝謝

Answer 1

至於處理JSON，我建議您使用一個庫（如果您的瀏覽器本身不支持它），但是如果您想擺脫jQuery，則應該看看http://youmightnotneedjquery.com/

Answer 2

JSON是一種傳輸格式，而不是布局語言/標記語言。 您需要一些JS來解析和理解其隨附的數據， 以及一些HTML生成工具才能將其轉換為HTML。

如果需要，可以構建一個解析器 ， 但這會花費太多時間 。 那對您學習語言沒有太大幫助。 此外，jQuery具有內置的解析器，這將已經很有幫助。

var div = $('<div/>',{id : 'foo'})[0]; // instant <div id="foo"></div>

從JS對象生成HTML的其他工具是模板庫，例如Mustache和Handlebars。

---

附帶說明，不要學習語言本身。 了解如何使用該語言。 最終，您將了解使用庫時跳過的其他怪癖。 另外，不要樹立“這里沒有發明”的哲學 。 只是浪費您的時間。 花更多的時間在這樣的事情上。

Answer 3

首先，我相信您需要將JSON轉換為Javascript。 看看這個很棒的答案，用JavaScript解析JSON嗎？ 。 現在，對於不支持轉換的瀏覽器，建議使用庫。 如果您想手工完成，JSON解析器本身就是一個項目。

完成操作后，您就可以操作對象， 遍歷它們

然后根據您的JSON數據開始吐出html。