Цикли з масивами, Json файлами та API
Цей документ описує підключення компонентів в циклах, ввивід контенту з json файлу, API та масиву.
Використання контенту з json:
Файли json з данними розміщуються у папці src/data/*.json, в циклі вказується лише назва файлу.
Данні елемента доступні в ключі який йде першим в loop="ключ_елемента, index in data".
Також доступні для використання параметри index та length.
// src/html/components/Products/Products.html// src/data/products.json<each data="products.json" loop="product, index in data"> <ProductCard product="{{product}}" index="{{index}}"/></each>або<each data="products.json" loop="product, index in data"> <div class="product-card"> <span>{{index + 1}}:</span> <img src="{{product.image}}" alt="{{product.title}}"/> <h2>{{product.title}}</h2> <p>{{product.info}}</p> </div></each>Використання index та length
<each data="products.json" loop="product, index in data"> <if condition="index < 10" <ProductCard/> </if> <if condition="length > 10" <Pagination/> </if></each>Використання контенту з API:
Для виводу контенту з відповіді API замість назви файлу вказується URL API.
Приклад з https://jsonplaceholder.typicode.com/users
// https://jsonplaceholder.typicode.com/users<each data="https://jsonplaceholder.typicode.com/users" loop="user, index in data"> <div class="user-card"> <span>{{index + 1}}:</span> <h2>{{user.name}}</h2> <p>{{user.username}}</p> <p>{{user.address.street}}</p> <p>{{user.email}}</p> </div></each>Простий цикл з масивом:
<ul class="list"> <each loop="item, index in ['apple', 'banana', 'orange']"> <li>{{index + 1}}: {{item}}</li> </each></ul>