CODEWITHSUNDEEP
jsonangularjs
fahad.kazi
fahad.kazi

Reputation: 386

Having trouble getting data from a json file

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.

Upvotes: 0

Views: 98

Answers (1)

vktr
vktr

Reputation: 149

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.

Upvotes: 1

Related Questions