在使用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内部执行或抓取二级对象。