🧾 Case – Loading Data from JSON in AppML: Power Your App with Modern Data

🧲 Introduction – Why JSON is the Ideal Format for AppML

JSON (JavaScript Object Notation) is the most widely used data format in modern web development. It’s lightweight, easy to parse, and pairs perfectly with AppML. Whether you’re pulling records from an API or using a static data file, JSON is the go-to structure for creating dynamic, data-driven web apps using AppML.

🎯 In this guide, you’ll learn:

• How to load JSON files into AppML using appml-data
• How JSON fields bind to HTML using {{ }}
• How to structure your JSON for AppML compatibility
• Practical use cases and advanced integration options

---

📁 What Should JSON Look Like for AppML?

AppML expects your JSON to be an array of objects—each representing a single record, with consistent field names.

✅ Example: data/products.json

[
  { "id": 1, "name": "Laptop", "price": 1000 },
  { "id": 2, "name": "Phone", "price": 500 },
  { "id": 3, "name": "Tablet", "price": 700 }
]

Each object in the array maps directly to one record in your app.

---

🧾 HTML Example – Displaying JSON Data

<div appml-data="data/products.json">
  <p>{{name}} – ${{price}}</p>
</div>

✅ AppML:

• Loads products.json using AJAX
• Iterates through each record
• Replaces {{name}} and {{price}} with values from each object

---

🧠 Combine JSON with Models

For structured data, validation, and forms, pair your JSON file with a model:

<div 
  appml-data="data/products.json" 
  appml-model="models/product-model.json">
  <p>{{name}} – ${{price}}</p>
</div>

✅ Sample Model (product-model.json)

{
  "rows": 10,
  "orderby": "name",
  "fields": [
    { "name": "name", "required": true },
    { "name": "price", "datatype": "number" }
  ]
}

✔️ Adds paging, sorting, and required field validation.

---

🔍 Filtering JSON Data

AppML lets you filter data before it appears on screen:

✅ JavaScript Controller Snippet

myAppML.onshow = function() {
  myAppML.filter = "price > 600";
};

Only records where price > 600 will be displayed.

---

💾 Editing JSON Data (Form Example)

AppML can display JSON records in a form-like layout:

<div 
  appml-data="data/products.json" 
  appml-model="models/product-model.json">
  <input name="name">
  <input name="price" type="number">
  <button appml-submit>Save</button>
</div>

Note: You can’t write back to a local JSON file from the browser. Use a server API for POST/PUT.

---

🧰 Use Cases for JSON in AppML

📦 Scenario	💬 Why JSON Is Perfect
Product catalogs	Fast and structured
Static profile lists	Loads easily on any device
Academic data reports	Exported JSON fits AppML instantly
API responses	Ideal for dynamic updates
Form-driven UIs	Structure and validate input

---

📌 Summary – Recap & Key Takeaways

JSON is AppML’s most powerful and flexible data format. It enables you to quickly display, filter, and interact with structured data, whether it’s local or coming from an external API.

🔍 Key Takeaways:

• Use appml-data="file.json" to load JSON
• JSON must be an array of records (objects with consistent keys)
• Combine with models to enable forms, sorting, and validation
• Use controllers for filtering, custom logic, and pagination
• Can’t write back to local JSON—requires backend handling

⚙️ JSON + AppML = low-code, high-efficiency data-driven applications.

---

❓ FAQs – Working with JSON in AppML

---

❓ Can AppML load JSON from external APIs?
✅ Yes, as long as the API returns a JSON array and has CORS enabled.

---

❓ Do I need a model to use JSON?
❌ No, but using a model adds structure, sorting, and form validation features.

---

❓ What happens if one record in the JSON is missing a field?
✅ AppML still renders it. The missing field’s {{}} will simply be blank.

---

❓ Can I edit and save back to the JSON file?
❌ Not directly. Use a server-side script (PHP, Node.js, etc.) to handle data updates.

---

❓ Can JSON be nested (objects within objects)?
⚠️ Not recommended. AppML works best with flat JSON records.

---

Share Now :