Блог

Главная - Вопросы по программированию - Случайное цитирование (с использованием файла JSON) по какой-то причине не работает

Случайное цитирование (с использованием файла JSON) по какой-то причине не работает

#javascript #jquery #json

#JavaScript #jquery #json

Вопрос:

Моя кнопка предназначена для отображения случайной цитаты при загрузке страницы и при нажатии кнопки. Похоже, что «кавычки» не определены в моем JS-файле (строка 17), но я не уверен, как это исправить. Есть идеи, что я делаю не так? Я был бы очень признателен за вашу помощь.

HTML:

                 <button id="submit" type="button">Get new quote!</button>
                <span id="quoteText"></span> 
                <span id="authorText"></span>

JSON:

 { "quotes" : [

        {
            "text": "Whatever you are, be a good one.", "author": "Abraham Lincoln", "provider": "Bennett",
            "tags":["Famous Inspirational Quotes", "BrainyQuote.com", "President Lincoln"]                  
        }, 
        {
            "text": "It has been my philosophy of life that difficulties vanish when faced boldly.", "author": "Isaac Asimov", "provider": "Bennett",
            "tags":["Famous Inspirational Quotes", "BrainyQuote.com", "Science Fiction"]
        }, 
        {
            "text": "Enjoy life. There’s plenty of time to be dead.", "author": "Anonymous", "provider": "Bennett",
            "tags":["Famous Inspirational Quotes", "BrainyQuote.com", "Anonymous Quote"]
        }, 
        {
            "text": "Every moment is a fresh beginning.", "author": "T.S. Eliot", "provider": "Bennett", 
            "tags":["Famous Inspirational Quotes", "BrainyQuote.com", "Author T.S. Eliot"]
        }, 
        {
            "text": "One day your life will flash before your eyes. Make sure it is worth watching.", "author": "Anonymous", "provider": "Bennett",  
            "tags":["Famous Inspirational Quotes", "BrainyQuote.com", "President Lincoln"]
        }

        ]}

JS:

 $(function() 
{
    var quoteSpan     = $("#quoteText"); 
    var authorSpan    = $("#authorText"); 
    var submitButton  = $('#submit'); 
    var data;

    $.getJSON("quotes.json", function(data) {
        window.alert(data);
    });

    var oldQuoteIndex = -1;
    var newQuoteIndex;

    function nextQuote() {
        do {
            newQuoteIndex = Math.floor(Math.random() * data.quotes.length);
        } while (newQuoteIndex == oldQuoteIndex); 

        quoteSpan.text(data.quotes[newQuoteIndex].text); 
        authorSpan.text(data.quotes[newQuoteIndex].author);

        oldQuoteIndex = newQuoteIndex; 
   }
    submitButton.click(nextQuote);
    nextQuote();
});

Комментарии:

1. data (в смысле результата вашего результата json) выходит за рамки, как только вы закрываете это $.getJSON() . Как только вы решите эту проблему, вы поймете, что она все еще не определена, потому что вы получаете ее асинхронно и nextQuote() происходит до $.getJSON возврата

2. Сокращенная версия: jsfiddle.net/robertrozas/c59Zf

Ответ №1:

Вызовите nextQuote функцию изнутри getJSON обратного вызова, а также настройте событие оттуда. Тогда у вас будет доступ к полученным данным.

 $(function() 
{
    var quoteSpan     = $("#quoteText"); 
    var authorSpan    = $("#authorText"); 
    var submitButton  = $('#submit'); 
    var mydata;

    var oldQuoteIndex = -1;
    var newQuoteIndex;

    $.getJSON("quotes.json", function(data) {
        mydata = data;
        nextQuote();
        submitButton.click(nextQuote);
    });

    function nextQuote() {
        do {
            newQuoteIndex = Math.floor(Math.random() * mydata.quotes.length);
        } while (newQuoteIndex == oldQuoteIndex); 

        quoteSpan.text(mydata.quotes[newQuoteIndex].text); 
        authorSpan.text(mydata.quotes[newQuoteIndex].author);

        oldQuoteIndex = newQuoteIndex; 
    }
});
Метки: