从API获取前10条数据仅返回1条且重复显示10次的问题求助

原本计划从API获取前10条数据到Node.js Express服务器，存储至PostgreSQL数据库后，再通过Express返回至前端，但实际仅1条数据被获取且重复显示10次。以下是前端相关代码：

前端index.js代码 #

var request = new XMLHttpRequest()

// Open a new connection, using the GET request on the URL endpoint
request.open('GET', 'https://api.wazirx.com/api/v2/tickers', true)

request.onload = function () {
    // Begin accessing JSON data here
    if (this.status === 200) {
        let obj = JSON.parse(this.responseText);
        let content = document.querySelector("#content");
        let unit = document.querySelector(".unit");
        // To get object length
        // let ln = Object.keys(obj).length
        str = ""
        str2 = ""
        let count = 0;

        for (key_1 in obj) {
            while (count < 10) {
                let name = obj[key_1].name;
                let last = obj[key_1].last;
                let buy = obj[key_1].buy;
                let sell = obj[key_1].sell;
                let volume = obj[key_1].volume;
                let base_unit = obj[key_1].base_unit;
                count += 1
                str += `
            <tr class="values">
            <td class="index">${count}</td>
            <td class="name">${name}</td>
            <td class="last">&#8377; ${last}</td>
            <td class="bs">&#8377; ${buy} / &#8377; ${sell}</td>
            <td class="volume">${volume}</td>
            <td class="base_unit">${base_unit}</td>
            </tr>
            `
                str2 += `
            <li><a class="dropdown-item" href="#">${base_unit.toUpperCase()}</a></li>
            `
            }
        }
        content.innerHTML += str
        unit.innerHTML += str2

    }
    else {
        console.log("File Not Found!!!")
    }
}
request.send()

前端index.html代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="./css/index.css">
    <title>Document</title>
</head>

<body>
    <header>
        <nav>
            <div class="left">
                <img src="./logo.png" alt="" width="300" height="1000">
            </div>
            <div class="tags">
                <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        INR
                    </button>
                </div>
                <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        BTC
                    </button>
                    <ul class="dropdown-menu unit" aria-labelledby="dropdownMenuButton1">
                    </ul>
                </div>

            </div>
            <div class="right">
                <div class="connect-button">
                    <span><img src="./telgram.png" alt=""></span>
                    <span><a href="#">Connect Telegram</a></span>
                </div>
            </div>
        </nav>
    </header>
    <div class="main">
        <table id="content">
            <tr class="heading">
                <td>
                    <h3>#</h3>
                </td>
                <td>
                    <h3>name</h3>
                </td>
                <td>
                    <h3>Last</h3>
                </td>
                <td>
                    <h3>Buy / Sell Price</h3>
                </td>
                <td>
                    <h3>volume</h3>
                </td>
                <td>
                    <h3>base_unit</h3>
                </td>
            </tr>
        </table>
    </div>
    <script src="./js/index.js"></script>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
    crossorigin="anonymous">
</script>

</html>

核心问题 #

代码中for...in循环遍历API返回对象时，嵌套了while (count < 10)循环。这会导致第一次循环就拿到第一个key对应的数据，然后重复生成10次内容，之后count达到10，外层for...in的后续迭代不会再执行任何逻辑，最终只显示同一条数据10次。

修复后的index.js代码 #

var request = new XMLHttpRequest()

request.open('GET', 'https://api.wazirx.com/api/v2/tickers', true)

request.onload = function () {
    if (this.status === 200) {
        let obj = JSON.parse(this.responseText);
        let content = document.querySelector("#content");
        let unit = document.querySelector(".unit");
        let str = ""
        let str2 = ""
        let count = 0;

        // 将对象的键转为数组，方便按顺序取前10条
        const keys = Object.keys(obj);
        // 遍历前10个元素（若API返回不足10条则取实际数量）
        for (let i = 0; i < Math.min(10, keys.length); i++) {
            const key_1 = keys[i];
            let name = obj[key_1].name;
            let last = obj[key_1].last;
            let buy = obj[key_1].buy;
            let sell = obj[key_1].sell;
            let volume = obj[key_1].volume;
            let base_unit = obj[key_1].base_unit;
            count += 1
            str += `
            <tr class="values">
            <td class="index">${count}</td>
            <td class="name">${name}</td>
            <td class="last">&#8377; ${last}</td>
            <td class="bs">&#8377; ${buy} / &#8377; ${sell}</td>
            <td class="volume">${volume}</td>
            <td class="base_unit">${base_unit}</td>
            </tr>
            `
            str2 += `
            <li><a class="dropdown-item" href="#">${base_unit.toUpperCase()}</a></li>
            `
        }
        content.innerHTML += str
        unit.innerHTML += str2

    } else {
        console.log("File Not Found!!!")
    }
}
request.send()

修复说明 #

1. 先把API返回对象的键转为数组const keys = Object.keys(obj)，确保能按顺序访问不同的数据项
2. 使用普通for循环控制遍历次数，通过Math.min(10, keys.length)避免API返回数据不足10条时出现越界错误
3. 移除了错误嵌套的while循环，确保每次循环都取对象的下一个键对应的数据

另外注意：你提到原本计划用Node.js+Express+PostgreSQL处理数据，但当前代码是纯前端直接请求API。若后续要实现后端中转逻辑，需要在Express中编写接口请求API并存储到数据库，再向前端返回数据，这部分可单独实现。

内容的提问来源于stack exchange，提问作者Raghav Mittal