代码之家  ›  专栏  ›  技术社区  ›  DaveC426913

使用Angular ng repeat显示JSON行/列

  •  0
  • DaveC426913  · 技术社区  · 12 年前

    我从API返回的JSON是按字段(即表列)嵌套的,然后按记录(即表行)嵌套的。因此,JSON如下所示:

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

    我正在尝试使用angular在表格中正确显示它们。这就是他们应该看起来的样子:

    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>
    

    因为我会以这样的方式结束:

    id groks
     a   b  
     1   2
    

    那么,我如何告诉ng repeat首先遍历内部行,然后遍历外部列?

    很长一段路是将JSON预处理为可以迭代的格式。即我需要操纵数据,直到它看起来像这样:

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

    然后我可以这样做:

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

    但我有其他选择吗?

    1 回复  |  直到 12 年前
        1
  •  1
  •   rob Victor Ramos    12 年前

    您只需遍历其中一个数组,然后使用 $index 以获得任何其他数组中的对应元素:

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