使用JSON生成HTML元素，多个类名和id。 - 没有JQuery

Question

我一直在使用JS和CSS在codepen上构建虚拟rubik的立方体。 - 请原谅我任何明显的愚蠢，我在JS编写不到3个月，不到1个月。

我目前已经制作了两个版本，但是对于版本3，我需要使用JSON和JS循环结构尽可能多地生成HTML。尽管对JSON进行了大量的阅读，但我无法理解使用它生成HTML的概念，就像我使用标准JS数组一样。请参阅codepen link-- 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。

---

另一方面，不要学习语言本身。了解 如何使用该语言。最后，您将了解使用库时跳过的其他怪癖。另外，不要培养"Not Invented Here" Philosophy。这只是浪费你的时间。花更多的时间在事情上。

Answer 3

首先，我相信您需要将该JSON转换为Javascript。看看这个伟大的答案Parse JSON in JavaScript?。现在，对于不支持转换的浏览器，建议使用库。如果你想手动完成，JSON解析器就是一个独立的项目。

完成后，您可以操纵对象iterate through them

并根据您的JSON数据开始吐出html。