How to use the Angular In-Memory Web API .data attribute?

Question

My goal is to use in-memory-web-api interchangeably with a real backend.

As stated in the Angular 2 (or 4) Tour of Heroes tutorial https://angular.io/tutorial/toh-pt6#extracting-the-data-in-the-then-callback :

Note the shape of the data that the server returns. This particular in-memory web API example returns an object with a data property. Your API might return something else. Adjust the code to match your web API.

The mocked web api service returns an object wrapped in a data attribute. The problem is that my backend doesn't return the data in that format, it doesn't have a "data" attribute.

.then(response => response.json().data as Hero[])

should be

.then(response => response.json() as Hero[])

and hopefully it should work. If I change it to the second version, the in-memory api doesn't work anymore...

Is there a way that I can change in-memory-web-api to actually remove that data attribute?

@Graham Please also remove the tags from the titles in your next edits. See this meta-answer for more information. (I will delete this comment when you a acknowledged it, so please do it as well when you add a comment) — jmattheis
– jmattheis, Commented Aug 26, 2017 at 9:27

Anna · Accepted Answer · 2017-08-23 10:25:42Z

6

Here's my solution for this:

import { InMemoryDbService, RequestInfo } from 'angular-in-memory-web-api';
import {  ResponseOptions } from '@angular/http';

export class InMemoryDataService implements InMemoryDbService {
    myData = 'any data';
    createDb() {
        let myData = this.myData;
        return {myData};
    }

    protected responseInterceptor(res: ResponseOptions, ri: RequestInfo): ResponseOptions {
        res.body = this.myData;
        return res;
    }
    
}

By default, in-memory-db would return {data: 'any data'} in it's body. In responseInterceptor you can change it to any type of data you want. Of course, this is very simplified version.

answered Aug 23, 2017 at 10:25

Anna

1864 bronze badges

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

1 Comment

Florin Vistig Over a year ago

Thanks, didn't know about that interceptor. myData in my case has multiple "endpoints", so I did this in the responseInterceptor: res.body = this.data[ri.collectionName];

Dennis · Accepted Answer · 2017-10-21 12:17:42Z

A slight tweak on @Ann's answer. I return multiple types of data from my IMDB so I needed to make it a little more generic:

import { InMemoryDbService, RequestInfo } from 'angular-in-memory-web-api';
import {  ResponseOptions } from '@angular/http';

class AnyData{
    data: any;
}

export class InMemoryDataService implements InMemoryDbService {
    createDb() {
        let myDataA = [{...}];
        let myDataB = [{...}];
        let myDataC = [{...}];
        return { "A":myDataA,
           "B":myDataB,
           "C":myDataC };
    }

    protected responseInterceptor(res: ResponseOptions, ri: RequestInfo): ResponseOptions {
        let wrapped:AnyData = <AnyData> res.body;
        res.body = wrapped.data;
        return res;
    }
}

Brian Davis · Accepted Answer · 2017-12-21 14:57:04Z

2

They have now made an option to choose whether to encapsulate the response with the data part or not.

HTTP response data no longer wrapped in object w/ data property

As of v0.5.0 (5 October 2017), the dataEncapsulation configuration default changed from false to true. The HTTP response body holds the data values directly rather than an object that encapsulates those values, {data: ...}.

https://github.com/angular/in-memory-web-api

In your app.module.ts, in the imports array you can use the dataEncapsulation flag to choose how you want to have it return:

HttpClientInMemoryWebApiModule.forRoot(
    InMemoryDataService, { delay: 0, dataEncapsulation: false }
)

answered Dec 21, 2017 at 14:57

Brian Davis

8171 gold badge13 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to use the Angular In-Memory Web API .data attribute?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related