JSON Data Sources
Work with static JSON files and data in your ForgeZap applications. Upload JSON files, use sample data, and create data-driven components with structured information.
Static Data
JSON data sources are perfect for configuration files, sample data, content management, and any structured data that doesn't change frequently.
JSON Data Overview
Use Cases
Configuration Data
- • Application settings
- • Feature flags
- • Theme configurations
- • User preferences
Content Data
- • Product catalogs
- • News articles
- • Documentation content
- • Sample datasets
Data Management
Upload JSON files from your computer
Edit JSON data directly in the interface
Export data for backup or sharing
Validate JSON structure and format
Working with JSON Data
Uploading JSON Files
Navigate to Data Sources → JSON Files
Click "Upload JSON File"
Select your JSON file from your computer
Validate the JSON structure
Save and start using the data
JSON Structure Requirements
Valid JSON Format
json
{
"users": [
{
"id": 1,
"name": "John Doe",
"email": "john@example.com",
"role": "admin"
},
{
"id": 2,
"name": "Jane Smith",
"email": "jane@example.com",
"role": "user"
}
]
}Common Structures
- • Array of objects - Perfect for data tables
- • Nested objects - Good for configuration data
- • Key-value pairs - Simple settings and preferences
- • Mixed structures - Complex data relationships
JSON Data Examples
Product Catalog
Example JSON structure for a product catalog:
json
{
"products": [
{
"id": "prod-001",
"name": "Wireless Headphones",
"description": "High-quality wireless headphones with noise cancellation",
"price": 199.99,
"currency": "USD",
"category": "Electronics",
"inStock": true,
"images": [
"https://example.com/headphones-1.jpg",
"https://example.com/headphones-2.jpg"
],
"specifications": {
"battery": "30 hours",
"connectivity": "Bluetooth 5.0",
"weight": "250g"
}
}
]
}Configuration Data
Example JSON structure for application configuration:
json
{
"app": {
"name": "My Application",
"version": "1.0.0",
"theme": {
"primaryColor": "#3B82F6",
"secondaryColor": "#64748B",
"darkMode": false
},
"features": {
"notifications": true,
"analytics": true,
"socialLogin": false
},
"api": {
"baseUrl": "https://api.example.com",
"timeout": 5000,
"retries": 3
}
}
}Connecting to Components
Data Table Component
Display JSON data in a data table:
Select Data Table component
Go to Data tab in properties
Choose "JSON File" as data source
Select your uploaded JSON file
Map JSON fields to table columns
Text Components
Display specific values from JSON data:
Add Text component to your canvas
Connect to JSON data source
Use dot notation to access nested values
Apply formatting and transformations
Data Access Patterns
Accessing Nested Data
Dot Notation
javascript
// Access nested values
"{{app.theme.primaryColor}}"
"{{user.profile.name}}"
"{{product.specifications.battery}}"Array Access
javascript
// Access array elements
"{{products[0].name}}"
"{{users[1].email}}"
"{{images[0]}}"Data Transformations
Text Transformations
javascript
// Format text
"{{product.name.toUpperCase()}}"
"{{user.email.toLowerCase()}}"
"{{description.substring(0, 100)}}..."Number Formatting
javascript
// Format numbers
"{{price.toFixed(2)}}"
"{{quantity.toString()}}"
"{{(price * 1.1).toFixed(2)}}"Data Management
Updating JSON Data
Edit JSON data directly in the interface
Upload a new version of the JSON file
Refresh components to see changes
Data Validation
Automatic JSON syntax validation
Structure validation for expected formats
Error reporting for invalid data
Best Practices
JSON Structure
Keep your JSON structure consistent and well-organized. Use meaningful field names and maintain a logical hierarchy for nested data.
Data Size
JSON files work best for smaller datasets. For large amounts of data, consider using the database or API data sources instead.
Data Updates
JSON data is static and doesn't update automatically. Use this for configuration data, content that changes infrequently, or sample data for development.