如何顯示JSON單級菜單

Question

我有從特定文件夾中所有鏈接圖像json文件，這樣

["http://img1.png","http://img2.png","http://img3.png","http://img4.png"] 

我想創建一個<ul>名單的，但我不知道怎麼辦。 有人可以幫我一個小例子嗎？

感謝

Answer 1

使用JSON可以連接http://shared1.ad-lister.co.uk/GetImagesList.aspx?contextId=c9d56aca-506c-40be-9068-037d0fba62c9&Folder=_design/car-marques

$.post("http://shared1.ad-lister.co.uk/GetImagesList.aspx?contextId=c9d56aca-506c-40be-9068-037d0fba62c9&Folder=_design/car-marques", function (json) { 

    var html = '<ul>'; 
    for (var i = 0; i < json.length; i++) { 
     html += '<li><img src="'+json[i]+'" /></li>'; 
    } 
    html += '</ul>'; 

    $('.contents').html(html); 
}); 

Answer 2

var urls = ["http://img1.png","http://img2.png","http://img3.png","http://img4.png"]; 

var ul = $('<ul>'); 

for (var i = 0; i < urls.length; i++) { 
    var li = $('<li>'); 
    li.appendTo(ul); 
    $('<img>').attr('src', urls[i]).appendTo(li); 
} 

var container = $('#container'); 
container.append(ul); 

Answer 3

假設您已經解析成一個數組arr，你可以這樣做：

var ul = $('<ul/>').append(arr.map(function(i) { 
    return '<li><img src="'+i+'" /></li>'; 
}).join()); 

哪裏arr是["http://img1.png","http://img2.png","http://img3.png","http://img4.png"]

Answer 4

試試這個

var arr_images = ["http://img1.png","http://img2.png","http://img3.png","http://img4.png"]; 

var html = '<ul>'; 
for(var i=0; i<arr_images.length; i++) 
{ 
    var img_url = arr_images[i]; 
    html += '<li>'; 
    html += '<img src="'+img_url+'" />'; 
    html += '</li>'; 
} 
html += '</ul>'; 

document.getElementById('your_div_id').innerHTML = html; 

Answer 5

您可以通過jQuery的API使用map功能

var json = ["http://img1.png","http://img2.png","http://img3.png","http://img4.png"] 
var div ='<ul>'; 
json.map(function (text){ 
    div += '<li><img src="'+ text + '" /></li>' 
    }); 
div += '</ul>' 

$("containerSelector").append(div)