Ionic/Angular：如何浏览嵌套的 json答案

【问题标题】：Ionic/Angular: How to navigate through nested jsonIonic/Angular：如何浏览嵌套的 json
【发布时间】：2016-04-12 18:27:43
【问题描述】：

我目前正在开发我的第一个 angular/ionic 应用程序。

我有一个很大的 json 文件：

userWorkouts: [{
  title: '3 Split',
  id: 1,
  workoutImg: 'img.jpg',
  workoutSessions: [{
    workoutSessionName: 'Monday',
    workoutSessionColor: "#000000",
    workoutIcon: "icon-monday",
    workoutExerciseList: [{
      exerciseName: "Pull Ups",
      exerciseSets: [20, 12, 8]
    }, {
      exerciseName: "Push Ups",
      exerciseSets: [1, 2, 8]
    }]
  }, {
    workoutSessionName: 'Wednesday',
    workoutSessionColor: "#FFFFFF",
    workoutIcon: "icon-wednesday",
    workoutExerciseList: [{
      exerciseName: "Trizep",
      exerciseSets: [20, 12, 8]
    }, {
      exerciseName: "Xyz",
      exerciseSets: [1, 2, 8]
    }]
  }]
}

现在我想为锻炼的每个部分创建多个视图。

锻炼名称 -> 锻炼课程（工作日） -> 这天的锻炼。

到目前为止，我得到了这样的东西：

<ion-item ng-repeat="workout in workoutList" class="workout-list-item item item-thumbnail-left" ui-sref="app.workoutSessionList({workoutIndex: $index})">
    <img class="" src="{{workout.workoutImg}}">
    <h2>{{workout.title}}</h2>
    <ion-option-button class="button-positive icon ion-edit" ng-click="deleteUserWorkout(workout)"></ion-option-button>
    <ion-option-button class="button-assertive icon ion-trash-a" ng-click="deleteUserWorkout(workout)"></ion-option-button>

  </ion-item>

但这对我不起作用。

你知道浏览这个 json 文件的最佳方式是什么吗？

非常感谢！

【问题讨论】：

你可以使用嵌套的 ng-repeat 来实现这个场景。
我已经在下面发布了一个答案。它是基于您提供的 json 的示例。

标签： javascript angularjs json ionic-framework

【解决方案1】：

首先 JSON 对象被破坏。（我的意思是在你在 JS 代码中获取 json 文件之后）

If userWorkouts is child of workoutList  Then you should use 
workout in workoutList.userWorkouts in ng-repeat

Else JSON object should have been userWorkouts = [{}]; = inplace of :

【讨论】：

【解决方案2】：

处理嵌套的 JSON 很简单。您需要做的就是确保您的模板与 JSON 结构匹配。

在您的情况下，您的模型实际上是一个数组，并且它与数组嵌套，因此我们需要构建的模板是嵌套的 foreach 模板。在此示例中，我将省略 workoutSessionColor 和 workoutIcon。但我相信你会弄清楚如何利用这些信息。

Go ahead and play with it on codepen. 以下代码 sn-ps 与代码笔上发布的内容相匹配。

基于您的 json 的示例 Html：

<div ng-app="myApp" ng-controller="TestController">

  <div ng-repeat="workout in userWorkouts">

    <p ng-bind="workout.title"></p>
    <img src="{{workout.workoutImg}}">

    <table border=1>
      <tr ng-repeat="workoutDays in workout.workoutSessions">
        <td ng-bind="workoutDays.workoutSessionName"></td>
        <td>
          <p ng-repeat="sessionExercise in workoutDays.workoutExerciseList">
            {{sessionExercise.exerciseName}} | {{sessionExercise.exerciseSets}}
          </p>
        </td>
      </tr>
    </table>

  </div>

</div>

示例 css（简单）：

img{
  width:50px;
}

角度代码：

var app = angular.module("myApp", []);

app.controller("TestController", function($scope){
  $scope.userWorkouts= [{
    title: '3 Split',
    id: 1,
    workoutImg: 'https://cdn3.iconfinder.com/data/icons/workouts/500/push_up-512.png',
    workoutSessions: [{
      workoutSessionName: 'Monday',
      workoutSessionColor: "#000000",
      workoutIcon: "icon-monday",
      workoutExerciseList: [{
        exerciseName: "Pull Ups",
        exerciseSets: [20, 12, 8]
      }, {
        exerciseName: "Push Ups",
        exerciseSets: [1, 2, 8]
      }]
    }, {
      workoutSessionName: 'Wednesday',
      workoutSessionColor: "#FFFFFF",
      workoutIcon: "icon-wednesday",
      workoutExerciseList: [{
        exerciseName: "Trizep",
        exerciseSets: [20, 12, 8]
      }, {
        exerciseName: "Xyz",
        exerciseSets: [1, 2, 8]
      }]
    }]
  }];
});

【讨论】：