为什么我使用 Fetch 从一个 api 调用中获取两组数据？

Question

当我获取 api json 数据时，我得到双倍的结果。使用.forEach() 方法，我将双重数据打印到我只需要一组的HTML 中。

这是我的 api 调用和循环

var url = 'https://api.myjson.com/bins/1geede';

fetch(url)
.then(response => response.json())
.then(data =>  {

const scope = data.data.messages;
        console.log(scope);

        //Looping through the user data

        scope.forEach((i) => {

            let user = i;

            if (user.username == "Mygel van Trabel") {

                user1( user.focused, user.message, getTimeStamp(user.timestamp), user.username);

            } else {

                user2( user.focused, user.message, getTimeStamp(user.timestamp), user.username);

            }



        });

}).catch( error => console.error(error));

User1 和 User2 是函数。以下是来自console.log(scope) 的结果：

VM  app.js:20 (4) [{…}, {…}, {…}, {…}]
app.js:20     (4) [{…}, {…}, {…}, {…}]

现在它正在将两个集合都打印到 DOM 中，而我只需要一个。为什么会这样？

下面的图片是我想要完成的。

这张照片是它现在给我的结果

Answer 1

希望您不介意，但我查看了您的个人资料并注意到您的 Github 中的文件。问题出在src/index.html，您在第 35 行定义了<script src="bundle.js"></script>。

但是，当您运行 Webpack 时，它会构建和注入同一行（如 dist/index.html 中所示），从而导致您重复的 API 调用。

修复只是从 /src/index.html 中删除第 35 行 :) 您将不再让受骗的 JS 调用 API。

Answer 2

forEach 工作正常。如果您检查您正在为其运行 forEach 的 scope 变量的 console.log，那么您会发现该范围包含重复的数据，因此您的 forEach 循环没有任何问题。

fetch('https://api.myjson.com/bins/1geede')
.then(response => response.json())
.then(function(data) {
    //Declaring the scope variable for user data
    const scope = data.data.messages;

    console.log("Duplication is here: ", scope);
    console.log("---------");

    //Looping through the user data
    scope.forEach((i) => {
        let user = i;

        console.log(user);
    });
});