Question

我有一个有效的json feed，我通过使用jquery访问php文件从服务器中提取。查询php文件返回的json feed的一个例子是

{"items":[{"acc_number":"11111","acc_name":"TestAccount","demographics":["Some
Street","SomeState","99999"],"last_thirty":null,"phone":null,"sms":null,"email":null},    {"acc_number":"22222","acc_name":"MyAccount","demographics":"MyStreet","MyState","99999"],"last_thirty":null,"phone":null,"sms":null,"email":null}],"total_items":"80","md5sum":"c7a834d45bdf348abfdcdb95994c7608"}

我正在使用下面的代码，我会通过feed并关闭所有非NULL的记录和字段。但我没有得到任何东西。

$.ajax({
   type= 'GET',
   url: 'http://MyURL.com',
   dataType: 'json',
   username: myusername,
   password: mypassword,
   success: function(data) {
        var items = [];
        $.each(data, function(key,val) {
        items.push('<li id="' = key = '">' + val + '</li>');
});

$('<ul/>', {
   'class': 'my-new-list',
    html: items.join('')
    }).appendTo('body');
} 
});
}

任何帮助/提示都会一如既往地受到赞赏。

谢谢！

根据以下答案进行了更新。

$(document).ready(function() {
  testNews();
});

function testNews() {
$('body').append('<h1>News</h1>');
$('body').append('<h2>Main Display</h2>');
$('body').append("<div id='success_news_main' class='waiting'>Waiting for response</div>");

$.ajax({ 
type: "GET",    
url: 'http://MyURL.com/news.php', 
dataType: 'json',
username: myusername, 
password: mypassword,
success: function(data) {
    var ul = $('<ul/>').addClass('my-new-list').appendTo('body');
    $.each(data.items, function(k,v) {
    $('<li/>').attr('id', k).html(v).appendTo(ul);
});
}
});
}

Answer 1

尝试迭代data.items而非data，因为这是您的收藏品：

success: function(data) {
    var items = [];
    $.each(data.items, function(key, val) {
        items.push('<li id="' + key + '">' + val + '</li>');
    });

    ...
}

同样，您的items.push方法似乎因多个=字符而中断。你可能意味着+。

另一个评论是$.each语句中的val变量。这将是一个对象。您可能希望从此对象中选择特定属性，例如：

items.push('<li id="' + key + '">' + val.acc_number + '</li>');

键将是数组的索引。并且因为如果你想拥有有效的HTML，HTML中的id不能以数字开头，你可能需要在你的li id前加上：

items.push('<li id="item_' + key + '">' + val.acc_number + '</li>');

Answer 2

迭代data.items，因为JSON返回该数组中的值。此代码示例还修复了“=”，其中“+”应该是。

$.ajax({
   type= 'GET',
   url: 'http://MyURL.com',
   dataType: 'json',
   username: myusername,
   password: mypassword,
   success: function(data) {
        var items = [];
        $.each(data, function(key,val) {
            items.push('<li id="' + key + '">' + val + '</li>');
        });  


        $('<ul/>', {
            'class': 'my-new-list',
            html: items.join('')
            }).appendTo('body');
   });  
});

Answer 3

在形成用于显示的html标记时，不应使用字符串连接。而是使用jQuery的函数创建dom元素，向它们添加属性值并将它们添加到页面中。

以下是修改代码的建议：

$.ajax({ 
   type= 'GET', 
   url: 'http://MyURL.com', 
   dataType: 'json', 
   username: myusername, 
   password: mypassword, 
   success: function(data) { 
        var ul = $('<ul/>').addClass('my-new-list').appendTo('body');
        $.each(data.items, function(k,v) {
            $('<li/>').attr('id', k).html(v).appendTo(ul);
        });
    }
});

这也更容易阅读，并且不会两次查看数组。

此外，“$ .each”中的“v”变量将是json中数组的对象。您需要访问其各自的属性并在li中创建必要的html /元素，而不是直接将其设置为html属性。

如何向用户显示json feed？

3 个答案: