Карта, возвращающая пустой массив при получении локального файла JSON - PullRequest
Новая
       10

Карта, возвращающая пустой массив при получении локального файла JSON

0 голосов
/ 21 декабря 2018

Это моя первая попытка получить локальный файл JSON.

Я получил данные в массив, называемый "drink", когда я консольный журнал массива, я могу видеть все данные из файла JSON, но когда я пытаюсь использовать функцию более высокого порядка, это будетвернуть пустой массив.Я делаю это на своем локальном живом сервере, но я также пробовал с веб-сервером для Chrome, я не заметил разницы. 

let drinks=[];

fetch('./coldMenu.JSON', {
  headers : { 
    'Content-Type': 'application/json',
    'Accept': 'application/json'
   }
})
    .then(response=>response.json())
    .then(data=>drinks.push(...data.drinks))

    console.log(drinks)

   let coldMenuHtml= drinks.map(drink=>{
       ` <img src="${drink.img}" alt="${drink.drink}" class="im">`
    });

    console.log(coldMenuHtml)

Цель состоит в том, чтобы получить информацию отJSON и использовать его для создания меню кофе.Перед тем, как отобразится меню, появится окно с вопросом, хотят ли они посмотреть меню для горячих или холодных напитков, тогда я планировал получить и разместить информацию на странице.

Ответы [ 2 ]

0 голосов
/ 21 декабря 2018

Вы пытаетесь зациклить данные до того, как они станут доступны.Универсальная проблема большинства новичков при асинхронных вызовах в JS, поэтому вам лучше прочитать это How to return response from an async call.

Теперь вторая проблема заключается в том, что вы генерируете html внутри карты и ничего не возвращаете, поэтому вы получите массив undefined.И это ничего не сделает.

Было бы проще, если бы вы просто рассмотрели возможность использования простого цикла for для генерации html и продолжали добавлять к div, который вы хотите

, чтобы ваш код исправил это.Просто переместите код внутрь последнего .then, и он должен работать.

Что-то вроде 

let drinks = [];

fetch('./coldMenu.JSON', {
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        drinks = [...data.drinks];

        console.log(drinks)

        for (var i = 0; i < drinks.length; i++) {
            document.querySelector('selector').innerHTML += `<img src="${drinks[i].img}" alt="${drinks[i].drink}" class="im">`
        }


    })
0 голосов
/ 21 декабря 2018

Выборка асинхронная, поэтому данные не будут доступны сразу после последнего.Добавьте логику внутри последней, затем

Для проверки 

.then(data => {
    console.log(data)

    let coldMenuHtml= data.drinks.map(drink => {
     `<img src="${drink.img}" alt="${drink.drink}" class="im">`
    });

    console.log(coldMenuHtml)
 })
...