Javascript 离子型/角度型：如何浏览嵌套json

我目前正在开发我的第一款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>

{{workout.title}

但这对我不起作用

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

---

非常感谢

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

---

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

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

以下代码片段与代码笔上发布的内容相匹配

基于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>

角度代码：

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]
      }]
    }]
  }];
});

---

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

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]
      }]
    }]
  }];
});