Ember.js Rest Adapter: mapping JSON with no root (.NET Web API)

8
votes

I have an existing service written with the .NET Web API.

As an example, this service returns JSON in the following format:

[
  { "id": 1, "name": "John" },
  { "id": 2, "name": "Jane" }
]

However, as per the Ember.js Rest Adapter documentation, Ember would expect JSON in the following format:

{
  "persons": [
    { "id": 1, "name": "John" },
    { "id": 2, "name": "Jane" }
  ]
}

Because of this, Ember is returning the following error: Your server returned a hash with the key 0 but you have no mapping for it

By no means do I plan on changing my service API and how it returns data.

Would it be possible to get Ember.js (latest version) to work with the existing data my service is returning? And, if so, how can I implement that?

3
javascriptjsonember.jsasp.net-web-apiember-data

3 Answers

5
votes

Ember is very flexible in that sense, giving the ability to extend the adapter and serializer in order to integrate your app with any backend API.

You should get the WebAPIAdapter, which is part of the Ember.js Template for Web API.

Additionally, you might wanna take a look into this project I wrote as an example, based on that same template (with some modifications I did on my own). It's still under development and it doesn't feature all the best practices (yet), but I'd say it's a valid example.

You should also take a look into this repo / library (You can install it via NuGet too), which allows you to pre-compile your Handlebars templates directly into Ember.TEMPLATES collection.

0
votes

in the web api just return new { object }

var persons = _personbService.GetPeople;
        return new { persons };

this will wrap your object in an object of the same name. If you need to call the object something else just do 

new { SomeOtherName = persons; }
0
votes

I was having this issue in ember and found the best solution for me was to build a new serializer and override the normalizePayload method. code below:

export default DS.RESTSerializer.extend({
normalizePayload: function(payload) {
var root = "posts";
var output = {};
output[root] = payload;
return output;

} });

This wraps the initial response and adds the root to it, hope it helps!