Help with JSON and a more details page

1

Hi all,

I am new to json / angular etc.

I have a page that retrieves a list of restaurants from a MySQL Db with PHP and returns a JSON list.

Using:

$http.jsonp('http://www.....com/get_places.php?format=json&callback=JSON_CALLBACK').
    success(function (data) {
        $scope.places = data;
    })

I get my list of places… Now I want to be able to click a place for a ‘more details’ page.

I’m not exactly sure how to go to the page and return one set of data based on an ID.

Any help would be appreciated.

Cheers

2 
  .state('app.authed-tabs.node-list', {
    url: "/nodes",
    views: {
      'node-list-tab': {
        templateUrl: "app/components/authed-tabs/node-demo/node-demo.html",
        controller: 'NodeListCtrl'
      }
    },
    resolve : {
    	newNodes : function (NodeResource) {
    		return NodeResource.index();
    	}
    }
  })
  .state('app.authed-tabs.node-detail', {
    url: "/:nid/detail",
    views: {
          'node-list-tab': {
        	    templateUrl: "app/components/authed-tabs/node-demo/node-detail.html",
    	        controller: 'NodeDetailCtrl'
          }
    },
    resolve : {
    	nodeObj :function (NodeResource, $stateParams) {
            return NodeResource.retrieve($stateParams.nid);
        }	
    }

  })

And in your list use ng-click to fire the state change…

<i ng-click="openNode(node.nid)" >load</i>


	   $scope.openNode = function(nid) {	   
		  $state.go('app.authed-tabs.node-detail', {nid:nid});
               }

Hope it helps and sry for the formatting…

3

Take a look at the following tutorials:

http://learn.ionicframework.com/formulas/sharing-data-between-views/

Keep in mind on the second tutorial you may be using $stateProvider and $stateParams instead of $routeProvider and $routeParams.

4

I’m trying to get the second example to work using stateparams instead of route. I’m really confused. I can’t even get it to load the initial list this way.

    .state('app.places', {
        url: "/places",
        views: {
            'menuContent': {
                templateUrl: "templates/places.html",
                controller: 'PlacesCtrl'
            }
        }
    });

    .controller('PlacesCtrl',['PlacesService', function (PlacesService, $scope, $http) {
    
        PlacesService.GetPlaces().then(function (places) {
            $scope.places = places;
        });
    
    }]);

.factory('PlacesService', ['$http', function ($http) {

    var places = []; //Private Variable
    return {
        GetPlaces: function () {
            return $http.jsonp('http://www......com/test/get_places.php?format=json&callback=JSON_CALLBACK').then(function (response) {
                places = response;
                console.log(respose)
                return response;
            });
        },
        GetPlace: function (placeId) {
            for (i = 0; i < places.length; i++) {
                if (places[i].id == placeId) {
                    return places[i];
                }
            }
        }
    }
}]);

Won’t load anything.

5

Ok, I got it working.

because I’m using jsonp it required some changes to the service to get the data correctly.

Thanks for the help guys. Appreciated.