Почему я получаю два набора данных из одного вызова API с помощью Fetch?
Когда я получаю данные 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.info(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.info(scope):
VM app.js:20 (4) [{…}, {…}, {…}, {…}]
app.js:20 (4) [{…}, {…}, {…}, {…}]
Прямо сейчас он печатает оба набора в DOM, когда мне нужен только один. Почему это происходит?
На картинке ниже показано, что я пытаюсь сделать.
Эта картина - результаты, которые она дает мне сейчас
Я просто добавил их в пост
Похоже, они ничего не логируют, но без них, как видно из скрипки, данные не дублируются (например, отображаются 4 элемента, а не 8). Можете ли вы показать код, демонстрирующий минимальный воспроизводимый пример?
@CertainPerformance Как?
Я не знаю - вы должны создать минимальный воспроизводимый пример, иначе вопрос останется без ответа
@CertainPerformance Я просто сократил код. Я надеюсь, что соответствует MCVE.
Проблема по-прежнему не может быть воспроизведена из кода — см. файл JSFiddle. Напечатано 4 элемента, а не 8.
Давайте продолжить обсуждение в чате.
Не могли бы вы проверить вкладку своей сети, чтобы убедиться, что запрос отправляется только 1 раз, и редактировать вашего сообщения, чтобы включить эту информацию? Это наиболее распространенный случай регистрации дубликатов.
Привет @MichaelStokes, мне любопытно, проверили ли вы вкладку «Сеть», чтобы подтвердить количество запросов, как это было предложено Ferrybig?
@ Джек Да, и я все еще работаю над этим. Я вижу два запроса на выборку. Один из VM, а другой из app.js. Они оба печатаются в HTML.
Кто бы ни проголосовал за этот вопрос, я явно сделал все возможное, чтобы объяснить проблему и опубликовал соответствующий код.
@MichaelStokes, попался! Я не отрицал, но вижу, что вы включили дополнительную информацию (так что проголосовали за ваш способ смещения! :)) - Одна вещь, которую вы можете сделать, это добавить оператор debugger перед журналом консоли и пройтись по трассировке стека, чтобы увидеть кто вызывает вызовы выборки - если действительно у вас есть несколько вызовов выборки.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
forEach работает нормально. Если вы проверите console.info своей переменной 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.info("Duplication is here: ", scope);
console.info("---------");
//Looping through the user data
scope.forEach((i) => {
let user = i;
console.info(user);
});
});Его проблема в том, что он видел 8 результатов, а не 4.
@CertainPerformance Если это так, то почему мы не видим 8 результатов с предоставленным им кодом?
Поскольку OP не предоставил минимальный воспроизводимый пример. (Если его проблему невозможно воспроизвести, лучше попросить разъяснений и проголосовать за закрытие)
Надеюсь, вы не возражаете, но я проверил ваш профиль и заметил файлы в вашем Github. Проблема в src/index.html, где вы определяете <script src = "bundle.js"></script> в строке 35.
Однако когда вы запускаете Webpack, он создает и внедряет одну и ту же строку (как показано на рисунке dist/index.html), что приводит к дублированию вызовов API.
Исправление состоит в том, чтобы просто удалить строку 35 из /src/index.html :) У вас больше не будет двойного JS, вызывающего API.
Что такое функции
user1иuser2? Без этого отлично работает: jsfiddle.net/bvsLueky