Load data from external APIs dynamically
LokaScript now supports the native fetch URL as json syntax! You can also use the call fetch() method with JavaScript's Fetch API.
Two Methods:
Native:fetch 'URL' as json - Built-in LokaScript syntax
Alternative:call fetch('URL').then(r => r.json()) - JavaScript Fetch API
callfetchJSONasync
Demo 0: Native Fetch Syntax (LokaScript)
Test the built-in fetch URL as json syntax:
Demo 1: Fetch User Data
Click the button to load a random user from JSONPlaceholder API:
⏳
Demo 2: Load Blog Posts
Load a list of posts from the API:
⏳
Demo 3: Error Handling
Try fetching from an invalid endpoint to see error handling:
❌ Error:
The Code
Basic Fetch:
<button _="on click
fetch 'https://api.example.com/data' as json
put it into #output">
Load Data
</button>
With Loading State:
<button _="on click
add .loading to me
show #spinner
fetch 'https://api.example.com/users' as json
put it into userData
-- Process the data
hide #spinner
remove .loading from me">
Fetch
</button>
Loop Through Results:
<button _="on click
fetch 'https://api.example.com/posts' as json
put it into posts
set html to ''
repeat for post in posts
set html to html + `<div>${post.title}</div>`
end
put html into #list">
Load Posts
</button>
Error Handling:
<button _="on click
fetch 'https://api.example.com/data' as json
if it == null
put 'Error: Failed to load data' into #error-message
show #error-box
else
put it into #output
end">
Load
</button>
How it works:
fetch 'URL' as json - Built-in LokaScript fetch command
put it into variable - Store the parsed response data
fetch command - Automatically waits for the request to complete
repeat for item in items - Loops through array results
if it == null - Check for failed requests
Template literals (`${variable}`) - Embed data in HTML
Key Concepts:
Fetch Command: Native syntax: fetch 'URL' as json
Response Type: Use as json, as html, or as text
Promise Handling: Fetch automatically waits for the request
Result Variable:it contains the parsed response data directly
Template Literals: Use backticks for string interpolation
Error Handling: Check if it == null for failed requests
Response Type Options:
fetch 'URL' as json - Parse JSON response
fetch 'URL' as text - Get plain text response
fetch 'URL' as html - Parse HTML fragment
fetch 'URL' as response - Get raw Response object
HTTP Methods (with options):
<!-- POST request -->
fetch '/api/users' as json with {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: 'John', email: 'john@example.com' })
}
put it into newUser
<!-- PUT request -->
fetch '/api/users/1' as json with {
method: 'PUT',
body: JSON.stringify({ name: 'Updated Name' })
}
put it into updatedUser
<!-- DELETE request -->
fetch '/api/users/1' with { method: 'DELETE' }
log 'User deleted'
Common Use Cases:
Load User Data: Fetch and display profile information
Blog Posts: Load and render article lists
Search Results: Fetch filtered data based on input
Form Submission: POST data to server
Auto-complete: Fetch suggestions as user types
Pagination: Load more items on button click
Try it yourself:
Add search functionality that fetches based on input