JSON 数据未定义，但出现在控制台日志中

Question

我正在访问以下 JSON 数据：

http://veratech.co.nz/blog/?json=1

当我尝试访问位于下面代码第 4 行的数组中的“url”属性时，我收到一个未定义的错误。即使它会出现在 console.log（第 13 行）中，带有 console.log(val.attachments[0].url);。

代码如下：

        $.each(data.posts, function(index, val){
        output += '<li>';
        output += '<a href="#blogpost" onclick = showPost(' + val.id + ')">';
        output += '<img src="' + val.attachments[0].url + '" alt="">';
        output += '<h3>' + val.title + '</h3>';
        //Here we shorten the paragraph to 60 characters. 
        var str = val.excerpt;
        var paraInfo = str.slice(0, 60);
        output += '<p>' + paraInfo + '</p>';
        //Closing off the the closing html tags
        output += '</a>';
        output += '</li>';
        console.log(val.attachments[0].url);
    });//Go through each post

非常感谢您的建议

Answer 1

我认为还有其他问题。

我手动下载了json，并写了这段代码：

HTML：

Urls:
<ul id="foo">
</ul>

JavaScript：

function extractUrls(data) {
    var $foo = $('#foo');

    $.each(data.posts, function (i, p) {
        $foo.append($('<li></li>').text(p.attachments[0].url));
    });
}

var jsonData = { /* code omitted for brevity */ };

extractUrls(jsonData);

我的输出是：

Urls:
<ul id="foo">
    <li>http://veratech.co.nz/blog/wp-content/uploads/2014/03/martial.jpg</li>
    <li>http://veratech.co.nz/blog/wp-content/uploads/2013/12/grave.jpg</li>   
    <li>http://veratech.co.nz/blog/wp-content/uploads/2013/12/GTA5.jpg</li>
    <li>http://veratech.co.nz/blog/wp-content/uploads/2013/10/miyagi.jpg</li>
    <li>http://veratech.co.nz/blog/wp-content/uploads/2013/08/htc-box.png</li>
    <li>http://veratech.co.nz/blog/wp-content/uploads/2013/08/scaffold1.jpg</li>
    <li>http://veratech.co.nz/blog/wp-content/uploads/2013/07/barriera.png</li>
    <li>http://veratech.co.nz/blog/wp-content/uploads/2013/06/tv.jpg</li>
</ul>

注意：您应该能够将 var jsonData = 行替换为：

$.get('http://veratech.co.nz/blog/', { json: 1 }, extractUrls, 'json');

无论如何；看不出你的代码有什么问题？您确定这是问题所在？

PS：我什至在$.each 循环中添加了以下内容：

    if (!p.attachments[0].url) {
        alert(p.id + ' has undefined url!');
    }

并且没有看到任何警报...

See code running in a jsFiddle here