Retrieve tasks from a database
In addition to manually adding tasks, you may also want to give users the ability to retrieve tasks from a database.
This topic shows how to retrieve todo tasks from a database via REST requests to the test endpoint
https://dummyjson.com/todos
.To modify the app to retrieve todo tasks from the REST endpoint:
- 1.Navigate to the Connect tab and click Add a new data connection.
- 2.(Optional) Change the Connection Name to a more descriptive name (e.g.
Todos Endpoint
). - 3.Locate the REST API option on the Add a new Connection popup and click Add Connection.
- 4.Set the URL to
https://dummyjson.com
and the Path to/todos
. - 5.Click Send in the Test Data Connection pane and verify that the
todos
JSON collection is returned. - 6.Click Publish to Logic to make the REST API connection available to the app.
- 7.In the Logic view, ensure the Home page is selected.
- 8.Add another call to the Combine component. This call will be connected in subsequent steps to automatically add todo items retrieved from the request component.
- Select the Combine component and open the quick selection State menu.
- Set Num Blocks to
3
.
- 9.Navigate to the Explorer tab and drag-and-drop the Home page reference and the request created in the previous steps onto the Home page. These will be used to get the todo items when the page loads.
- 10.Connect Home
onPageLoad
> requestcall
and preview the app. The todos node should appear in the request component upon previewing the app: - 11.Drag-and-drop For Each and Get Value at Path components onto the app, and make the following connections:
- request
onSuccess
> For Eachcall
: The Request component tells the For Each component to fetch todo tasks when the REST request successfully completes. - For Each
call
> Third Combinecall
: Each iteration performed by the For each component tells the Combine component to pass along a todo task. - For Each
item
> Get Value at Pathobject
: Each iteration performed by the For each component passes the current todo task element to the next component. - Get Value at Path
value
> Third Combineparam
: Extracts thetodo
field from the current element returned from the For Each component.
The logic should look as follows: - 12.Test the app. Upon loading, the Home page should display all of the todo tasks retrieved from the request component:
Congratulations! Your app can now display tasks stored in a database.
Last modified 1mo ago