SAP Learning Journey

Fetching and Displaying Data From the API

Objectives
After completing this lesson, you will be able to:

After completing this lesson, you will be able to:

  • Explain variables
  • Get the food product data
  • Use a data variable to store the data
  • Work with and display the data

Introduction: Fetching and Displaying Data from the API

In order to make your mobile app useful, it now needs to consume data. variables are used to store data which we will get from the API, so that you can work with it and display it in the user interface of the app.

A variable is a symbol that works as a placeholder for something, such as a number or expression, that could change. The changing value of this variable may then change the logic flow.

A variable is just some value we’re interested in storing, which will change over time.

Variables can contain anything from numbers to text to much more complex data. Variables are typically only stored while the application remains active, and are reset when the application is shut down. They are used in any situation in application development when you have a piece of information that you’d like to recall at a later point in time in the application.

All of the variables in the application form the application state. The state is not something you can see, rather it’s the idea that all the combinations of all the different variables can be thought of as different application states.

This idea will be useful to us when we next look at how UI connects with variables in the Food Barcode Scanner App.

Get the Food Product Data

Now that our data research for the API is set up, we can use it to fetch our food facts data and display it.

Fetching and Displaying Data From the API

Use a Data Variable to Store Data

Using a Data Variable to Store Data

The next step is to create a data variable for your Food Barcode Scanner App. Data variables are a special type of variable that is connected to a specific data resource that we’ve set up. In this case, it’s the OpenFoodFacts API.

After that, in the logic for the Scan Barcode button, we’ll add the set data variable flow function.

Work With and Display the Data

Now that we’ve got our logic and data set up, we’ll go back to working on the user interface, where it’s going to display.

Save progress to your learning plan by logging in or creating an account

Login or Register
Continue to next lesson