Need help with JS/JQ function call as a callback function

Need help with JS/JQ function call as a callback function
0.0 0

#1

Hi, everyone!
I’m in process of bulding Terry Pratchett’s Discworld Quote Machine and currently need some help with javascript/jquery.
That’s how my code looks now:

$(function(){
  var bookNumber = "";
  var bookName = "";
  $('#qbtn').on('click',function(){
      $.getJSON("quotes/city-watch-quotes-list.json", function getQuote(list){
      bookNumber = Math.floor(Math.random()*list.Books.length);
      bookName = list.Books[bookNumber];
      $('#book').html(bookName);
      var quoteNumber = Math.floor(Math.random()*list[bookName].length);
      $('#quote').html(list[bookName][quoteNumber]);
    });
  });
});

Basicly, I call JSON document, then function getQuote randomly picks a book from first array, and after that randomly choses a quote from an array assigned to this book. Later I’m also going to add a function to load picked book’s cover(one from several for a book, also randomly).
Function works as intended but I’d like to have several jsons, each one dedicated to separate series of the Discworld and have an initial function to also call one of this jsons randomly. I’m going to use a random number and a switch/case for that. And so I’d like to write code for getQuote function outside and just call it in each .getJSON callback case. But seems like I can’t.
I’ve tried something like this

$.getJSON("quotes/city-watch-quotes-list.json", getQuote());

and this

$.getJSON("quotes/city-watch-quotes-list.json", function(){
getQuote();
});

But it all doesn’t work. I’m clearly missing something or using it wrong. Have looked in Google for callbacks and call help, but didn’t find a solution. Can you help me, please? ^^ Sorry for a bit confusing description of a problem. >_>


#2

There’s a lot of things you want to do here

  1. Instead of creating several JSONS why not rewrite the json source so that each series is an ‘object’ with objects in it - then you can select the random series (or specific series as well) from the single json - splitting up the files makes thing more complex. Think about rewriting your source JSON file to fit your desired outcome.
  2. You can totally write your getQuote function separately outside - refactoring is a common thing but sometimes it takes some times when you’re learning things to get it done right. I rewrote the roman numeral thing on codepen so that it takes user input but it took me a few times to get it right. I’d make an attempt and then go to the gitter chat with your code.

#3

The first one, will execute getQuote immediately because of the brackets behind it (see link). The second one should work, this way:

$.getJSON("quotes/city-watch-quotes-list.json", function(data){
   getQuote(data);
});

#4

Maybe u want on load of page to get that json and cache it. So later every time when u click on that button u will call function let say getQuote who doesn’t pull data from server yet, it will pull from object u have cached…?


#5

@jemagee Well, I can agree with you. I just thought that several smaller jsons are better and a bit easier to handle and edit than one huge file. But from coding perspective, as I can say, one file is definitely easier. Thank you, I’ll consider it

@BenGitter Thank you, it worked! So, looks like I forgot to define a variable. Will try to not repeat such mistakes. ^^ (But surely will do that >_>)

@nameToReachPeople Oh, haven’t thought about such approach in general. Maybe it’ll be even better way to handle the code. Thank you!