XML and LIST Integration
See also: Unified Dot Notation System, XML and HTML Processing, List Operations
Best Practices: - Use XML embedding in LIST for structured data with mixed content - Leverage dot notation for direct XML element access from LIST - The
<>syntax is automatically added when XML is embedded in LIST
Overview
Grapa provides seamless integration between XML and LIST types, allowing you to embed XML structures within LIST objects and access XML elements directly using dot notation. This creates powerful data structures that combine the flexibility of JSON-like objects with the structure of XML documents.
XML Embedding in LIST
Basic Embedding
XML structures can be embedded directly in LIST objects:
/* Embed XML in LIST */
div = <div class="main"><h1>Title</h1><p>Content</p></div>;
arr = {a:5, b:div, c:"hi"};
arr.echo(); /* {"a":5,"b":<div class="main"><h1>Title</h1><p>Content</p></div><>,"c":"hi"} */
Note: The <> syntax is automatically added by Grapa when XML is embedded in LIST structures.
Direct XML Creation in LIST
/* Create XML directly within LIST */
arr = {a:5, b:<div>test</div>, c:"hi"};
arr.echo(); /* {"a":5,"b":<div>test</div><>,"c":"hi"} */
Dot Notation Access
Element Access
You can use dot notation to access XML elements directly from within a LIST:
/* Access XML elements using dot notation */
arr = {a:5, b:<div><h1>Title</h1><p>Content</p></div>, c:"hi"};
/* Access the XML structure */
arr.b.echo(); /* <div><h1>Title</h1><p>Content</p></div> */
/* Access specific elements */
arr.b[0].h1.echo(); /* <h1>Title</h1> */
arr.b[0].p.echo(); /* <p>Content</p> */
/* Access element content */
arr.b[0].h1[0].echo(); /* "Title" */
arr.b[0].p[0].echo(); /* "Content" */
Nested Element Access
/* Access nested XML elements */
arr = {a:5, b:<div><section><h1>Title</h1><p>Content</p></section></div>, c:"hi"};
/* Access nested elements */
arr.b[0].section[0].h1[0].echo(); /* "Title" */
arr.b[0].section[0].p[0].echo(); /* "Content" */
Multiple Elements
/* Access multiple elements of the same type */
arr = {a:5, b:<div><h1>Title 1</h1><h1>Title 2</h1><p>Content</p></div>, c:"hi"};
/* Access first h1 */
arr.b[0].h1[0].echo(); /* "Title 1" */
/* Access second h1 */
arr.b[0].h1[1].echo(); /* "Title 2" */
Complex Data Structures
Mixed Content
/* Create complex structures with mixed content */
data = {
user: {
name: "Alice",
profile: <div class="profile">
<h1>Alice's Profile</h1>
<p>Welcome to my profile!</p>
</div>,
settings: {
theme: "dark",
notifications: true
}
},
metadata: {
created: "2024-01-01",
version: "1.0"
}
};
/* Access mixed content */
data.user.name.echo(); /* "Alice" */
data.user.profile[0].h1[0].echo(); /* "Alice's Profile" */
data.user.settings.theme.echo(); /* "dark" */
Configuration with XML Templates
/* Use XML templates in configuration */
config = {
templates: {
header: <header class="main-header">
<h1>Welcome</h1>
<nav><a href="/">Home</a></nav>
</header>,
footer: <footer class="main-footer">
<p>© 2024 My App</p>
</footer>
},
settings: {
theme: "light",
language: "en"
}
};
/* Access template elements */
config.templates.header[0].h1[0].echo(); /* "Welcome" */
config.templates.footer[0].p[0].echo(); /* "© 2024 My App" */
LIST Embedding in XML
Basic Embedding
LIST structures can also be embedded within XML:
/* Embed LIST in XML */
xml = <root><data>{a:1, b:2, c:3}</data></root>;
xml.echo(); /* <root><data>{a:1,b:2,c:3}</data></root> */
Accessing Embedded LIST
/* Access LIST within XML */
xml = <root><data>{a:1, b:2, c:3}</data></root>;
/* Access the LIST content */
xml[0][0][0].echo(); /* "{a:1,b:2,c:3}" */
/* Note: The LIST is treated as a string within XML */
Advanced Patterns
Dynamic Content Generation
/* Generate dynamic XML content */
users = [
{id:1, name:"Alice", role:"admin"},
{id:2, name:"Bob", role:"user"},
{id:3, name:"Charlie", role:"user"}
];
/* Create XML with dynamic content */
user_list = <div class="user-list">{
users.map(op(user){
<div class="user" data-id={user.id}>
<h3>{user.name}</h3>
<span class="role">{user.role}</span>
</div>;
})
}</div>;
user_list.echo();
Template System
/* Create a template system */
templates = {
card: <div class="card">
<h2>{title}</h2>
<p>{content}</p>
<button class="btn">{button_text}</button>
</div>,
modal: <div class="modal">
<div class="modal-header">
<h1>{title}</h1>
<button class="close">×</button>
</div>
<div class="modal-body">{content}</div>
</div>
};
/* Use templates with data */
data = {title:"Hello", content:"World", button_text:"Click me"};
card = templates.card; /* Template with placeholders */
Use Cases
1. Web Application Configuration
/* Application configuration with UI templates */
app_config = {
name: "My App",
version: "1.0.0",
ui: {
header: <header class="app-header">
<h1>My App</h1>
<nav><a href="/">Home</a><a href="/about">About</a></nav>
</header>,
footer: <footer class="app-footer">
<p>© 2024 My App</p>
</footer>
},
api: {
base_url: "https://api.example.com",
timeout: 30
}
};
/* Access configuration */
app_name = app_config.name;
header_title = app_config.ui.header[0].h1[0];
api_url = app_config.api.base_url;
2. Content Management System
/* CMS with mixed content types */
page = {
title: "Welcome Page",
content: <article class="main-content">
<h1>Welcome to Our Site</h1>
<p>This is the main content area.</p>
<div class="sidebar">
<h2>Quick Links</h2>
<ul><li><a href="/about">About</a></li><li><a href="/contact">Contact</a></li></ul>
</div>
</article>,
metadata: {
author: "Alice",
published: "2024-01-01",
tags: ["welcome", "introduction"]
}
};
/* Access page content */
page_title = page.title;
main_heading = page.content[0].h1[0];
sidebar_links = page.content[0].sidebar[0].ul[0];
3. API Response Processing
/* Process API responses with mixed content */
api_response = {
status: "success",
data: {
users: [
{id:1, name:"Alice", avatar:<img src="/avatars/alice.jpg" alt="Alice"/>},
{id:2, name:"Bob", avatar:<img src="/avatars/bob.jpg" alt="Bob"/>}
],
pagination: {
page: 1,
total: 100
}
}
};
/* Access response data */
users = api_response.data.users;
first_user_avatar = users[0].avatar[0];
total_pages = api_response.data.pagination.total;
Performance Considerations
Efficient Access Patterns
/* Cache frequently accessed elements */
arr = {a:5, b:<div><h1>Title</h1><p>Content</p></div>, c:"hi"};
/* Cache the XML structure */
xml_content = arr.b[0];
/* Access cached elements */
title = xml_content.h1[0];
content = xml_content.p[0];
Memory Management
- XML embedded in LIST maintains its structure
- Dot notation access is efficient for nested elements
- Consider caching frequently accessed elements
Best Practices
1. Structure Design
/* Design clear, hierarchical structures */
config = {
ui: {
components: {
header: <header>...</header>,
footer: <footer>...</footer>
}
},
data: {
api: {...},
cache: {...}
}
};
2. Consistent Naming
/* Use consistent naming conventions */
templates = {
user_card: <div class="user-card">...</div>,
product_card: <div class="product-card">...</div>,
modal_dialog: <div class="modal">...</div>
};
3. Error Handling
/* Handle missing elements gracefully */
arr = {a:5, b:<div><h1>Title</h1></div>, c:"hi"};
/* Safe access */
if (arr.b[0].p.type() != $ERR) {
content = arr.b[0].p[0];
} else {
content = "No content available";
}