AngularJS中动态遍历JSON数据的实现问题求助

嘿，我太懂你遇到的这个坑了——在AngularJS里用动态变量访问对象属性时，点语法确实会失效！

问题根源 #

你当前写的ctrl.tableData.catName，Angular会把它当成直接访问tableData里**名为"catName"**的固定属性，而不是把catName作为变量去取它对应的值（比如"kids"、"men"）。这就是硬编码ctrl.tableData.kids能正常运行，但用变量就不行的核心原因。

解决方案 #

要动态访问对象属性，必须用方括号语法替代点语法，把ctrl.tableData.catName改成ctrl.tableData[catName]。另外还要注意一个小细节：HTML里<tr>不能直接嵌套在<div>中，得放在<table>或<tbody>这类表格容器里，否则会出现DOM结构错误。

下面是修正后的完整代码示例：

<table>
  <tbody ng-repeat="catName in ctrl.tableData.categories">
    <tr ng-repeat="item in ctrl.tableData[catName]">
      <!-- 这里可以按需展示子节点的属性，比如 -->
      <td>分类标签：{{ item.categories }}</td>
      <td>分类标题：{{ item.categoryTitle }}</td>
    </tr>
  </tbody>
</table>

为什么这样能行？ #

方括号语法obj[variable]支持通过变量的值动态获取对象属性。当catName循环到"kids"时，ctrl.tableData[catName]就等价于ctrl.tableData.kids，完美匹配你JSON里的对应节点，自然就能正确遍历每个分类下的子数据了。

如果你的tableData是从Flask后端获取的，AngularJS的$http服务默认会自动把JSON响应解析成JavaScript对象，所以不需要额外做解析处理~

内容的提问来源于stack exchange，提问作者Jitender