使用 ajax 和 jQuery 循环 JSON 提要

Looping a JSON feed using ajax and jQuery

本文关键字：JSON 提要循环 jQuery ajax 使用更新时间：2023-09-26

>已回答

感谢所有回复这篇文章的人。感谢凯文（循环的最佳解决方案）和迪帕克的排序功能。

我将尝试在网站上找到此数据的分页解决方案，但任何进一步的帮助将不胜感激。

再次感谢大家！

原始静止

我希望你能帮助我。我有一个 JSON 提要（我已经验证并在 http://jsonlint.com/上完美运行）。我已经在我这边设置了页面，我可以解析一个结果没有问题。问题是提要中有很多结果，我需要 jQuery 返回所有结果。我在这里显示的示例有 11 个结果，但其他一些页面最多有 300 个结果。所以这是一个由两部分组成的问题。

我的脚本知识是能够更改给定的代码，但自己编写是不可能的（不过我正在自学）

如何返回所有结果？
如何对结果进行分页，例如每页 15 个？

我正在使用 JAMES PADOLSEY 的跨域 Ajax 插件来提取数据 - 这甚至是正确的术语吗？

我正在使用的jQuery代码是：

jQuery.noConflict()(function($) {
$(document).ready(function($) {
    $.ajax({
        type: 'GET',
        url: "http://dealer.mustek.co.za/public-content-api.html?content=dealers&province=limpopo",
        success: function(response) {
            var headline = $(response.responseText).text()
            var json_obj = $.parseJSON(headline); //parse JSON
            console.log(json_obj);
            var output = '';
            for (var i = 0; i < json_obj.user_id; i++)
            output += "<div class='dealer'>";
            output += "<dl>";
            output += "<dt>Company Name</dt>"
            output += "<dd>" + json_obj[i].company_name + "</dd>"
            output += "<dt>Company Description</dt>"
            output += "<dd>" + json_obj[i].company_description + "</dd>";
            output += "<dt>Email Address</dt>"
            output += "<dd>" + json_obj[i].company_email + "</dd>";
            output += "<dt>Contact Number</dt>"
            output += "<dd>" + json_obj[i].contact_number + "</dd>";
            output += "<dt>Website URL</dt>"
            output += "<dd>" + json_obj[i].website_url + "</dd>";
            output += "<dt>City</dt>"
            output += "<dd>" + json_obj[i].city_suburb + "</dd>";
            output += "<dt>Physical Address</dt>"
            output += "<dd>" + json_obj[i].physical_address + "</dd>";
            output += "</dl>"
            output += "<p>"
            output += "</div>";
            $('#dealer_limpopo').html(output);
        },
    });
});
});

我正在将div 拉入测试 http://thegearbox.co/thisisatest/html 页面。

如您所见，feed没有问题，一切都运行良好，只需要那条讨厌的行来循环浏览所有数据。目前

for (var i = 0; i < json_obj.user_id; i++)

没有做这项工作。

任何帮助将不胜感激！

有没有办法按字母顺序对数据进行排序，或者我只是厚颜无耻地要求这么多？ :)

更新

非常感谢到目前为止发表评论的每个人。我在下面使用了@Kevin的解决方案来显示所有数据

for (var i = 0; i < json_obj.length; i++)

我正在使用@Deepak的解决方案对数据进行排序：

                json_obj.sort(function compare(a,b) {
            if (a.company_name < b.company_name)
            return -1;
            if (a.company_name > b.company_name)
            return 1;
            return 0;
            });

任何人都可以帮助分页吗？

for loop应为 [] json_obj中的每个项目迭代一次。在Javascript中，数组包含继承属性长度。 length 属性的值指示数组中包含的元素数。将其添加到for loop告诉它迭代数组中的每个元素一次。

将循环更改为：

for (var i = 0; i < json_obj.length; i++){
   //code omitted
}

$.ajax({
    type: "GET", timeout: 60000, cache: false, dataType: "jsonp", url: strURL + "&callback=?",
    success: function (response) {
        objAttributes = response.Attributes;
        var List = "";
        if (objAttributes != null) {
            var iLoop = 0;
            var xLoop = 0;
            for (iLoop = 0; iLoop < objAttributes.Product.length; iLoop++) {             
                if (List.length > 0) List = List + ":";
                List = List + objAttributes.Product[iLoop].ID;
                List = List + "_" + objAttributes.Product[iLoop].ITEM;               
            }
        }

    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
    }
});

此代码可能会对您有所帮助。

你应该使用 jquery 的 for-each 循环。

如果您的 JSON 响应对象是一个数组。

$.each( json_obj, function(index, value) {
    // process the value 
    // append value.company_name, value.company_email etc. to output.
});

并且，按公司名称对数据进行排序。

json_obj.sort(function compare(a,b) {
     if (a.company_name < b.company_name)
         return -1;
     if (a.company_name > b.company_name)
        return 1;
        return 0;
});

你的"json_obj"是一个数组。

改变

for (var i = 0; i < json_obj.user_id; i++)

自

for (var i = 0; i < json_obj.length; i++) {

由于在您的情况下json_obj似乎是一个列表，

json_obj.user_id 未定义。如果您有单个列表，请尝试此操作。

for (var i = 0; i < json_obj[0].user_id; i++)

否则使用

$.each(json_obj,function(data,index){
//your html code here
})

希望对你有帮助...

这是一种对数据进行排序的方法：

json_obj.sort(function (a, b) {
    if (a.company_name > b.company_name) { return 1; }
    if (a.company_name < b.company_name) { return -1; }
    return 0;
});

然后你可以用 jQuery.map() 替换 for 循环来获取输出：

var output = jQuery.map(json_obj, function (row) {
    // build your HTML here
    return '<div>' + row.company_name + '</div>';
});

最后：

$('#dealer_limpopo').html(output.join('')); // don't forget to join :)

"All in a" 答案：

var headline = $(response.responseText).text()
var json_obj = $.parseJSON(headline); //parse JSON
json_obj.sort(function (a, b) {
    if (a.company_name > b.company_name) { return 1; }
    if (a.company_name < b.company_name) { return -1; }
    return 0;
});
return jQuery.map(json_obj, function (row) {
    return [
        '<div class="dealer">',
            '<dl>',
                '<dt>Company Name</dt>',
                '<dd>', row.company_name, '</dd>',
                '<dt>Company Description</dt>',
                '<dd>', row.company_description, '</dd>',
                '<dt>Email Address</dt>',
                '<dd>', row.company_email, '</dd>',
                '<dt>Contact Number</dt>',
                '<dd>', row.contact_number, '</dd>',
                '<dt>Website URL</dt>',
                '<dd>', row.website_url, '</dd>',
                '<dt>City</dt>',
                '<dd>', row.city_suburb, '</dd>',
                '<dt>Physical Address</dt>',
                '<dd>', row.physical_address, '</dd>',
            '</dl>',
        '</div>'
    ];
}).join('');