Javascript 如何迭代对象，然后在单独的行中显示？

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

现在看起来像这样

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

我使用的是Aurelia框架，以下是我的观点：

}

---

我们接受所有反馈，谢谢

您只是循环浏览项目类型，但不使用该数据做任何事情。内部循环遍历所有项目并列出所有项目，无论它们的类型是什么

您需要重新构造数据，使projectType充当该类型所有项目的容器，或者添加一个if来检查项目的类型是否与projectType匹配，如下所示：对不起，我从未实际使用过Aurelia，因此可能无法正常工作

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

---

为什么图片中有两行？为了说明我的意思，让我们假设您有名为“前端”、“后端”和“用户界面”的文件夹。在这些文件夹中，每个文件夹都应该有各自的类型，但实际上，我正在将内容复制到每个文件夹中。您是否建议使用前者？而不是使用单独的数组？这是一个更难的数组，取决于您将如何使用数据。从语义上讲，项目类型不是项目本身的父类，因此如果需要一次访问所有项目或直接访问其中任何项目，我可能不会重新构造。将它们移动到它们的类型下需要你事先知道类型，或者反复遍历类型直到找到正确的类型。好的，我将继续使用if块，我不确定它在Aurelia中是如何工作的，仍然习惯它，我非常感谢你的帮助，回到我的投资组合构建。

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

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