My goal is to loop through an object where each item has a type property. The objective is to iterate through the objects and display them in rows based on their type.
Currently, it looks like this: https://i.sstatic.net/8iTtG.png
I aim to have Frontend, Backend, and UI displayed on separate rows.
Utilizing the Aurelia Framework, below is my View setup:
<template>
<div class="project-preview-container container">
<div class="row" repeat.for="projectType of projectTypes">
<div class="col-md-3 project-preview" repeat.for="project of projects">
<h3 class="${project.type}">${project.type}</h3>
<h1>${project.name}</h1>
</div>
</div>
</div>
This is my Model:
export class Portfolio {
constructor() {
this.header = "Portfolio";
this.projectTypes = ["Frontend", "Backend", "UI"];
this.projects = [
{
name: "Project Name 1",
type: "Frontend",
img: [
"Image 1",
"Image 2",
"Image 3"
],
descriptionTitle: [
"Description Title 1",
"Description Title 2",
"Description Title 3"
],
description: [
"Description 1",
"Description 2",
"Description 3"
]
},
{
name: "Project Name 2",
type: "Frontend",
img: [
"Image 1",
"Image 2",
"Image 3"
],
descriptionTitle: [
"Description Title 1",
"Description Title 2",
"Description Title 3"
],
description: [
"Description 1",
"Description 2",
"Description 3"
]
},
{
name: "Project Name 3",
type: "Backend",
img: [
"Image 1",
"Image 2",
"Image 3"
],
descriptionTitle: [
"Description Title 1",
"Description Title 2",
"Description Title 3"
],
description: [
"Description 1",
"Description 2",
"Description 3"
]
},
{
name: "Project Name 4",
type: "UI",
img: [
"Image 1",
"Image 2",
"Image 3"
],
descriptionTitle: [
"Description Title 1",
"Description Title 2",
"Description Title 3"
],
description: [
"Description 1",
"Description 2",
"Description 3"
]
}
]
}
}
Any feedback or suggestions are welcome. Thank you!