CODEWITHSUNDEEP
angularjs
Mike
Mike

Reputation: 70

AngularJS remote data with URL parameters

So for an AngularJS app I'm building, we were previously using local JSON files to import data into the app using routing.

storiesControllers.controller('StoryDetailCtrl', ['$scope', '$sce', '$http', '$location', '$routeParams', function($scope, $sce, $http, $location, $routeParams) {
    $scope.storyID = $routeParams.storyID;
    $http.get('/story/'+$routeParams.storyID+'.json')
    .success(function(data) {
        $scope.story = data;
    }); 
}]);

However, we're now going to be getting data direct from the server. Only one line changes below:

storiesControllers.controller('StoryDetailCtrl', ['$scope', '$sce', '$http', '$location', '$routeParams', function($scope, $sce, $http, $location, $routeParams) {
    $scope.storyID = $routeParams.storyID;
    $http.get('http://website.co.uk/?id='+$routeParams.storyID)
    .success(function(data) {
        $scope.story = data;
    }); 
}]);

This method works at the top level for filtering stories by category:

$http.get('http://mywebsite.co.uk/?category=CategoryName')

But on the individual story it's completely blank and no data is loaded.

The URL and parameter is correct and working fine, the data on the server is fine and matches exactly the local files, so why does this not work?

Am I missing something really obvious?

Upvotes: 1

Views: 493

Answers (1)

Mike
Mike

Reputation: 70

Ok, the answer was actually found by a colleague of mine. It turns out that instead of:

$scope.story = data;

I needed to use:

$scope.story = data[0];

I'm not sure of the relevance of the square brackets 0, but it seems to have fixed it!

Upvotes: 2

Related Questions