Json到html ul列表.纯javascript

Json to html ul list. Pure javascript

本文关键字：javascript 列表 ul html Json      更新时间：2023-09-26

如何将json响应转换为html ul列表？

{
    "subject": [
        "The subject field is required."
    ],
    "message": [
        "The message field is required."
    ]
}

到这个

<ul>
    <li>The subject field is required</li>
    <li>The message field is required</li>
</ul>

并在某些div 中显示

<div id="errors"></div>

试试这个：

var parent = document.createElement("ul");
document.body.appendChild(parent);
var obj = {
    "subject": [
        "The subject field is required."
    ],
    "message": [
        "The message field is required."
    ]
}
var keys = Object.keys(obj);
for(var i = 0; i < keys.length; i++) {
  var child = document.createElement("li");
  child.innerHTML = obj[keys[i]][0];
  parent.appendChild(child);
}

有很多方法，但对我来说最直观的是将HTML构建为字符串，然后使用element.innerHTML属性将HTML字符串注入div元素中

要构建HTML，请执行类似的操作

var theHTMLString = "<ul>";
for(var propertyName in myObject) {
   theHTMLString += "<li>" + myObject[propertyName] + "</li>";
}
theHTMLString += "</ul>";

注意：如果JSON响应可能包含HTML，例如：

</li>

那么以上内容将创建格式错误的HTML，因此您可能需要探索HTML编码：

http://jsfiddle.net/thinkingstiff/fsau2/

或者，您可能希望使用.createElement((函数和innerText而不是innerHTML以避免编码问题。

一旦你完成了这项工作，你就需要将div作为一个JS对象来访问，这样你就可以用它做一些事情。最简单的方法是：

var theDiv = document.getElementById( "errors" );

现在，我们已经为对象和我们想要注入到其中的HTML，只需使用将HTML添加到div…

theDIV.innerHTML = theHTMLString;
相关文章：