Random Quote – Part 2 – Vanilla JavaScript and JSON: Using various front end stacks

4 min read

Building a random quote machine with Vanilla JavaScript and JSON

Here comes Part 2 of this series. You can read more about this project’s background on the project’s page. Or start from the beginning with part 1 of this series.

In flavor #1, I have the data (quotes) inside an array. In this flavor, I’m storing the quotes in a separate JSON file.


In Part 3 (to be posted next week), I will cover a third flavor and will be requesting the quotes data from a REST API.

If you’re curious about the next flavors and would like to make a writer very happy today, you should join Morse Wall’s newsletter.


Flavor #2: HTML + CSS + Vanilla JS + JSON with quotes

There is a very limited number of quotes in the array used in flavor #1. Still, one has to scroll down quite a bit to get to see functional code. In real life, data is typically stored somewhere else, many times in someone else’s server, as JSON, XML, CSV, SQL, etc.

In flavor #2, the data is stored in a JSON file hosted together with the rest of the code. There are only 3 quotes in the code snippet from quotes.json below (so I can illustrate the point), but many more quotes in the JSON in production.

[
  {
    "quoteText": "\"Many of you appear concerned that we are wasting valuable lesson time, but I assure you we will go back to school the moment you start listening to science and give us a future.\"",
    "quoteAuthor": "Greta Thunberg"
  },
  {
    "quoteText": "\"I was fortunate to be born in a time and place where everyone told us to dream big. I could become whatever I wanted to. I could live wherever I wanted to. People like me had everything we needed and more. Things our grandparents could not even dream of. We had everything we could ever wish for and yet now we may have nothing. Now we probably don’t even have a future any more.\"",
    "quoteAuthor": "Greta Thunberg"
  },
  {
    "quoteText": "\"That future was sold so that a small number of people could make unimaginable amounts of money. It was stolen from us every time you said that the sky was the limit, and that you only live once. You lied to us. You gave us false hope. You told us that the future was something to look forward to.\"",
    "quoteAuthor": "Greta Thunberg"
  }
]

Controlling asynchronous code with Promises and async functions

In order to fetch that data, I’m using the fetch() method. fetch() is asynchronous code, i.e. when executed, it won’t pause the execution of the rest of the code.

But sometimes, things must happen in order. In other words, should I not adjust my code, the rest of the code will execute while fetch() still hasn’t finished fetching the requested resource from the network (in this case, a resource on the same origin as this is a JSON hosted together with the rest of the project). As the code would go on executing, I’d eventually get a reference to quotes being undefined on the browser console since injectQuote would run and try to access a random quote from the quotes array before the array has been populated.

As I want a random quote to be ready for me when the quote machine loads, I’ve previously (in flavor #1) simply called injectQuote to fetch a random quote and render it in my HTML. Here, in flavor #2, I’m making sure that injectQuote only executes after I’ve finalized fetching the data from the JSON file. The fetching is executed by the asynchronous makeRequestfunction (that I still need to define). To ensure things happen in order, I’m adjusting the way I call injectQuote by using the Promise’s (fetch() returns a Promise) then() method:

// inject a quote on screen when app loads (but only after the array was populated with the fetch from JSON)
makeRequest().then(result => injectQuote());

I’m making makeRequest an async function, as the output of injectQuote is dependent on the output of makeRequest and because, once again, we want to ensure things happen in order.

//asynchronous function that fetches JSON content and populates the quotes array
const makeRequest = async () => {
  const responseJSON = await fetch(
    "/random-quotes-vanillajs-json/data/quotes.json"
  );
  quotes = await responseJSON.json();
};

Done. The rest of the code remains the same as in flavor #1 and you can check the project live. Source code for flavor #2 in Github.

Live project Source code


In Part 3 (to be posted next week), I will cover a third flavor and will be requesting the quotes data from a REST API.

If you’re curious about the next flavors, you should join Morse Wall’s newsletter. I think you’ll like it a lot!


So, what did you like about this post? Leave a comment or come say hello on Twitter!

Also, if you have built a random quote machine after reading this post, share it below as a comment. Really excited to see what you create!

Happy coding!

Enjoyed this content?

Help keep it coming by sending a donation or buying me coffees.
You can also join Morse Wall's newsletter, or subscribe to various site feeds to get notified of new posts or follow Morse Wall on social media.

Leave a comment

by Pat
by Pat