Angular Resource with Hateoas and application/hal+json

Question

I have this kind of response format from backend (URL is http://localhost:8080/App/api/currency ):

{
  "content": [
    {
      "code": "CHF",
      "_links": [
        {
          "rel": "self",
          "href": "http://localhost:8080/App/api/currency/CHF"
        }
      ]
    },
    {
      "code": "EUR",
      "_links": [
        {
          "rel": "self",
          "href": "http://localhost:8080/App/api/currency/EUR"
        }
      ]
    },
    {
      "code": "USD",
      "_links": [
        {
          "rel": "self",
          "href": "http://localhost:8080/App/api/currency/USD"
        }
      ]
    },
    {
      "code": "AUD",
      "_links": [
        {
          "rel": "self",
          "href": "http://localhost:8080/App/api/currency/AUD"
        }
      ]
    },
    {
      "code": "CAD",
      "_links": [
        {
          "rel": "self",
          "href": "http://localhost:8080/App/api/currency/CAD"
        }
      ]
    },
    {
      "code": "GBP",
      "_links": [
        {
          "rel": "self",
          "href": "http://localhost:8080/App/api/currency/GBP"
        }
      ]
    },
    {
      "code": "NZD",
      "_links": [
        {
          "rel": "self",
          "href": "http://localhost:8080/App/api/currency/NZD"
        }
      ]
    },
    {
      "code": "JPY",
      "_links": [
        {
          "rel": "self",
          "href": "http://localhost:8080/App/api/currency/JPY"
        }
      ]
    },
    {
      "code": "SEK",
      "_links": [
        {
          "rel": "self",
          "href": "http://localhost:8080/App/api/currency/SEK"
        }
      ]
    },
    {
      "code": "NOK",
      "_links": [
        {
          "rel": "self",
          "href": "http://localhost:8080/App/api/currency/NOK"
        }
      ]
    },
    {
      "code": "ISK",
      "_links": [
        {
          "rel": "self",
          "href": "http://localhost:8080/App/api/currency/ISK"
        }
      ]
    },
    {
      "code": "DKK",
      "_links": [
        {
          "rel": "self",
          "href": "http://localhost:8080/App/api/currency/DKK"
        }
      ]
    }
  ],
  "_links": [
    {
      "rel": "self",
      "href": "http://localhost:8080/App/api/currency"
    }
  ]
}

To query it with Angular I use $resource's query method. But this response structure does not work well with $resource:

• query expects array. Here I have single object
• array items are treated as single resources

How can I make this response work with $resource i.e. instruct it to take content as actual data for constructing $resource objects. Or are there any robust solutions for it?

Answer 1

One way is to use $promise explicitly:

return $resource(url).get().$promise.then(function(response){
    return response.content;
});

Of course, when using $resource this way, there's not much difference with $http, and the advantages of using $resource over $http, like directly binding the result to the scope, are lost.