AppML JSON Data — Using JSON Files and APIs as Data Sources

In this tutorial, you will learn about AppML JSON Data. We cover key concepts, practical examples, and best practices to help you master this topic.

AppML supports JSON data sources for both static JSON files and live REST API endpoints, automatically mapping JSON objects to table rows for seamless integration with your models.

What You'll Learn

You will configure JSON datasources for files and APIs, understand JSON-to-table mapping, handle API authentication, and manage read-only versus writable endpoints.

Why It Matters

Modern web applications consume JSON from REST APIs and microservices. AppML's JSON data service lets you build a unified interface over multiple JSON sources without writing HTTP client code or JSON Parsing logic.

Real-World Use

Durga Antivirus Pro aggregates threat intelligence from three external JSON APIs. AppML presents the combined data in a single dashboard, refreshing from each API on a configurable schedule.

flowchart LR
    A[AppML Model] --> B[JSON Data Service]
    B --> C[JSON File]
    B --> D[REST API]
    D --> E[Authentication]
    E --> F[HTTP Request]
    F --> G[JSON Response]
    G --> H[Parse & Map]
    H --> I[UI Rendering]
    style B fill:#1e293b,color:#fff
    style I fill:#0f172a,color:#fff

JSON File Data Source

A JSON file data source reads data from a local JSON file.

<appml>
  <datasource type="json">
    <connection file="./data/users.json"/>
    <table name="user">
      <field name="id" type="integer" key="true"/>
      <field name="name" type="string"/>
      <field name="email" type="string"/>
      <field name="role" type="string"/>
    </table>
  </datasource>
</appml>

Expected output: AppML reads users from the JSON file and generates the standard CRUD interface.

The JSON file should contain an array of objects:

[
  {"id": 1, "name": "Alice", "email": "alice@example.com", "role": "admin"},
  {"id": 2, "name": "Bob", "email": "bob@example.com", "role": "editor"}
]

Expected output: Each array element becomes a row in the generated table.

REST API Data Source

A REST API data source connects to a live HTTP endpoint.

<appml>
  <datasource type="json">
    <connection url="https://api.example.com/v1/users">
      <header name="Authorization" value="Bearer token123"/>
      <header name="Accept" value="application/json"/>
    </connection>
    <table name="user">
      <field name="id" type="integer" key="true"/>
      <field name="name" type="string"/>
      <field name="email" type="string"/>
    </table>
  </datasource>
</appml>

Expected output: AppML fetches user data from the API on page load, parsing the JSON response into the generated list view.

The connection element supports headers for authentication tokens, content type negotiation, and custom parameters.

Nested JSON Structures

JSON data often contains nested objects. AppML maps nested fields using dot notation.

{
  "id": 1,
  "title": "Introduction to Web Security",
  "author": {
    "name": "Jane Smith",
    "email": "jane@example.com"
  },
  "tags": ["security", "web", "beginners"]
}

Model with nested and array field mapping:

<field name="author_name" path="author.name" type="string"/>
<field name="author_email" path="author.email" type="string"/>
<field name="primary_tag" path="tags.0" type="string"/>

Expected output: Nested fields appear as flat columns. Array elements are accessed by index.

Read-Only and Writable APIs

Not all JSON APIs support write operations. Configure your model accordingly.

<table name="user" readonly="true">
  <field name="id" type="integer" key="true"/>
  <field name="name" type="string"/>
</table>

Expected output: The generated UI shows the data without Add, Edit, or Delete buttons. The view is display-only.

For writable APIs, AppML sends POST for create, PUT for update, and DELETE for delete operations to the configured URL.

Caching JSON Data

Frequent API calls can be slow and hit rate limits. AppML caches JSON responses.

<datasource type="json">
  <connection
    url="https://api.example.com/v1/products"
    cache_ttl="300"
  />
  ...
</datasource>

Expected output: The first request fetches from the API and caches the response for 300 seconds. Subsequent requests use the cached data.

Common Mistakes

1. Not configuring authentication headers for private APIs: Most APIs require an API key or bearer token. Missing authentication results in 401 errors.

2. Assuming all JSON APIs return arrays: Some APIs wrap data in an object like {"data": [...]}. Use the root_path attribute on the table to specify the JSON path to the array.

3. Forgetting rate limits: API calls on every page load exceed rate limits quickly. Use caching to minimize requests.

4. Using JSON file service for write-heavy data: AppML rewrites the entire JSON file on every write. For frequent writes, use a database.

5. Not handling API downtime: The JSON service may block page loading if the API is unreachable. Configure timeouts and fallback behavior.

Practice Questions

1. How do you specify authentication for a JSON API data source?

Use <header> elements inside the <connection> element to set authorization headers.

2. What attribute marks a JSON datasource as read-only?

readonly="true" on the <table> element. The generated UI hides write controls.

3. How do you map a nested JSON field like author.name?

Use the path attribute with dot notation: path="author.name".

4. What caching option reduces API calls?

The cache_ttl attribute on the connection element, specified in seconds.

5. How does AppML send data to a writable API?

POST for create, PUT for update, DELETE for delete operations to the configured base URL.

Challenge

Create an AppML model that connects to a public JSON API (like a weather or GitHub API). Configure caching, handle nested response structures, and display the data in a formatted list view.

Frequently Asked Questions

Mini Project

Create a weather dashboard using a free weather API as a JSON data source. Configure caching for 10 minutes. Display city name, temperature, humidity, and weather conditions in a list view. Add a filter for city name.

What's Next

Continue to SQL Data to learn advanced SQL data source configuration including stored procedures, views, and complex queries.