Jquery從數據對象中獲取鏈接值

Question

我不能爲我的生活弄清楚如何訪問這個對象中的值。任何幫助將大大降低

最終目標，一旦我可以訪問鏈接，我會迭代每個並追加和img標記到images-header元素之後的dom。

JS消耗JSON

$("#stack_name").focusout(function() { 
    var name = $(this).val(); 
    // alert(name); 

    $.getJSON('/images.json?name='+ name, function(data) { 
    console.log("DATA: ", data); 
    // $('<p>Test</p>').appendTo('.images-header'); 
    }); 
}); 

控制檯日誌輸出：

DATA: 
Object {data: Object} 
data: Object 
images: Array[4] 
0: "http://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Connecticut_in_United_States.svg/270px-Connecticut_in_United_States.svg.png" 
1: "http://www.enchantedlearning.com/usa/states/connecticut/map.GIF" 
2: "https://familysearch.org/learn/wiki/en/images/0/01/Connecticut-county-map.gif" 
3: "http://www.ct.gov/ecd/lib/ecd/20/14/state%2520of%2520connecticut%2520county%2520outline.jpg" 
length: 4 
__proto__: Array[0] 
__proto__: Object 
__proto__: Object 
app-init.js?body=1:15 

/images.json?name=connecticut

{ 
"data": { 
"images": [ 
"http://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Connecticut_in_United_States.svg/270px-Connecticut_in_United_States.svg.png", 
"http://www.enchantedlearning.com/usa/states/connecticut/map.GIF", 
"https://familysearch.org/learn/wiki/en/images/0/01/Connecticut-county-map.gif", 
"http://www.ct.gov/ecd/lib/ecd/20/14/state%2520of%2520connecticut%2520county%2520outline.jpg" 
] 
} 
} 

Answer 1

您可以訪問圖像陣列這樣，你也可以選擇使用$.parseJSON

img1 = jsonObj.data.Images[0]; 

Live Demo

解析JSON字符串可以使用循環遍歷數組迭代

for(i=0; i < jsonObj.data.images.length; i++) 
{ 
    alert(jsonObj.data.images[i]); 
} 

Answer 2

嘗試

Fiddle Demo

$("#stack_name").focusout(function() 
{ 
    var name = $(this).val(); 

    $.getJSON('/images.json?name='+ name, function(data) 
    { 
    var images = data.data.images; 
    var $header = $('.images-header'); 

    for(var index in images) 
    { 
     var $image = $('<img><img/>'); 
     var link = images[index]; 

     $image.attr("src", link); 
     $header.append($image); 
    } 

    }); 
});