javascript - 如何遍历一个对象，然后将其显示在单独的行中？

Question

我想要完成的是迭代一个对象，每个对象都有一个 type 属性。目标是迭代每个对象并将它们显示在由其类型指定的行中。

现在看起来像这样

我想做的是将前端、后端和 UI 放在不同的行上。

我正在使用Aurelia Framework，这是我的观点:

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

这是我的模型:

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"
            ]
        }
    ]
}

}

接受任何和所有反馈，谢谢!

Answer 1

您只是循环访问项目类型，但不将该数据用于任何用途。内部循环遍历所有项目并列出所有项目，无论它们的类型是什么。

您需要重构数据，以便 projectType 充当该类型所有项目的容器，或者添加一个 if 来检查项目的类型与 projectType 匹配，如下所示:(请原谅，我从未真正使用过 Aurelia，因此可能无法按原样工作)

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