Convert JSON Data to HTML


好了,我们已经从JSON API中获得了数据,现在把它们展现到我们的HTML页面中吧。

这里,我们使用.forEach()函数来循环遍历JSON数据写到htmll变量中。

首先我们定义一个HTML变量,
var html = "";

然后,我们使用.forEach()函数来循环遍历JSON数据写到html变量中,最后把html变量显示到我们的页面中。

整个过程的代码如下:

json.forEach(function(val) {
var keys = Object.keys(val);
html += "<div class = 'cat'>";
keys.forEach(function(key) {
html += "<b>" + key + "</b>: " + val[key] + "<br>";
});
html += "</div><br>";
});

提示:示例中难点在于两个forEach循环,而且里面夹杂有字符串拼接,这是最头疼也最容易出错的地方。

Run tests (ctrl + enter)