AngularJS remote data with URL parameters

Question

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?

No we've allowed CORS etc. As I say, on the top level it works. Listing all stories using an ng-repeat is fine, but when I drill down into the specific ID using routing it's just blank. I know that the call the URL with the parameters is working, but it just doesn't show anything... — Mike
– Mike, Commented Oct 20, 2014 at 15:45
Can you see the call being made to "website.co.uk/?id=whatever" in your network tools? When you say it doesn't show anything, is the call being made, is there data coming back, can you see anything in the data object that you are using for $scope.story? — John Niedzwiecki
– John Niedzwiecki, Commented Oct 20, 2014 at 16:01
i have different my search api url is /colum/words not search?colum=words i have to change for a plugin ! any alternative approach ! — Rizwan Patel
– Rizwan Patel, Commented Dec 9, 2016 at 10:17

Mike · Accepted Answer · 2014-10-21 07:36:33Z

2

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!

answered Oct 21, 2014 at 7:36

Mike

709 bronze badges

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

4 Comments

Yngve B-Nilsen Over a year ago

obviously, the object returned an array, or the data-object has the actual data on the first property. You should really log out the data-object, to look at its structure. [0] just indicates that you extract the first item in an array (or the first property on an object)

Mike Over a year ago

I'm sure it's obvious to you Yngve, but I'm only a beginner to Angular. Thanks for the explanation though.

John Niedzwiecki Over a year ago

When you have troubles like that, you want to investigate your data. Use the network tools in the browser to see the response from the API (which might have clued you into the array result) and then when all else fails, console.log(data); That is less of an Angular problem and more REST / AJAX problem.

Yngve B-Nilsen Over a year ago

@Mike I apologize if my comment came across as condecending or offensive. I meant no such thing, just trying to explain, since you didn't know the meaning of square-brackets in Javascript (it's not an angular-specific concept - it's built-in to Javascript)

Collectives™ on Stack Overflow

AngularJS remote data with URL parameters

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related