Retrive Data from nested JSON and display a list using AngularJS

Question

I'm currently working on an app with AngularJS and JSON data and got stuck at a point. Also I'm newbie with Angular. Here it is:

The controller snippet:

courseController.controller('LectureController', ['$scope', '$http', function($scope, $http){

    $http.get('js/data.json').success(function(data){

        $scope.lecture = **data.course[4].lectures**;

        $scope.lectureOrder = 'videoId';
    });
}]);

And the view is:(Details.html)

<section class="artistinfo">
  <div class="artist cf" ng-model="courses">
    <div align="right"><a href="#/details/{{prevItem}}" class="btn btn-left">&lt;</a>
    <a href="#/details/{{nextItem}}" class="btn btn-left">&gt;</a></div>
    <img ng-src="{{courses[whichItem].thumbnail}}" alt="Photo of {{courses[whichItem].name}}">
    <h1>{{courses[whichItem].name}}</h1>
    <div class="info">
      <h3>{{courses[whichItem].description}}</h3>

      <div align="right">Lectures: {{courses[whichItem].lectures.length}}</div>
      <div align="center">
        <a href="#/lectures/{{courses[whichItem].courseId}}">
          <button>Get Started</button></div>
        </a>
    </div>
  </div>
  <a href="index.html">&laquo; Back to search</a>
</section>

(Lectures.html)

<section class="artistpage">
    <ul class="artistlist" ng-app>
        <li ng-animate="animate'" class="artist cf" ng-repeat="lec in lecture | orderBy: videoId">
                <div class="info">
                    <h2>{{lec.videoName}}</h2>
                    <h3>{{lec.videoDetails | cut:true:160:' ...'}}</h3>
                </div>
        </li>
    </ul>
</section>

I want to take a dynamic ID from a button of the selected course instead of static like above at data.course[ 4 ].lectures

The JSON:

So how can I do this? Demo: www.faizansaiyed.ml/EduvanceApp

Answer 1

i think you will do something like that :

$http.get('js/data.json').success(function(data) {
    $scope.records = data;
    $scope.whichItem = $routeParams.itemId;

and in your html file you will do that :

first html file

<a href="#details/{{records.indexOf(item)}}" >

and for the second html file you will do that : for example something like that :

<div class="col s12 error_info_box" ng-repeat="item in records[whichItem].errors">

      <p><b>Error Type&#58;</b>&nbsp;&nbsp;{{item.type}}</p>






      </div>