如何迭代對象，然後在不同的行中顯示？

我試圖完成的是遍歷一個對象，每個對象都有一個type屬性。目標是遍歷每個對象並將它們顯示在由它們的type指定的行中。如何迭代對象，然後在不同的行中顯示？

現在它看起來像這樣

我試圖做的是有前端，後端和用戶界面上單獨列。

我使用奧裏利亞框架，這是我的觀點：

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

}

任何和所有的反饋意見都被接受，謝謝！

來源

2017-06-08 ARLCode

爲什麼圖片中有兩行？ – brk

爲了表明我的意思，讓我們說你有名爲的文件夾：前端，後端，用戶界面。在每個文件夾裏應該有它們各自的類型，但是發生的是我將內容複製到每個文件夾中。 – ARLCode

您只是遍歷項目類型，但不要將該數據用於任何事情。內部循環遍歷所有項目並列出所有項目，不管它們的類型是什麼。

你要麼需要調整你的數據，以便projectType充當該類型的所有項目的容器中，或添加if，檢查該項目的類型相匹配projectType這樣的：（原諒我，我從沒實際上使用Aurelia所以可能不工作）

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

來源

2017-06-08 04:01:37 Kaivosukeltaja

你會推薦做前者嗎？而不是有一個單獨的數組？ – ARLCode

是的，你解決了我的問題，芽謝謝！ – ARLCode

這是一個更困難的，取決於你將如何使用數據。語義上，項目類型不是項目本身的父項，所以如果我有任何需要直接訪問所有項目或者直接訪問所有項目的情況，我可能不會重組。將它們移動到它們的類型下需要事先知道類型或遍歷類型，直到找到合適的類型爲止。 – Kaivosukeltaja

如何迭代對象，然後在不同的行中顯示？

回答

相關問題