在< ul>< li>中转换JSON文件使用纯Javascript [英] Convert JSON file in <ul><li> using plain Javascript

查看:126
本文介绍了在< ul>< li>中转换JSON文件使用纯Javascript的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个包含以下内容的JSON文件:

I have JSON file that contains :

{
    "age": 0,
    "id": "motorola-xoom-with-wi-fi",
    "imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg",
    "name": "Motorola XOOM\u2122 with Wi-Fi",
    "snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)."
},

我需要通过使用普通javascript将其显示为"ul""li"列表 我写了这段代码,但是没用:

Im need to somehow display it as "ul" "li" list by using plain javascript I wrote this code but it doesn't work:

function createList(){
    var arr = JSON.parse(phones);
    var out = "<ul>";
    for(var i = 0; i < arr.length;i++){
        out+="<li>" + arr[i].age + arr.id[i]+
        arr[i].imageUrl + arr[i].name + arr[i].snippet + "</li>";
    }

    out+= "</ul>";
    document.getElementById("div1").innerHTML = out;
}

推荐答案

尝试一下

var phones = {"age" : "0",  "id" : "motorola-xoom-with-wi-fi",  "imageUrl" : "img/phones/motorola-xoom-with-wi-fi.0.jpg",   "name" : "Motorola XOOM\u2122 with Wi-Fi",  "snippet" : "The Next Next Generation Experience the future with Motorola XOOM with Wi-Fi, the worlds first tablet powered by Android 3.0 (Honeycomb)."};

   var arr = phones;
   console.log(arr);
   var out = "<ul><li> age : " + arr.age + "</li><br><li> id : " + arr.id + "</li><br><img src='" + arr.imageUrl + "'/></li><br><li> name : " + arr.name + "</li><br><li> snippet : " + arr.snippet + "</li>"
   document.getElementById("div1").innerHTML = out;

这篇关于在&lt; ul&gt;&lt; li&gt;中转换JSON文件使用纯Javascript的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆