在使用ng-repeat中的另一個對象時訪問對象屬性

Question

在我的項目中，我通過GET請求獲得了JSON響應。 subTopics將由用戶選擇並存儲。之後，我使用所選的ID向服務器發送POST請求。

例JSON1：（來自GET請求）

{ 
"TopicList" : 
    [{ 
    "id": "1234", 
    "name": "topic1", 
    "number": "1", 
    "subTopics": [ 
     { 
      "id": "4567", 
      "name": "subTopic1.1", 
      "number": "1.1" 
     }, 
     { 
      "id": "9876", 
      "name": "subTopic1.2", 
      "number": :1.2" 
     } 
    ] 
    }] 
} 

在POST響應我從服務器獲取，這我在我的HTML視圖作爲一個表以顯示另一個JSON對象。在響應JSON中，我有subTopics id（由用戶選擇），但我沒有與id關聯的subTopic名稱。

我必須在我的表中顯示subTopic名稱，這是在一個單獨的對象中可用（見上面的JSON文件）。我不知道如何在使用另一個JSON對象時訪問第一個JSON對象。

我的表視圖看起來像這樣，

<tr ng-repeat-start="tableRow in searchCtrl.tableViewData" ng-click="tableRow.expanded = !tableRow.expanded"> 
    <td>{{tableRow.project.name}}</td> 
    <td>{{tableRow.project.number}}</td> 
    <td>{{tableRow.project.endDate | date}}</td> 
    <td>{{tableRow.topicIds[0]}}</td> 
    <td>{{tableRow.matching.score}}</td> 
</tr> 

正如你所看到的第4行：<td>{{tableRow.topicIds[0]}}</td>顯示的ID。我如何顯示topicName？

任何幫助將是可觀的。

EDIT

以我控制器此變量包含上述JSON對象。

if (!self.topic) { 
     searchService.getTopic().then(
      function (response) { 
       self.topic = response.data; 
      }, 
      function (error) { 
       alert("Server is not found"); 
      } 
     ); 
} 

因此，主題變量包含響應JSON對象。也許它會有所幫助。

Answer 1

您可以創建一個函數，它接受一個id並返回subTopic。

$scope.getSubTopic = function(id) { 
    var selectedSubTopic = {}; 

    angular.forEach(subTopics, function(subTopic) { 
    // loop through subTopics until a matching id is found 
    if (subTopic.id === id) { 
     selectedSubTopic = subTopic; 
     return; 
    } 
    }); 

    return selectedSubTopic; 
}; 

那麼你就可以更新你的第四排：

<td>{{getSubTopic(tableRow.topicIds[0]).name}}</td> 

這裏假設你有一個數組命名的子主題。

編輯

正如我在評論這最終會進行重頁和/或大型數據集相當緩慢提及。您可能需要爲subTopics生成一個地圖對象以便快速訪問。不利的一面是每次修改TopicList時都必須生成它。

function generateSubTopicMap(topics) { 
    var map = {}; 

    angular.forEach(topics, function(topic) { 
    angular.forEach(topic.subTopics, function(subTopic) { 
     // use this if you want the map to reference the same data 
     // (i.e. updating subTopic.name will update the map at the same time) 
     map[subTopic.id] = subTopic; 

     // use this if you don't want the map to reference the same data 
     // map[subTopic.id] = {}; 
     // angular.copy(subTopic, map[subTopic.id]); 

     // you can also add the parent id here if you need access to it 
     // this will modify the original object if you use the first method! 
     // map[subTopic.id].parentId = topic.id 
    }); 
    }); 

    return map; 
} 

輸出看起來像：

{ 
    "4567": { 
    "id": "4567", 
    "name": "subTopic1.1", 
    "number": "1.1" 
    }, 
    "9876": { 
    "id": "9876", 
    "name": "subTopic1.2", 
    "number": :1.2" 
    } 
} 

有了這個，你會稱它爲後，每GET請求，並把它傳遞主題的陣列。

// where topics is the response from the GET request 
$scope.subTopics = generateSubTopicMap(topics); 

最後，以顯示你只需要：

<td>{{subTopics[tableRow.topicIds[0])].name}}</td> 

編輯2

Here is a jsfiddle展示瞭如何使用第二種方法。你所要做的就是將包含你的TopicList的數組傳遞給generateSubTopicMap，它返回一個對象，其中的鍵名爲subTopic ID，值作爲subTopic本身。

我不會擔心我的第一個解決方案。它不會在ng-repeat內部執行或抓取二級對象。