Question

我一直在尝试创建一个调用分页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');

但是，我无法确定返回语句的位置以及如何从函数外部访问数组。

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

Answer 1

$.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：在此之后，应该很清楚，这确实是一个重复......

Answer 2

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

您可以做的是将myList变量设置为global，只需从函数中删除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循环中：

first ajax
第二个ajax
第三个ajax
第二个ajax返回
首先ajax返回
第三个ajax返回

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

只是想一想你的其余部分。

Answer 3

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

循环遍历分页API javascript

3 个答案: