循环分页 API javascript答案

【问题标题】：Loop through paginated API javascript循环分页 API javascript
【发布时间】：2016-07-08 12:42:44
【问题描述】：

我一直在尝试创建一个调用分页 API 的函数，循环遍历每个页面并将 JSON 值添加到数组中。我希望函数返回数组。

该函数对 api 进行初始调用，并通过计算从所有页面返回的结果数并除以 10（每页的结果数为 10）来计算它必须循环的次数。到目前为止，函数看起来像这样：

function loopPages(url) {
    $.getJSON(url, function (data) {
        var pages = Math.ceil(data.count/10 + 1);
        var i;
        var myList = [];
        for (i = 1; i < pages; i++) {
            $.getJSON("http://urladdress.com/?page=" + i, function (data) {
                obj = data.results;
                $.each(obj, function (k, v) {
                    myList.push(v.city_name);
                });
            return myList
            });
        }
    });
}
loopPages('http://urladdress.com/?page=1');

但是，我无法确定 return 语句应该去哪里以及如何从函数外部访问数组。

我还寻找了解决这个问题的其他方法（我猜这很常见），但一无所获。非常感谢任何帮助！

【问题讨论】：

stackoverflow.com/questions/14220321/…
不太了解否决票，您提出的答案甚至没有涉及分页问题。
@sammy88888888 没有投反对票，但这是因为分页不是问题。您已经知道要使用多少页，因此只需根据需要回滚到 0 或 1。问题在于使用 AJAX 调用的结果。

标签： javascript jquery arrays pagination

【解决方案1】：

HTML:-

<!DOCTYPE html>
<html>
<head>
    <title>pagination</title>
    <link rel="stylesheet"  href="pathofcssfile.css">
</head>
<body>
    <div>
        <table id="user"></table>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <ul>
    <li value="1">1</li>
    <li value="2">2</li>
    <li value="3">3</li>
    <li value="4">4</li>
    <li value="5">5</li>
    <li value="6">6</li>
    <li value="7">7</li>
    <li value="8">8</li>
    <li value="9">9</li>
    <li value="10">10</li>

    </ul>

    <script src="pathnameofjsfile.js" type="text/javascript"></script>
</body>
</html>

JS:-

var xhr = new XMLHttpRequest();
xhr.open('GET',"https://jsonplaceholder.typicode.com/albums",true);
xhr.send();

var udata;

xhr.onload = function() 
{
    if(this.status == 200) 
    {
        var userdata = JSON.parse(this.responseText);
        console.log(userdata);
        udata = userdata;
        data(1);
    }
}

$("li").click(function ()
{       
var a = $(this).attr("value");
console.log("value li "+ a);
data(a);
});

function data(a)
{  
    var output = "";
    for(i=((a-1)*10);i<(a*10);i++)
    {
        output +='<tr>'+
                 '<td>'+ udata[i].userId + '</td>'+
                 '<td>'+ udata[i].id + '</td>'+
                 '<td>'+ udata[i].title + '</td>'+ '<br>'
                 '</tr>';
    }
    document.getElementById('user').innerHTML = output;
}

CSS:-

ul{
display: flex;
list-style-type:none;
padding: 20px;
}

li{
padding: 20px;
}

td,tr{
    padding: 12px;
}

【讨论】：

如果您需要更清晰的信息，可以回复我

【解决方案2】：

getJSON 函数是异步运行的，所以它实际上会在作业完成之前返回，因此不允许您对成功函数的返回数据做任何事情。

您可以将 myList 变量设置为全局变量，只需从函数中删除 var：

改成：

function loopPages(url) {
    $.getJSON(url, function (data) {
        var pages = Math.ceil(data.count/10 + 1);
        var i;
        var myList = [];

到：

function loopPages(url) {
    $.getJSON(url, function (data) {
        var pages = Math.ceil(data.count/10 + 1);
        var i;
         myList = [];

我还建议让页面全球化做同样的事情。

您可以完全删除 return 语句。

我还建议不要在函数中执行多个 ajax 调用，这可能会导致 myList 出现故障，因为 ajax 调用可能会过早完成。

这样想吧：

loopPages 运行...
返回 js 运行其他所有内容。
loopPages ajax 完成，运行成功函数。

在成功函数的while循环内：

第一个 ajax
第二个ajax
第三个ajax
第二个 ajax 返回
第一个 ajax 返回
第三个 ajax 返回

现在你的 myList 看起来像第二，第一，第三

稍微考虑一下脚本的其余部分。

【讨论】：

【解决方案3】：

$.getJSON 方法是异步的，因此您需要使用回调来使用您获得的数据作为结果。骨架代码是这样的：

function loopPages(url, callback) {
    // ...
        $.getJSON("...", function (data) {
            // ...
            callback(myList);
        });
});

所以你只需要类似地定义回调：

function callback(myList) {
    // fill your data grid
}

现在，loopPages 函数可以这样使用：

loopPages('http://urladdress.com/?page=1', function (myList) {
    // fill your data grid
});

PS：在这之后，应该清楚的是，这真的是完全重复的......

【讨论】：

答案可能与ajax异步方法有关，但问题本身不是。这个问题表明对 jquery ajax 以及异步运行任何代码的意义缺乏理解。
谢谢。我对 js 没有经验，所以感谢您的回答。