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;
        });
    });
})

Have you tried the json filter? In your html: {{roomID | json}} — julian soro
– julian soro, Commented Dec 21, 2015 at 11:09
the result adding json filter is this -> "6" (for roomID = 6). Nothing else, it just adds the speachmarks — Nick
– Nick, Commented Dec 21, 2015 at 11:10
What happens if you try {{rooms | json}}. Do you see the data from data.json? — julian soro
– julian soro, Commented Dec 21, 2015 at 11:14
yes, with {{rooms | json }} i can see the data but for all the rooms, and not only for the one that i want (id:6) — Nick
– Nick, Commented Dec 21, 2015 at 11:15

JB Nizet · Accepted Answer · 2015-12-21 11:46:06Z

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.

edited Dec 21, 2015 at 11:46

answered Dec 21, 2015 at 11:16

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

4 Comments

Nick Over a year ago

1) Thanks for the suggestion about the json, it is actually wrong only in thes questoion but not on my dev machine 2) Can you provide an example for adding filtering on services? or something i can read more about it? thanks

Nick Over a year ago

I can't use your code, it generates tons of errors in the console and i'm not able to retrive any data anymore

Nick Over a year ago

seams like there is something wrong in getRoom(roomId)

JB Nizet Over a year ago

It should be fixed now. But you shouldn't use my code. Not before you have understood it.

julian soro · Accepted Answer · 2015-12-21 11:23:07Z

1

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!

edited Dec 21, 2015 at 11:23

answered Dec 21, 2015 at 11:20

julian soro

5,2885 gold badges32 silver badges37 bronze badges

11 Comments

Nick Over a year ago

I assume the getRoom function need to go inside the detailsCtrl, right?

julian soro Over a year ago

but, like in my recommendation, I would find the room when the data loads, and set it to currentRoom instead, so you're not always computing the getRooms

Nick Over a year ago

i tried like you said but i have a blank page...nothing is returned at all (even adding json) tried with the currentRoom Scope as you recommended)

julian soro Over a year ago

sorry, it should be in the appCtrl, since that is where $scope.rooms lives

Nick Over a year ago

but then it won't be available in my template cause it is controlled by detailsCtrl, am i right?

|

Collectives™ on Stack Overflow

Angularjs - read inside json file

2 Answers 2

4 Comments

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related