Angularjs - read inside json file

Question

This is my first attempt with angularjs and ionic-framework.

I have an example json file and i'd like to display onscreen some data from it. The displaying-data bit works, but i'd like to populate a "details" page with some info that are stored as an abject inside the main json file, and i need to use the id from the url to select to display only the data that i need.

Here's some code:

App.js

angular.module('hgapp', ['ionic', 'hgapp.controllers', 'ngResource'])

.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('app', {
            url: '/app',
            abstract: true,
            templateUrl: 'templates/menu.html',
            controller: 'AppCtrl'
        })
        .state('app.details', {
            url: '/details/:roomID',
            views: {
                'menuContent': {
                    templateUrl: 'templates/details.html',
                    controller: 'DetailsCtrl'
                }
            }
        })
    $urlRouterProvider.otherwise('/app/home');
});

Controllers.js

angular.module('hgapp.controllers', ['hgapp.services'])

.controller('AppCtrl', function ($scope, HGJson) {
    HGJson.get(function (data) {
        $scope.rooms = data.data;
    })
})

.controller('DetailsCtrl', function ($scope, $stateParams, HGJson) {
    $scope.roomID = $stateParams.roomID;
    console.log($stateParams.roomID);
})

services.js

angular.module('hgapp.services', ['ngResource'])
.factory('HGJson', function ($resource) {
    return $resource('json/data.json')
});

Data.json (Just a simplified example)

{
   tm: 00000000,
   errors: 0,
   data: {
       {id: 0, name: Value 0, url:url-0},
       {id: 1, name: Value 1, url:url-1},
       {id: 2, name: Value 2, url:url-2}
}

details.html

<ion-view view-title="Details">
<ion-content>
    <h1>{{roomID}}</h1>
</ion-content>

In the details page i'm printing the roomID just to see if the controller (detailsCtrl) works, and i have the correct id printed every time. Now, the bit where i'm stuck is how to manipulate the data from HGJson service so that it allows my to print on data from the right room id.

I hope this question is clear enought, if not, feel free to ask for more clarification.

Thanks a lot

EDIT

At the end i solved it adding this to my controller.js file:

.controller('DetailsCtrl', function ($scope, $stateParams, HGJson) {
    HGJson.get(function (data) {
        angular.forEach(data.data, function (item) {
            if (item.id == $stateParams.roomID)
                $scope.currentRoom = item;
        });
    });
})

Answer 1

Just do the same thing as what you're doing in the app controller, but find the room you want in the returned JSON:

HGJson.get(function (data) {
    $scope.room = data.data.filter(function(room) {
      return room.id == $stateParams.roomID);
    })[0];
});

You could also put that filtering functionality in your service, so that in the future, when you have a real dynamic backend, you call a different URL returning only the requested room rather than calling a URL that returns all the rooms.

angular.module('hgapp.services')
.factory('HGJson', function ($http) {
    return {
      getRooms: function() {
        return $http.get('json/data.json').then(function(response) {
          return response.data;
        });
      },
      getRoom: function(roomId) {
        return $http.get('json/data.json').then(function(response) {
          return response.data.data.filter(function(room) {
            return room.id == roomID;
          })[0];
        });
      }
    };
});

Note that your JSON is invalid: data must be an array, not an object.

Answer 2

In your controller, you will need to create a function to "find" the correct object in your data object.

Try something like this:

$scope.getRoom = function(id) {
  for(var i in $scope.rooms) {
    if($scope.rooms[i].id === id) {
      return $scope.rooms[i];
    }
  }
};

And you can display it in your DOM:

{{ getRoom(roomID) }}

BUT it would probably be even better to set the current room to a scoped variable instead of running the function every time. So in this case (I strongly recommend), instead of returning $scope.rooms[i], you could set angular.copy($scope.rooms[i], $scope.currentRoom) (this will copy the room into the currentRoom scoped variable) and then use it in the DOM with simply {{ currentRoom }}

Good luck!