将javascript中的JSON输出为不带jquery的列表答案

【问题标题】：Output JSON in javascript as a list without jquery将javascript中的JSON输出为不带jquery的列表
【发布时间】：2012-08-29 05:36:30
【问题描述】：

我有一个 JSON 对象：

var txt = '{"employees":[' +
'{"firstName":"John","lastName":"Doe","time":"9:15am","email":"john_doe@gmail.com" },' +
'{"firstName":"Anna","lastName":"Smith","time":"9:15am","email":"anna@gmail.com" },' +
'{"firstName":"Peter","lastName":"Jones" ,"time":"9:15am","email":"peter@gmail.com"}]}';

我想在 div 语句之间打印为列表：

约翰·多伊
上午 9 点 15 分
john_doe@gmail.com
安娜·史密斯
上午 9 点 15 分
anna@gmail.com
彼得·琼斯
上午 9 点 15 分
peter@gmail.com

我尝试填充的 HTML 如下所示：

    <div class="info">
        <ul>
            <li id="name"></li>
            <li id="time"></li>
            <li id="email"></li>
        </ul>
    </div>

我该如何做到这一点？

<!DOCTYPE html>
<html>
<body>
<h2>Create Object from JSON String</h2>
<div id="output">

</div> 
<script type="text/javascript">
var txt = '{"employees":[' +
'{"firstName":"John","lastName":"Doe","time":"9:15am","email":"john_doe@gmail.com" },' +
'{"firstName":"Anna","lastName":"Smith","time":"9:15am","email":"anna@gmail.com" },' +
'{"firstName":"Peter","lastName":"Jones" ,"time":"9:15am","email":"peter@gmail.com"}]}';

var employees=JSON.parse(txt).employees;
var container=document.getElementById("output");

for (i=0;i<employees.length;i++) { //Loops for the length of the list
    var info=document.createElement('div');
    info.className='info'; //Creates a new <div> element and adds the class info to it

    var ul=document.createElement('div'); //Creates <ul> element
    info.appendChild(ul); //Adds the <ul> to the newly created <div>

    var name=document.createElement('li');
    name.className='name'; //Should use class, not id, as ID must be unique
    name.innerHTML=employees[i].firstName+' '+employees[i].lastName; //Adds name
    ul.appendChild(name);

    var time=document.createElement('li');
    time.className='time';
    time.innerHTML=employees[i].time;
    ul.appendChild(time);

    var email=document.createElement('li');
    email.className='email';
    email.innerHTML=employees[i].email;
    ul.appendChild(email);

    container.appendChild(info); //Adds the final generated HTML to the page

} //Will repeat for each item in list.

</script>
</body>
</html>

【问题讨论】：

你在使用 jQuery 吗？（使事情变得更容易，但不是绝对必要的。）
@Brad 我宁愿不使用 jquery
如果你计划有多个“信息”分组，你不应该使用 id's name/time/email。
您应该使用class 而不是id 来识别姓名、时间和电子邮件，因为您最终会得到它们的多个实例。
rlemon.github.com/FragBuilder.js 可能对你有用

标签： javascript html json

【解决方案1】：

首先，把你的字符串变成一个对象：

var employees=JSON.parse(txt).employees;

然后，设置一个循环来构造 HTML

var container=//Link to the containing element using getElementById or similar

for (i=0;i<employees.length;i++) { //Loops for the length of the list
    var info=document.createElement('div');
    info.className='info'; //Creates a new <div> element and adds the class info to it

    var ul=document.createElement('div'); //Creates <ul> element
    info.appendChild(ul); //Adds the <ul> to the newly created <div>

    var name1=document.createElement('li'); //Chrome seems not to like the variable "name" in this instance
    name1.className='name'; //Should use class, not id, as ID must be unique
    name1.innerHTML=employees[i].firstName+' '+employees[i].lastName; //Adds name
    ul.appendChild(name1);

    var time=document.createElement('li');
    time.className='time';
    time.innerHTML=employees[i].time;
    ul.appendChild(time);

    var email=document.createElement('li');
    email.className='email';
    email.innerHTML=employees[i].email;
    ul.appendChild(email);

    container.appendChild(info); //Displays the elements on the page

} //Will repeat for each item in list.

这也可以使用container.innerHTML 来实现，但是构造这样的元素会混淆 DOM，因此通常只建议用于文本节点，但最好还是使用document.createTextNode()。

【讨论】：

这似乎适用于 jsfiddle，但不适用于我的本地机器，是否需要下载任何类型的库或 API？
JSON 对象内置在 Javascript 中，因此您无需为此担心任何库。至于其余的，它同样是标准的 Javascript，所以实际上这取决于您如何实现它。请注意，直接运行它不会起作用，因为您引用为 container 的对象可能在 DOM 中尚不存在；您至少必须等待页面加载完成。
原来的问题是我的 test.html 程序，你能看看我是否遗漏了什么吗？我似乎无法让它工作。
我逐个字符地复制了它，并将其加载为.htm 文件；非常适合我。你用的是什么浏览器？
似乎是使用了变量名name，这是Chrome不喜欢的；将其更改为任何其他名称都可以正常工作，例如name1。我已经编辑了我的帖子以反映这一点。

【解决方案2】：

首先你通过解析得到 JSON 字符串中的数组：

var employees = JSON.parse(txt).employees

然后你像这样创建 HTML 元素

var element = document.createElement('div'); // creates an empty div

然后你把 HTML 树放在一起

someElement.append(otherElement); // makes otherElement a child of someElement

【讨论】：