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

Question

iam currently working on my first angular/ionic app.

I have a big json file:

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

Now i want to create multiple views for each section of the workout.

Workout Name -> Workout Sessions (Weekdays) -> Exercises on this day.

So far i got something like this:

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

But this doenst work for me.

Have you any ideas whats the best way to navigate through this json file?

Thanks a lot!

Answer 1

First of all JSON Object is broken. ( I mean after you GET json file in JS code )

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 :

Answer 2

Dealing with nested JSON is simple. All you need to do is to make sure that your templates matches the JSON structure.

In your case, your model is actually an array, and it is nested with arrays, so the template that we need to build is a nested foreach template. I will be leaving out workoutSessionColor and workoutIcon in this example. but i am sure you will figure out how to utilize those information.

Go ahead and play with it on codepen. The following code snippets matches what's been posted on code pen.

Sample Html based on your json:

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

Sample css (trivial):

img{
  width:50px;
}

Angular code:

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