具有不同嵌套 json 的 ng-repeat答案

【问题标题】：ng-repeat with different nested json具有不同嵌套 json 的 ng-repeat
【发布时间】：2015-11-08 04:15:26
【问题描述】：

所以我有一个返回活动列表的 API，但我必须一次获取 2 项信息，所以如果我在第一次调用时有 3 项，则返回的 json 将是这样的：

cesta{ 
fecha="14/08/2015 2:42:28 PM",  
tipo="9",  
pagina="1",
total="3",
inst [{ 

    nu_doc_opened="N",  
    nu_doc="14",  
    nu_inst="1",  
    nb_wf{ 
        cdata_section="Gestión calendario específico"
        }
    },
    nu_doc_opened="N",  
    nu_doc="15",  
    nu_inst="2",  
    nb_wf{ 
        cdata_section="Gestión calendario general"
        }
    }]
}

在下一次调用时，返回的 json 将是这样的

cesta{ 
fecha="14/08/2015 2:42:29 PM",  
tipo="9",  
pagina="2",
total="3",
inst { 
    nu_doc_opened="N",  
    nu_doc="16",  
    nu_inst="1",  
    nb_wf{ 
        cdata_section="Gestión calendario específico"
        }
    }
}

我想通过这个 json 并获取一些数据并将其放在一个表中，所以我尝试像这样使用 ng-repeat：（请注意，我只想获取一些值而不是全部)

$scope.basket= data.cesta.inst;

<tbody>
    <tr ng-repeat="b in basket">
    <td>{{b.nu_doc}}</td>
    <td>{{b.nu_inst}}</td>
    <td>{{b.nb_wf.cdata_section}}</td>
    </tr>  
</tbody>

问题是，当 json 在“inst”中有 2 个或更多对象时（如第一个示例中），这是有效的，因为它是一个数组，但是当它只有 1 个对象时不起作用，我该怎么做ng-repeat 在这两种情况下都有效吗？提前致谢

【问题讨论】：

标签： javascript html json angularjs

【解决方案1】：

这是因为在第二种情况下，它在迭代对象时获取对象，而不是像第一个数组中那样获取属性和值。

将该对象包装在数组中，然后它就可以工作了。

$scope.basket= angular.isArray(data.cesta.inst) ？ data.cesta.inst : [data.cesta.inst];

【讨论】：

是的，您必须确保您的 inst 始终是一个数组 :)
谢谢！这就是我想要的！工作完美

【解决方案2】：

您已经意识到，ng-repeat 需要一个数组。如果您不能强制端点始终返回一个数组（即使只有一个数据对象），那么您可能必须编写一个 hacky 解决方法。

一个古怪的想法：

$scope.basket = data.cest.inst.length !== undefined ? data.cest.inst : [data.cest.inst]

我想你明白了，但如果没有，这就是 $scope.basket 需要是一个数组的原因：简而言之：ng-repeat 需要一个数组。在第一种情况下，$scope.basket 是一个对象数组，但在第二种情况下，它只是一个对象。其次，您需要将对象放置在数组中（即[{nu_doc: ...}]），以便格式一致。（注意：只有一个对象的数组是可以的！）

例如，在第一种情况下，您会得到：

$scope.basket = [{nu_doc: ...}, {nu_doc: ...}]

您编写的 ng-repeat 语句可以正常工作。

但在第二种情况下，你会得到：

$scope.basket = {nu_doc: ...}

因此ng-repeat 将遍历该对象的属性（即nu_doc, nu_inst ...），而不是将其视为具有单个对象的数组，这正是您想要的。

所以你的第二个 JSON 需要是：

cesta{ 
fecha="14/08/2015 2:42:29 PM",  
tipo="9",  
pagina="2",
total="3",
inst [{ 
    nu_doc_opened="N",  
    nu_doc="16",  
    nu_inst="1",  
    nb_wf{ 
        cdata_section="Gestión calendario específico"
        }
    }
}]

【讨论】：