AppML – How to Create Lists: Display Dynamic Data Without JavaScript

Introduction – Why Use AppML to Create Lists?

When building dynamic websites or dashboards, displaying a list of items—like users, products, or tasks—is essential. With AppML, you can create lists directly in HTML and bind them to JSON, XML, or database data without writing any JavaScript.

In this guide, you’ll learn:

• How to create dynamic lists using appml-data
• How to connect to different data formats (JSON, XML, server)
• How to loop and render content using {{}} syntax
• How to filter, sort, and style lists dynamically

What Is a List in AppML?

In AppML, a list is any repeating HTML block (like <li> or <p>) inside a container that has an appml-data attribute. AppML uses this attribute to load data and repeat the content for each item.

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

AppML replaces {{name}} and {{email}} with data from each record.

Example 1 – Display List from JSON File

users.json

[
  { "name": "Alice", "email": "alice@example.com" },
  { "name": "Bob", "email": "bob@example.com" }
]

HTML List

<div appml-data="users.json">
  <p>{{name}} – {{email}}</p>
</div>

AppML repeats the <p> element for each user, binding {{name}} and {{email}}.

Example 2 – List with <ul> and <li>

<div appml-data="data/tasks.json">
  <ul>
    <li>{{title}} – Status: {{status}}</li>
  </ul>
</div>

Sample tasks.json

[
  { "title": "Design Landing Page", "status": "In Progress" },
  { "title": "Test User Flow", "status": "Completed" }
]

✔️ The list will auto-render with all task titles and statuses.

Example 3 – Bind List from PHP (MySQL)

PHP Endpoint: employees.php

<?php
include("appml.php");
$appml = new AppML();
$appml->model = "models/employees-model.json";
$appml->run();
?>

HTML List

<div 
  appml-data="employees.php" 
  appml-model="models/employees-model.json" 
  appml-message>
  
  <h2>Employee List</h2>
  <p>{{name}} – {{department}}</p>
</div>

JSON Model: employees-model.json

{
  "key": "id",
  "table": "employees",
  "fields": [
    { "name": "name", "required": true },
    { "name": "department" }
  ]
}

How AppML Processes Lists

1. Loads the data source specified by appml-data.
2. Searches for a repeating block inside the container (like <p> or <li>).
3. For each record, clones the block and replaces {{field}} with actual values.
4. Renders the final HTML on the page.

Filter and Sort Lists

AppML supports client-side filtering with custom JS:

<input oninput="myAppML.filter='name.includes('+this.value+')'">

For sorting, use orderby in your model:

"orderby": "name"

Or sort manually via controller functions.

Styling Dynamic Lists

Summary – Recap & Key Takeaways

Creating dynamic lists in AppML is as easy as writing standard HTML. You just plug in your data using appml-data and wrap the display in repeatable tags. No JavaScript, loops, or DOM handling required!

Key Takeaways:

• Use appml-data to connect to JSON, XML, or PHP endpoints
• Write {{field}} placeholders to bind data into HTML
• Works with <p>, <li>, <div>, and table rows
• Supports filtering, styling, and model-based validation
• Perfect for product lists, task lists, staff directories, and more

AppML lists are lightweight, clean, and ideal for building responsive frontends with real-time content.

FAQs – Creating Lists in AppML

Can I nest lists in AppML (e.g., categories with sub-items)?
AppML does not natively support nested loops. Flatten your data or use custom controller logic.

Can I bind lists to XML data?
Yes. AppML supports XML files, as long as the structure is consistent and array-like.

Can I display images in lists with AppML?
Yes. Use <img src="{{image_url}}"> inside your list item.

How many records can AppML list before it lags?
AppML handles 100–500 records well. Use pagination ("rows": 20 in model) for larger datasets.

Can I make lists editable using AppML?
Yes. Add <input appml-field="name"> to each item and enable model-based update support.