Thunkable Docs
Build an AppDrag and Drop DocsSnap to Place DocsAcademy
Drag and Drop
Drag and Drop
  • What is Thunkable?
  • 🗺️Getting Started
    • Gen AI
    • 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 2025
      • 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
  • How do I use an API?
  • Overview
  • Design Your User Interface
  • Show the Picture
  • Display single random image from All Dogs collection
  • Display the Name
  • Conclusion
  • Questions?

Was this helpful?

Export as PDF
  1. Blocks
  2. Advanced Blocks
  3. Web APIs Blocks
  4. No Auth APIs

CRUD Operations

PreviousUpdate Data in a Data SourceNextSetting Headers

Last updated 2 years ago

Was this helpful?

How do I use an API?

Most modern APIs will have support for a variety of CRUD operations. In this context, the acronym CRUD stands for Create, Read, Update, Delete. While most API developers probably won't want to give just anyone free rein to change or remove data on their system there are plenty out there who provide public, read-only access to their end points. This is also convenient for us, since reading data from an API and displaying it in a Thunkable app is probably the easiest way to familiarise ourselves with APIs.

At the end of this tutorial, you should be able to

  1. Send a GET request to an API

  2. Parse (interpret) a response from that API.

Overview

Remix Link:

The app we're going to build in this example is called "Dogs-as-a-Service". It connects to the and can "fetch" an image and breed name for a random dog.

Design Your User Interface

At its core we need at least three components to get this app working correctly; a Button to send the API request, an Image to show the picture in the response and a Label to display the name of the dog breed. If you want your project to look the same as the sample project then you can go ahead and make a copy of it for yourself.

Show the Picture

Our response contains just two properties, message and status which really makes this API as easy as possible for us to work with.

Display single random image from All Dogs collection

GET https://dog.ceo/api/breeds/image/random

{
    "message": "https://images.dog.ceo/breeds/cotondetulear/IMAG1063.jpg",
    "status": "success"
}

Display the Name

The URLs for every image also contain the breed names for each dog. If you look closely you'll notice they all follow the same pattern:

https://API-HOST/DOG-BREED/DOG-IMAGE.jpg

What we want to do is grab the name of the dog breed, remove any stray backslashes and convert it to Title Case. In practice, this involves using the make list from text blocks and then the in list get # block to get the name of the breed and then pass that through the Title Case text block to output the nicely formatted dog breed in our label.

Sub Breeds

While the above approach works perfectly well for pugs and collies, our API is set up in such a way that you might also see responses like "terrier-welsh" or "terrier-westhighland". The second if then do block below shows one way that you can split the text at the hyphen and display the words in reverse order.

Conclusion

In this first example we've learned how make a Get request in Thunkable and use the object blocks to retrieve information from the API response. We've also seen firsthand how just a handful of list and text blocks can be combined to extract additional information and present it to the end user in an easy-to-read format.

Questions?

If you have any questions about this tutorial, please post them over in the Thunkable Community

Let's begin by sending a GET request the to API. Notice here that the purple Get block returns three parameters; response, status and error. If anything goes wrong with the request then an error will be returned so it's always a good idea to do some error handling in your app. The status block returns the HTTP status. According to there are about 30 different response codes. You don't need to remember what they all mean but it is good to know that a response code in the 200s is successful, codes in the 300s are for redirects and status codes in the 400s correspond to errors. Indeed you may already be familiar with the 404 error code for "Page Not Found". The example below has some basic error handling and, if successful, displays the entire JSON response in a label.

All we need to do here is get the value from the message property and pass that to our image component. The in Thunkable make this incredibly easy to do and we can set our picture by using just two of them. First we have to convert the raw JSON response into an object using the get object from JSON block, then we can go ahead and get the message value and pass it to the image component using the get property of object block like this:

Community Link:

🛠️
🆓
this list
object blocks
https://community.thunkable.com/t/dog-breeds-api-tutorial/
https://x.thunkable.com/projectPage/620e62ccc6b7590159627317
dog.ceo API