循环遍历分页的 API JavaScript

Loop through paginated API javascript

本文关键字：API JavaScript 分页 遍历 循环      更新时间：2023-09-26

我一直在尝试创建一个函数来调用分页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 语句应该去哪里以及如何从函数外部访问数组。

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

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

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 调用可能会过早完成。

所以这样想：

  • 循环页面运行...
  • 返回到 JS 以运行其他所有内容。
  • loopPages ajax 完成，运行成功函数。

在成功函数的 while 循环中：

  1. 第一阿贾克斯
  2. 第二个阿贾克斯
  3. 第三届阿贾克斯
  4. 第二次阿贾克斯回归
  5. 第一个 AJAX 返回
  6. 第三次阿贾克斯回归

现在你的我的列表看起来像第二，第一，第三

只是对脚本的其余部分进行一些思考。

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;
}
相关文章：