Fetching online data

Introduction

This time we're going to do our first fetching of data from an online source using the Fetch context object. The API we're using has an extensive list of famous qoutes (and their authors) and can be found at https://type.fit/api/quotes.

Note

The complete view can be downloaded from here, but you will still need to follow some of the setup steps for it to work.

Setup

• In SSF_Tutorials, create a new User Area called OnlineQuotes.
• Open Folder Views Tool and remove all the default Widgets and Link Icons.
• Create a new Link Icon and leave the default name as is (UnnamedLinkIcon_1).

In the File attribute, select Create a new view in this user area..., change the name to OnlineQuotes.Rwav and save the the changes in Folder Views Tool.

Open the newly created view for editing.

• Remove the default elements.
• Add a Text element with the name Quote.
  • Set the attributes Multiline to Yes and Show title to No.
  • Make the element bigger so some text can fit in it.
• Add a Button with the name GetQuote and place it under the Text element.
• Save the file.

In your browser, navigate to the new User Area and make sure the elements display correctly.

Adding the server-side code

In the view root object, on the Javascript tab, open up the ServerSideJS editor and paste the following code:

ServerSideJS

return {
    getQuote: async (args, callInfo) => {
        console.log('In getQuote');

        // This is where we get out data
        const url = 'https://type.fit/api/quotes';

        // Use the 'fetch' object in 'context' to get or post http data
        const response = await callInfo.context.fetch(url);

        // Convert/parse the response from json to an object (list)
        const quotes = await response.json();

        // Get a random quote from the converted list and return it
        const quote = quotes[Math.floor(Math.random() * quotes.length)];
        return quote;
    }
}

Warning

The data returned from the API is a list of ~1600 quotes and the name of its author:

[
  {
    "text": "Genius is one percent inspiration and ninety-nine percent perspiration.",
    "author": "Thomas Edison"
  },
  {
    "text": "You can observe a lot just by watching.",
    "author": "Yogi Berra"
  },
  {
    "text": "A house divided against itself cannot stand.",
    "author": "Abraham Lincoln"
  },
  ...
]

In this tutorial we're getting the entire list just to pick one random quote everytime the page is loaded. This is usually a bad idea, but for now we focus on functionality and not necessarily on good programming practices.

Adding the client-side code

Open the OnManeuver editor for the Button and paste the following code:

OnManeuver

this.view.call('.getQuote', { }).then((result) => {
  // Get the result (quote object) or default to an error text
  // if the result was null.
  const quote = result || '[Quote could not be fetched...]';

  console.log("Got a new quote:", quote);

  // Surround the quote with quotation marks.
  // Add two blank (new) lines.
  // Add the author surrounded by hyphens.
  this.view.Quote.value(`"${quote.text}"\n\n-${quote.author}-`);
});

The result

Open your browser and navigate to the area. The first time your view loads it should look like this:

Click GetQuote to trigger a fetch:

Quick review

In this part we registered a ServerSideFunction to fetch/get data from an online source. The example code could easily be modified to get basically any online resource, parse it and display it in a view.