Search code examples
javascriptloopsaurelia

How do I iterate through an object but display then in separate rows?

What I'm trying to accomplish is iterating through an object, each of the object has a type property. The goal is to iterate through each object and display them in a row designated by their type.

Right now it looks like this enter image description here

What I'm trying to do is have the Frontend, Backend, and UI on separate rows.

I'm using Aurelia Framework, here's my View:

<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>

Here's 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 and all feedback is accepted, thank you!

Solution

  • You are just looping through the project types but don't use that data for anything. The inner loop goes through all projects and lists them all, no matter what their type is.

    You'll need to either restructure your data so that projectType acts as a container for all projects of that type, or add an if that checks that the project's type matches projectType like this: (pardon me, I've never actually used Aurelia so might not work as-is)

    <div if.bind="projectType == project.type">
  <h3 class="${project.type}">${project.type}</h3>
  <h1>${project.name}</h1>
</div>