Having trouble getting data from a json file

Question

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.

detail controller has no sense, as you iterate over json data and allways set mainData to the last element — vktr
– vktr, Commented May 11, 2015 at 10:36

vktr · Accepted Answer · 2015-05-11 10:38:26Z

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.

answered May 11, 2015 at 10:38

vktr

1499 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

fahad.kazi Over a year ago

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 Over a year ago

I did find a question where I found a great example to use factory stackoverflow.com/questions/16930473/…

Collectives™ on Stack Overflow

Having trouble getting data from a json file

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related