2013-07-21 36 views
0

我不能为我的生活弄清楚如何访问这个对象中的值。任何帮助将大大降低Jquery从数据对象中获取链接值

最终目标,一旦我可以访问链接,我会迭代每个并追加和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 

enter image description here

/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" 
] 
} 
} 

回答

1

您可以访问图像阵列这样,你也可以选择使用$.parseJSON

img1 = jsonObj.data.Images[0]; 

Live Demo

解析JSON字符串可以使用循环遍历数组迭代

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

感谢您的答复。无法得到这个工作。我得到了第一个“未捕获的ReferenceError:数据未定义”和第二个未捕获的TypeError:未定义的属性'0' – jahrichie

+0

您能告诉我们从响应中获得的字符串吗? – Adil

+0

添加了正在使用的前路 – jahrichie

0

尝试

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

    }); 
}); 
+0

感谢您的回复,这没有做任何事情或给任何错误。怪异/ – jahrichie

+0

@jahrichie请看演示。 –