How to map API-Objects in Ionic in a good way?

Hey guys,

I am pretty new to mobile development, but I already got pretty far with my first Ionic app. I’ve got a general question though about mapping data, because I am using a REST API I wrote myself for my web platform (for which I want to dev an app right now).

Lets say there the following “dummy-JSON” structure returned by the API:

locations: { 
    id: 1
    name: Cologne
    author: { id: 1, name: Manuel, follower_count: 0 },
    id: 2
    name: Paris
    author: { id: 1, name: Manuel, follower_count: 0 }
}

The API sends me 2 times the same author, which is fine and currently I am creating 2 separate objects for the same author locally in Ionic. How are you guys mapping this data so that you prevent duplicate objects or doesn’t this matter? I am thinking of a situation that I follow this author within one location, but then I would need to recognize, that this change also affected another part of the app, for example the next item in the list of locations.

I hope I explained it correctly, because currently I am only generating these objects based on the API, mapping them and displaying them in the frontend. Works fine so far, but how to deal with these dependencies? Or would it even better to somehow store these objecs locally and try to keep them synchronized with the API and set for example a “has changed flag” on this author object so that the view is reloaded as soon as Ionic recognizes this on the specific load event?

Thank you so much for your help in advance!
Manuel

1 Like

See:

models.ts:

export interface Location {
  id?: string;
  name?: string;
  author?: { 
    id?: string, 
    name?: string, 
    followerCount?: string
  }
}

mock-locations.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';

import { Location } from '@core/models';

@Injectable()
export class MockLocationsService  {

  private readonly URL = 'assets/data/locations.json';

  constructor(protected httpClient: HttpClient) {}

  public list(): Observable<Location[]>   {
    return this.httpClient.get<Location[]>(this.URL);
  }

}

my.page.ts:

import { Location } from '@core/models';

...

export class MyPage implements OnInit, OnDestroy {

  public items: Array<Location> = [];
  private itemsSubscription: Subscription;

  constructor(public navCtrl: NavController,
              public navParams: NavParams,
              private locationsService: MockLocationsService,
              private logger: LoggerService) {

  }
  ...

  public ngOnInit() {

    this.itemsSubscription = this.locationsService.list().subscribe(data => {
      this.items = data;
    });
  }

  ...

  public ngOnDestroy() {
    this.itemsSubscription.unsubscribe();
  }

}

Thank you very much @robinyo - really appreciate your answer. I already know how to fetch the data and map it into objects, so that’s not what I asked for. Your example has the exact same issue I was asking about. In this case, you are creating the author object 2 times, although it’s the very same object. Is this something that is best practice? I am asking, because I am not sure how to deal with the case that happens, when the follower_count via location1 was increased for the author, but then the app needs to recognize, that author of location2 is identical, so it needs to be increased here as well or at least the app would need to invalidate the data and fetch it again. Hope I explained my question good enough, otherwise ask so that I can try to say it in other words. :slight_smile:

Thank you very much!
Manuel

I don’t think you do.

Your example is not valid JSON, for example:

{
  "locations" : [
    {
      "id": "1",
      "name": "Cologne",
      "author": {
        "id": "1",
        "name": "Manuel",
        "followerCount": "0"
      }
    },  
    {
      "id": "2",
      "name": "Paris",
      "author": {
        "id": "1",
        "name": "Manuel",
        "followerCount": "0"
      }
    }
  ]
}

Yeah I know that, that’s why I wrote “dummy-JSON” - it’s no real JSON and I just wanted to use it as an example without copying my real JSON code, which is much more complex and wouldn’t help to discuss the issue I have.

I didn’t know about the interface though. Currently I am exporting a Location class and an Author class and mapping the JSON code manually by creating a new object and setting the details recursively.

But did you understand my initial problem? My code is already working, I am just having an issue with my updates and I want to understand the best practices here. I will dive deeper though in the interface class you wrote, thank you very much for that already.

Are you using a No SQL data store?

If so:

@robinyo Hey Rob, no I am using my own Rest API, which is written in PHP (Symfony Framework). So I guess I need to code something myself to keep the objects synchronized or make sure that every object is only available once locally. I am not sure which of these 2 ways is the “common practice”, but I would guess it’s way one since the app is mostly a view and therefore solution 2 could be too complex on the frontend part?