转换JSON文件 <ul><li> 使用纯Javascript

Question

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)."
},

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;
}

Answer 1

Phones needs to be an array and you had a syntax error on one of the array derefs:

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\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)."
    }];

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

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

Answer 2

try this

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;