0

I am trying to create a file explorer kind of project. I am using angularjs for this. The thing is I am having trouble to get the data from the json file which I created manually.

My json data

[
    {
        "id": 0,
        "name": "Nature",
        "images": [
            {
                "id": 0,
                "src": "images/nature/01.jpg",
                "thumb": "images/nature/01-thumb.jpg",
                "name": "Nature View"
            },
            {
                "id": 1,
                "src": "images/nature/02.jpg",
                "thumb": "images/nature/02-thumb.jpg",
                "name": "Nature View"
            },
            {
                "id": 2,
                "src": "images/nature/03.jpg",
                "thumb": "images/nature/03-thumb.jpg",
                "name": "Nature View"
            },
            {
                "id": 3,
                "src": "images/nature/04.jpg",
                "thumb": "images/nature/04-thumb.jpg",
                "name": "Nature View"
            }
        ]
    },
    {
        "id": 1,
        "name": "Lanscape",
        "images": [
            {
                "id": 0,
                "src": "images/landscape/01.jpg",
                "thumb": "images/landscape/01-thumb.jpg",
                "name": "Landscape View"
            },
            {
                "id": 1,
                "src": "images/landscape/02.jpg",
                "thumb": "images/landscape/02-thumb.jpg",
                "name": "Landscape View"
            },
            {
                "id": 2,
                "src": "images/landscape/03.jpg",
                "thumb": "images/landscape/03-thumb.jpg",
                "name": "Landscape View"
            },
            {
                "id": 3,
                "src": "images/landscape/04.jpg",
                "thumb": "images/landscape/04-thumb.jpg",
                "name": "Landscape View"
            }
        ]
    },
    {
        "id": 2,
        "name": "Movies",
        "images": [
            {
                "id": 0,
                "src": "images/movies/01.jpg",
                "thumb": "images/movies/01-thumb.jpg",
                "name": "Ipsum View"
            },
            {
                "id": 1,
                "src": "images/movies/02.jpg",
                "thumb": "images/movies/02-thumb.jpg",
                "name": "Ipsum View"
            },
            {
                "id": 2,
                "src": "images/movies/03.jpg",
                "thumb": "images/movies/03-thumb.jpg",
                "name": "Ipsum View"
            },
            {
                "id": 3,
                "src": "images/movies/04.jpg",
                "thumb": "images/movies/04-thumb.jpg",
                "name": "Ipsum View"
            }
        ]
    }
]

It is a file explorer so thought it should have category name and it will have images in it. That's the reason this structure.

index.html

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js"></script>
    <script src="js/app.js"></script>
  </head>

  <body>
    <div ng-view></div>
  </body>

</html>

app.js

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

app.config(function($routeProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'home.html',
        controller: 'mainCtrl'
      }).
      when('/:id', {
        templateUrl: 'detail.html',
        controller: 'detailCtrl'
      }).
      otherwise({
        redirectTo: '/'
      });
});

app.controller('mainCtrl', function($http, $scope) {
  $http.get('data.json').success(function (data) {
    $scope.mainData = data;
  });
});

app.controller('detailCtrl', function($http, $scope, $routeParams) {
  $scope.id = $routeParams.id;
  $http.get('data.json').success(function (data) {
    angular.forEach(data, function (temp) {
        $scope.mainData = temp.images;
    });
  });
});

home.html

<ul ng-repeat="data in mainData">
  <li><a href="#/{{data.id}}">{{data.name}}</a></li>
</ul>

detail.html

<div ng-repeat="data in mainData">
<h1>{{data.name}}</h1>
<img src="{{data.thumb}}" />
</div>

When I loop into images the data is displayed same for every id. What I am trying is when I click on nature I want the nature images and it's data to be displayed. I have created a plunkr http://plnkr.co/edit/aR7PM2KQw7XsCtGTYvtI?p=preview

Please help me with this as I'm having trouble understanding this one.

amdixon
  • 3,814
  • 8
  • 25
  • 34
fahad.kazi
  • 376
  • 1
  • 2
  • 15
  • 1
    detail controller has no sense, as you iterate over json data and allways set mainData to the last element – vktr May 11 '15 at 10:36

1 Answers1

1

The problem is the detailCtrl you are allways setting mainData to last element. Quick Fix:

app.controller('detailCtrl', function($http, $scope, $routeParams) {
  $scope.id = $routeParams.id;
  $http.get('data.json').success(function (data) {
        $scope.mainData = data[$scope.id].images;
  });

});

Plunker Edited: http://plnkr.co/edit/3G2TFGvgfW4EihhS4oo4?p=preview

Extended Edit:

This works but is not the way to work in angular, you should wrap your data access into a factory, and then resolve the data model in the router before loading the view. Right now you are fetching the data each time, when you should only do this one time.

vktr
  • 149
  • 9
  • I know I should use factory but I'm still getting started and don't really have an example to use factory. Can you give out an example please? And thanks for the answer as I did not knew this. – fahad.kazi May 11 '15 at 10:46
  • I did find a question where I found a great example to use factory http://stackoverflow.com/questions/16930473/angularjs-factory-http-get-json-file – fahad.kazi May 11 '15 at 11:49