ngResource get() does not appear to retrieve any data

Question

The angular code is below along with the html. The problem is that the endpoint '/contacts/:id' returns json in Postman and Chrome. Obviously I swap :id with 0037000001pIldUAAS for those tests, but the endpoint seems to be good. When the page is loaded '{}' is all I'm getting in $scope.data. What on earth am I doing wrong here? The example I've provided is almost verbatim what's in the angular documentation for get(). I have validated that the json I'm getting from the backend is valid.

Does anyone see something that looks out of order?

var app = angular.module('app', ['ngResource']);

app.factory('Contact', ['$resource', function($resource) {
    return $resource('http://localhost:3000/contacts/:id');
}]);

app.controller('ContactCtrl', ['$scope', 'Contact',
    function($scope, Contact) {

        $scope.data = Contact.get({id:'0037000001pIldUAAS'});

    }]);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <script src="angular.min.js"></script>
    <script src="angular-resource.js"></script>
    <script src="test.js"></script>

</head>

<div ng-app="app">
    <div ng-controller="ContactCtrl">

        {{data}}

        <h5>Is angular working: {{working}}</h5>

        <input ng-model="working"/>

    </div>
</div>

</body>
</html>

Here's a snip of the json that's returned by the api:

{
  "Id": "0037000001elHP3AAM",
  "LastName": "first",
  "FirstName": "last"
...
}

**Edit: added Chrome dev tools screenshots:

enter image description here

score 0 · Answer 1 · answered Jul 17 '15 at 21:51

0

You're missing an important part of your $resource construction. The second parameter is an object that specifies bindings for your route params

app.factory('Contact', ['$resource', function($resource) {
    return $resource('http://localhost:3000/contacts/:id', {
        id: '@id'
    });
}]);

What this means is that when you provide an object to the get request angular will look for a property on that object called id and then sub it into the route where :id is. If you don't do this, all the properties in your object will instead be sent along as query params. You can verify this by opening up the dev tools in your browser and going to the network requests section. I'm willing to bet that what you'll find there is a network request that looks like this:

http://localhost:3000/contacts?id=0037000001pIldUAAS

answered Jul 17 '15 at 21:51

Jesse Carter

20,062
7
64
101

The request looks like: http://localhost:3000/contacts/0037000001pIldUAAS Which is what I'm looking for. – Tony Evans Jul 17 '15 at 21:59
Hmmm its not default behaviour for any route param substitution to occur without the second object paramater. Can you post a picture of what your'e seeing from the network section of developer tools? – Jesse Carter Jul 17 '15 at 22:01
I added the screenshots to the original post in case others come along and ask. Thanks for the help. – Tony Evans Jul 17 '15 at 22:08

ngResource get() does not appear to retrieve any data

1 Answers1