采用了棱角分明NG-重复显示JSON行/列 [英] using Angular ng-repeat to display JSON rows/columns

问题描述

我从API取回JSON是场（即表列）第一嵌套，然后记录（即表中的行）。因此，JSON看起来是这样的：

The JSON I am getting back from the API is nested FIRST by field (i.e. table columns), THEN by record(i.e. table rows). So, the JSON looks like this:

myJSON = {
    'data':{
        'id': [1,2,3],
        'groks':['a','b','c']
    }
}

我试图用角来在我的表中正确显示它们。这是他们应该如何看：

I'm trying to use angular to display them correctly in my table. This is how they're supposed to look:

id groks
 1   a
 2   b
 3   c

这不是那么简单

<tbody ng-repeat="x in myJSON.data">
    <tr>
        <td>{{x[0]}}</td>
        <td>{{x[1]}}</td>
    </tr>
</tbody>

由于我将最终这一点，或诸如此类：

Because I'll end up with this, or somesuch:

id groks
 a   b  
 1   2

所以，我怎么告诉NG重复通过外柱通过内行第一迭代，然后呢？

So, how do I tell the ng-repeat to FIRST iterate through the inner rows, THEN through the outer columns?

长的方式是$ P $对操纵JSON成可以迭代的格式。即我需要操纵数据，直到它看起来是这样的：

The long way is to pre-manipulate the JSON into a format that can be iterated. i.e. I need to manipulate the data until it looks like this:

myJSON = {
    'data':{
        ['id': 1,'groks':'a'],
        ['id': 2,'groks':'b'],
        ['id': 3,'groks':'c']
    }
}

然后，我可以做到这一点：

And then I can do this:

<tbody ng-repeat="x in myJSON.data">
    <tr>
        <td>{{x.id}}</td>
        <td>{{x.groks}}</td>
    </tr>
</tbody>

但我有什么替代方案？

But do I have any alternate options?

推荐答案

您可以只遍历数组中的一个，并使用 $指数来得到任何相应的元素其他数组：

You can just iterate over one of the arrays and use $index to get the corresponding elements in any other arrays:

<tbody ng-repeat="id in myJSON.data.id">
    <tr>
        <td>{{id}}</td>
        <td>{{myJSON.data.gorks[$index]}}</td>
    </tr>
</tbody>

这篇关于采用了棱角分明NG-重复显示JSON行/列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！