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

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

javascript html json

将javascript中的JSON输出为不带jquery的列表,javascript,html,json,Javascript,Html,Json,我有一个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":

我有一个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
约翰_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>


从JSON字符串创建对象
var txt='{“员工”：['+
“{”姓“：”约翰“，”姓“：”能源部“，”时间“：”上午9点15分“，”电子邮件“：”约翰“，”_doe@gmail.com" },' +
“{”姓氏“：”安娜“，”姓氏“：”史密斯“，”时间“：”上午9点15分“，”电子邮件“：”anna@gmail.com" },' +
“{”姓“：”彼得“，”姓“：”琼斯“，”时间“：”上午9点15分“，”电子邮件“：”peter@gmail.com"}]}';
var employees=JSON.parse（txt）.employees；
var container=document.getElementById（“输出”）；
对于（i=0；i），首先通过解析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

首先，将字符串转换为对象：
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.

var container=//使用getElementById或类似工具链接到包含的元素
对于（i=0；i您是否使用jQuery？（使事情变得更简单，但并非绝对必要。）@Brad如果您计划拥有多个“信息”，我宁愿不使用jQuery分组，您不应该使用id来表示名称/时间/电子邮件。您应该使用类而不是id
来标识名称、时间和电子邮件，因为您将得到它们的多个实例。这可能对您有用这似乎适用于JSFIDLE，但不适用于我的本地计算机，是否有任何类型的库或API需要下载对象内置于Javascript中，因此您无需担心任何库。至于其余的，它同样是标准Javascript，因此实际上这取决于您如何实现它。请注意，直接运行此操作将不起作用，因为您引用为容器的对象可能在DOM中还不存在；您将必须等待pageload至少完成。原始问题是我的test.html程序，你能看到我是否遗漏了什么吗？我似乎无法让它正常工作。我一个字符一个字符地复制了它，并将其加载为一个.htm
文件；对我来说工作得很好。你使用的浏览器是什么？它似乎使用了变量名，name
，这是Chrome不喜欢的；将其更改为任何其他名称都可以，例如name1
。我编辑了我的帖子以反映这一点。