🔗 AppML – How to Connect API: Display External JSON in HTML Without JavaScript

🧲 Introduction – Why Use APIs with AppML?

APIs are essential for dynamic applications, allowing you to fetch real-time data such as products, users, news, or weather. AppML lets you consume RESTful JSON APIs directly inside HTML—without writing a single line of JavaScript.

🎯 In this tutorial, you’ll learn:

• How to connect external APIs using AppML
• How to bind API data to HTML elements
• How to display the data with {{}} placeholders
• How to filter or modify data using controllers
• Full code examples with detailed explanations

---

🧱 AppML API Integration Basics

AppML uses the appml-data attribute to fetch external data via HTTP GET and render it using HTML templates.

<div appml-data="https://api.example.com/data">
  <p>{{title}}</p>
</div>

🔍 How it works:

• The URL must return a JSON array of objects.
• AppML loops through each object and replaces {{field}} placeholders.
• The repeated HTML block (here, <p>) is generated for each item.

---

🧪 Example 1: Display User List from API

We’ll use this sample public API:
🔗 https://jsonplaceholder.typicode.com/users

✅ JSON Response Sample:

[
  { "id": 1, "name": "Leanne Graham", "email": "leanne@example.com" },
  { "id": 2, "name": "Ervin Howell", "email": "ervin@example.com" }
]

---

✅ HTML Code:

<div appml-data="https://jsonplaceholder.typicode.com/users">
  <h3>User Directory</h3>
  <p>{{name}} – {{email}}</p>
</div>

🔍 Code Explanation:

Line	Description
appml-data="..."	Fetches JSON data from the provided URL.
<h3>	A static heading above the list.
<p>{{name}} – {{email}}</p>	Repeats for each object; replaces {{name}} and {{email}} with data from the API.

---

🧪 Example 2: Render API Data in a Table

✅ HTML Code:

<div appml-data="https://jsonplaceholder.typicode.com/posts">
  <table border="1">
    <tr>
      <th>ID</th><th>Title</th>
    </tr>
    <tr>
      <td>{{id}}</td>
      <td>{{title}}</td>
    </tr>
  </table>
</div>

🔍 Code Explanation:

Line	Description
appml-data="..."	Calls an API returning post data.
<table>	A static table structure for the output.
<th> row	Sets column headers: ID and Title.
<tr><td>{{id}}</td><td>{{title}}</td></tr>	This row is cloned for every item in the array and filled with the actual values from the API.

---

🧪 Example 3: Filtering API Data Using Controller

Let’s show only the first 5 posts.

✅ filter-controller.js

myAppML.onshow = function() {
  myAppML.filter = function(row) {
    return row.id <= 5;
  };
};

✅ HTML Code:

<div 
  appml-controller="filter-controller.js"
  appml-data="https://jsonplaceholder.typicode.com/posts">
  <p>{{id}} – {{title}}</p>
</div>

🔍 Code Explanation:

• onshow runs after data loads.
• myAppML.filter applies a function to each row.
• Only rows where id <= 5 are displayed.
• The <p> line is repeated for each filtered row.

---

🛠️ Example 4: Proxying Authenticated API via PHP

If your API requires headers (e.g., token authentication), AppML alone won’t work. Instead, use a PHP proxy:

✅ PHP Proxy: api-proxy.php

<?php
$opts = ["http" => ["header" => "Authorization: Bearer YOUR_TOKEN"]];
$context = stream_context_create($opts);
echo file_get_contents("https://api.example.com/secure-data", false, $context);
?>

✅ HTML:

<div appml-data="api-proxy.php">
  <p>{{title}}</p>
</div>

🔍 Code Explanation:

• PHP fetches secured API data with headers.
• AppML reads the result from the proxy script as if it were a normal JSON file.

---

💡 Best Practices & Tips

Tip	Reason
✅ Use CORS-friendly APIs	AppML uses AJAX, which requires CORS
✅ Ensure data is a JSON array	AppML requires top-level array for iteration
❌ Don’t use APIs with tokens directly	Expose via a backend proxy
✅ Combine with controllers	For filtering, formatting, or sorting

---

📌 Summary – Recap & Key Takeaways

🔍 What You Learned:

• How appml-data fetches data from public APIs
• How to bind JSON fields with {{field}}
• How to format output as paragraphs or tables
• How to use controllers for filtering API data
• How to use a PHP proxy for authenticated APIs

⚙️ AppML’s API integration is perfect for dashboards, catalogs, and public-facing views without needing any JavaScript.

---

❓ FAQs – AppML API Usage

---

❓ Can AppML send POST or PUT requests?
❌ No. AppML only supports GET requests via appml-data.

---

❓ Can AppML consume nested JSON like user.name?
⚠️ Not directly. Flatten or restructure via controller or backend.

---

❓ Can I fetch data from private APIs using tokens?
✅ Yes, but through a secure proxy script (e.g., PHP).

---

❓ What happens if API doesn’t return an array?
❌ AppML will not render anything. Use a controller or backend to transform the structure.

---

❓ Can I display images or links from API data?
✅ Yes! Use <img src="{{imageUrl}}"> or <a href="{{link}}">Visit</a> inside your AppML block.

---

Share Now :