Почему я получаю два набора данных из одного вызова API, используя Fetch?

Question

Когда я получаю данные API, я получаю двойные результаты.Используя метод .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, где вы определяете <script src="bundle.js"></script> в строке 35.

Однако, когда вы запустите Webpack, он создаст ивставьте одну и ту же строку (как показано в dist/index.html), что приведет к дублированию вызовов API.

Исправление заключается в удалении строки 35 из/src/index.html :) У вас больше не будет двусторонней JS, вызывающей API.

Answer 2

forEach работает нормально.Если вы проверите console.log вашей переменной scope, для которой вы запускаете forEach, вы обнаружите, что область содержит дублированные данные, поэтому у нее нет проблем с циклом 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);
    });
});