Thunkable Docs
Build an AppDrag and Drop DocsSnap to Place DocsAcademy
Drag and Drop
Drag and Drop
  • What is Thunkable?
  • 🗺️Getting Started
    • Getting Started Guide
    • Keyboard Shortcuts
    • Undo Redo
    • Thunkable Account
      • Account Management
    • Preview and Test your App
    • Versioning
    • Data Sources
      • Google Sheets Data Source
      • Airtable Data Source
      • Webflow Data Source
      • Local Table Data Source
    • Project Collaboration
      • Organizations
    • 🎓Sample Apps & Tutorials
      • Thunkable Community Forums
      • Sample Apps
      • Video Tutorials
        • Thunkable Live App
          • How to Test and Troubleshoot with Thunkable Live App
        • Data Source Tutorials
          • Connecting to Data Sources
            • Google Sheets
            • Local Table
          • Create Data in a Thunkable Data Source
          • Read Data in a Thunkable Data Source
          • Update Data in a Thunkable Data Source
          • Delete Data in a Thunkable Data Source
        • User Auth & Management
          • Firebase
            • User Sign-Up, Sign-In, and Auth
            • User Sign Out and Password Reset
          • Google
            • User Sign-Up, Sign-In, Sign-Out, and Auth
          • Apple
            • User Sign-Up, Sign-In, Sign-Out, and Auth
        • Projects
          • How to Save Versions of Your Thunkable Project
          • How to Copy and Customize Public or Sample Thunkable Projects
        • User Interface & Design
          • Screens
            • Save and Reuse Thunkable Screens
            • Change Thunkable Screens with a Button Click
            • Create Scrollable Screens in Your Thunkable App
          • Navigators
            • How to Use the Thunkable Stack Navigator
            • How to Use Thunkable Top and Bottom Tab Navigators
            • How to Use the Thunkable Drawer Navigator
            • Combine Figma Frames with Thunkable Navigators
          • Components
            • How to Use the Visibility Property to Create Modals in Thunkable
          • Data Visualization
            • Customize a Data Viewer
          • Text
            • Implement Text Input Validation
        • Alerts & Notifications
          • Display Alert Messages in Your Thunkable App
          • How to Create Three-Button Alert Messages
        • Files
          • Cloudinary
            • Store and Access Cloudinary Files in Your Thunkable App
        • Camera
          • How to Use the Device’s Camera
          • How to Use the Device’s Video Camera
          • Use the Device’s Camera as a QR or Barcode Scanner
        • Realtime Databases
          • Firebase
            • How to Read Data in a Firebase Realtime Database
            • How to Update Data in a Firebase Realtime Database
        • Advanced Blocks
          • Connect Your Thunkable App to a Web API
        • Thunkable Academy
          • Building Your First Thunkable App
            • Getting Started with Thunkable
            • How to Design a Thunkable App
            • How to Connect a Thunkable App to a Data Source
            • How to Make A Thunkable App Interactive with Blocks
          • Thunkable No Code App Creation Basics
            • Thunkable UI Components and App Features
            • Understanding Thunkable's Drag and Drop Block Builder
            • Design, Develop, Debug, and Deploy Your App
        • Hour of Code
          • 2021 - Build an Informational App
          • 2022 - Build a Scavenger Hunt App
          • 2023 - Build a Translator and Text-to-Speech App
        • App Building
          • How to Build a Translation App in Thunkable
          • How to Create an Image Recognition App with Thunkable
          • How to Create a Text-to-Speech App in Thunkable
  • 🎨App Design
    • User Interface (UI) Components
      • Basic Components
        • Button Component
        • Label Component
        • Rich Text Component
        • Image Component
        • Text Input Component
        • Layout Component
        • Group Component
      • Data Components
        • Simple List Component
        • Data Viewer Components
          • Data Viewer List Component
          • Data Viewer Grid Component
          • Custom Data Viewer
      • Input Components
        • Switch Component
        • Slider Component
        • Checkbox Component
        • Date Input Component
        • Time Input Component
      • Media Components
        • Animation Component
        • Video Component
        • Loading Icon Component
      • Embed Components
        • Web Viewer Component
        • Map Component
        • Canvas Component
        • PDF Reader Component
        • Rating Component
      • Modules
        • Introduction
        • User Guide
      • Generative AI
    • Screens
      • Save and Reuse Screens
      • Improve Thunkable Load Time
    • Navigators
      • Top Tab Navigator
      • Bottom Tab Navigator
      • Drawer Navigator
      • Stack Navigator
    • Figma Integration
  • 🛠️Blocks
    • Thunkable Blocks Overview
    • Core Blocks
      • Control Blocks
      • Logic Blocks
      • Math Blocks
      • Text Blocks
      • Lists Blocks
      • Color Blocks
      • Device Blocks
      • Objects Blocks
      • Variables Overview
        • Connect a Firebase Realtime Database
        • Variables Blocks
      • Functions Blocks
    • App Features Blocks
      • Speech Blocks
      • Sound Blocks
      • Share Blocks
      • Camera Blocks
      • Files Blocks
      • Sign In Blocks
        • User Sign Up, Sign In, and Authentication with Firebase
        • User Sign Up, Sign In, and Authentication with Google
        • User Sign Up, Sign In, and Authentication with Apple
      • Location Blocks
      • Push Notification Blocks
      • In-App Purchase Blocks (with RevenueCat)
      • Data Sources Blocks
      • Alerts Blocks
      • Timer Blocks
      • Sensors Blocks
        • Gyroscope
        • Magnetometer
        • Accelerometer
        • Location Sensor
      • Ads by AdMob
    • Advanced Blocks
      • Web APIs Blocks
        • CORS Policy
        • 🆓No Auth APIs
          • Update Data in a Data Source
          • CRUD Operations
          • Setting Headers
        • 📊Charting APIs
          • Create a chart template
          • Charting in Thunkable
      • Bluetooth Low Energy Blocks
      • OpenAI Services ChatGPT Integration Blocks
      • "Any Component" Blocks
      • JavaScript Web Bridge
  • ⚙️Settings
    • App Settings
      • Tablet View
    • Assets
    • Cloud Variable Viewer
    • Manage your Projects
      • My Projects Page
      • Thunkable Projects
      • Duplicate Project
      • Share Your App
      • Download Your App
        • Download Your App on iOS
        • Download Your App on Android
      • Add to Home Screen
      • Managing Project Storage
      • App Data Privacy
      • Delete Project
  • 📱Publishing
    • Overview
    • Publish to the Apple App Store
      • User Guide
      • Troubleshooting
      • Review Process
      • Tracking Usage Description
    • Publish to Google Play Store
      • User Guide
      • Troubleshooting
      • Review Process
    • Publish as a Web App
      • User Guide
      • Custom Domains
      • Troubleshooting
    • Testing
      • Testing on iOS via TestFlight
      • Testing on Android
    • Troubleshooting
      • Publishing Checklist
      • Generate Screenshots
  • 🎮Gaming
    • Gaming Overview
      • Canvas Label
      • Sprites
      • Sprite Gallery
    • Gaming Blocks
      • Events
      • Motion
      • Looks
      • Direction
      • Sensing
      • Add & Remove
      • Stage
  • 🗃️Additional Resources
    • Release Notes
      • Release Notes 2024
      • Release Notes 2023
    • Troubleshooting
      • Can't Sign in to Thunkable?
      • FAQs
    • Minimum Requirements
    • Bugs and Product Feedback
    • App Services and Emulators
Powered by GitBook
On this page
  • Overview
  • Video Tutorial
  • How to Connect Your Thunkable App to a Web API
  • Add a Web API to Your App
  • Edit properties of your Web API
  • Setting URL, Query Parameters, Body and Headers
  • URL
  • Query Parameters
  • Body
  • Headers
  • Get and Format (parse) Data
  • Get Simple Properties
  • Get Nested Properties
  • Get Properties from Lists
  • Upload data
  • Delete data
  • See Also

Was this helpful?

Export as PDF
  1. Blocks
  2. Advanced Blocks

Web APIs Blocks

PreviousAdvanced BlocksNextCORS Policy

Last updated 5 months ago

Was this helpful?

Overview

Great data is an essential part of many apps built today and the Web API component enables apps to retrieve data from any public or private API (application programming interface) service on the web. For more advanced developers who have write access to a private API, this component also enables you to upload and delete data.

To see what public APIs are available, we recommend .

Video Tutorial

How to Connect Your Thunkable App to a Web API

In this tutorial, you’ll learn what an API is, connect a Thunkable project to a web API, retrieve and parse the relevant data from the API, and use Thunkable blocks to modify the API URL that is called.

Add a Web API to Your App

To add a Web API component to your app:

  • Go to your Blocks tab.

  • Scroll to the bottom of your blocks panel on the left side and find the Advanced section.

  • Click the expand chevron to show the Advanced invisible components.

A Web API component properties dialog launches. See the chart below for descriptions of the various properties. Click Submit to create the Web API component, or Delete to dismiss the dialog without creating the component.

Once you have the API key, you'll need to enter the unique URL into the property field of the Web API component.

Property
Description
Required?

URL

The url for the web request which usually contains an API key

Required

QueryParameters

Specifies some parameters of the data

Optional

Body

Body of your API call. Select from String or Multipart Form Data.

Optional

Headers

Specifies some meta-data, eg: usernames and passwords

Optional

Edit properties of your Web API

Once you have added at least one Web API component to your app, you will be able to view all of your Web API components under the Web APIs drawer in the Advanced section of the Blocks tab.

To edit the properties of a Web API component, click on the ⚙ icon next to the component's name to bring up the properties dialog. You will be able to change the properties and click Submit to save your changes, or click Delete to delete the component.

Setting URL, Query Parameters, Body and Headers

URL, Query parameters, Body, and Headers can be set in the blocks editor.

URL

Set URL

Get URL

Returns the URL of the selected API.

Query Parameters

Set Query Parameters

You can add any property: value pair you want. You can add as many parameters to your API properties as you need, but each parameter has to be added one at a time.

In the blocks editor, it is possible to use the create object block to add multiple property: value pairs simultaneously.

In addition to creating your own objects, it is also possible to use JSON to specify the property: value pairs for your query parameters or headers.

Get URL

Returns the Query Parameters of the selected API.

Body

Set Body

Get Body

Returns the Body of the selected API.

Headers

Set Headers

Get Headers

Returns the Header of the selected API.

Get and Format (parse) Data

To retrieve data from an API, you simply need to use the Get block.

Event
Description

Get (response, status,error)

Performs an HTTP GET request using the Url property and retrieves the response. Reports status of request and if the request does not go through, will report an error

Get Simple Properties

One of the most common output formats for APIs is JSON, short for Javascript Object Notation. The Open Weather Map API returns a JSON file like the one below.

{
    "coord":{"lon":85.17,"lat":26.67},
    "weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"04n"}],
    "base":"stations",
    "main":{
        "temp":298.312,
        "pressure":1005.31,
        "humidity":94,
        "temp_min":298.312,
        "temp_max":298.312,
        "sea_level":1011.47,
        "grnd_level":1005.31},
    "wind":{"speed":2.96,"deg":79.5005},
    "clouds":{"all":92},
    "dt":1533157826,
    "sys":{
        "message":0.0034,
        "country":"IN",
        "sunrise":1533080664,
        "sunset":1533128790},
    "id":1273043,
    "name":"Dhaka",
    "cod":200
}

In your JSON response, objects can be found within the " quotes " followed by a colon :. The properties of the object follow the colon : but are within the { curly brackets}.

Convert JSON to Object

Get Property of Object

Once you have converted the JSON into objects, you can then specify the objects and property that you are interested in. To get the name of the city we are viewing weather data for ("name": in line 22), we'll want to get the property name of the response:

Get Nested Properties

If we wanted to get the temperature in Dhaka from the Open Weather API above, we would need to do the following:

  • Convert the JSON response to an object

  • Get the property main of the response object

  • Get the property temp of main

We can write this as getting the property main.temp of the response object:

Get Properties from Lists

The JSON output of the Google Maps Distance Matrix API seems similar to the Open Weather Map API with one notable exception: it includes objects, properties and lists. Lists are items bounded by [ square brackets ].

{
   "destination_addresses" : [ "Los Angeles, CA, USA" ],
   "origin_addresses" : [ "San Francisco, CA, USA" ],
   "rows" : [
      {
         "elements" : [
            {
               "distance" : {
                  "text" : "617 km",
                  "value" : 616620
               },
               "duration" : {
                  "text" : "5 hours 45 mins",
                  "value" : 20680
               },
               "status" : "OK"
            }
         ]
      }
   ],
   "status" : "OK"
}

If you want to retrieve the "text" property in line 13, you'll have to:

  • convert the JSON to an object

  • select the "rows" property of the object

  • select the first item in the list

  • select the "elements" property of the rows object

  • select the first item in the list

  • select the "duration" property of the elements object

  • select the "text" property of the duration object

This can also be written as the property rows[1].elements[1].duration.text of the response:

Upload data

Uploading and deleting data is usually reserved for a private API that you or your organization owns

Event
Description

Put (response, status,error)

Performs an HTTP PUT request using the Url property and retrieves the response. Reports status of request and if request does not go through, will report an error

Post (response, status,error)

Performs an HTTP POST request using the Url property and retrieves the response. Reports status of request and if request does not go through, will report an error

Patch (response, status, error)

Performs an HTTP PATCH request using the Url property and retrieves the response. Reports status of request and if request does not go through, will report an error

Delete data

Event
Description

Delete (response, status,error)

Performs an HTTP DELETE request using the Url property and retrieves the response. Reports status of request and if request does not go through, will report an error

See Also

Click the ⊕ icon next to Web APIs.

Set the URL to the selected API. You can also connect a block or to set the URL.

Set the Body of the selected API. You can connect a block or a block.

Set the Headers of the selected API. You can connect a .

Most APIs will return data in JSON format, so we'll take a few moments to walk through a few examples of how to parse this data using our blocks.

Example 1:

In the example above, "base", "dt", "id", "name" and "cod" are simple properties of the JSON response. "coord" , "main" , "wind", "clouds" and "sys" are properties of the overall response, but each of these properties is also an object with properties of its own, or contained within the { curly brackets }. "weather" is a one-item list which also contains an object.

The first step in parsing this response is converting the JSON response to an . Objects have properties (like name) that we can retrieve and display in our app. Objects can be embedded within another object.

You can read about getting nested values from Objects .

You can read about getting nested values and values from lists in Objects . Let's work through an example.

Example 2:

You can find a working example of this in the sample app, .

You can see the example below for how this would look using the and blocks

You can also post and receive messages between a web page and a using the Post Message function. Read more about that .

Have feedback on this doc? Please take a moment to share your feedback here: . Your valuable insights will help us improve and better serve you in the future.

🛠️
Text
variable
generate JSON from object
Text
create object block
Object
Open Weather Map API
Object
Google Maps Distance Matrix API
Ride
Object
List
Thunkable Docs Feedback
this list from Todd Motto
Web Viewer
nested properties,
here
here
here