-2

I need to connect my backend to my front. My front is Angular2+TS.

So the problem is in the service and the component. I can't figure out the syntax.

Service: 

getCases(){
  return this.http.get('some URL')
  --- what code here? ---
}

At the moment my Component looks like: 

export class CaseListComponent {
    name: string;
    id: string;
    time: string;
    cases: Observable<Case[]>;

    constructor(public _service: Service, public _router: Router) { 
        this.cases = this._service.getCases()
            .map((items) => items.map((item) => new Case(this.id, this.name, this.time)));
    }
}

At the moment the code in the constructor gives compile error:

"Property 'map' does not exist on type 'Response'.

So apparently I also need to add something in the getCases method in the service.

The template:

<table>
    <tr *ngFor="let case of cases | async">
        <td>{{case.name}}</td>
    </tr>
</table>
AT82
  • 71,416
  • 24
  • 140
  • 167
  • What language are you using for your backend? Do you request the data via http? Your desription is pretty vague. You should explain your problem instead of asking someone to give examples. E.g. are you having problems to use http or rather on the server side to send your data? – LordTribual May 21 '16 at 07:45
  • Yes I would suggest to send JSON and implement a simple RESTful API on your server side. JSON is readable and very handy to process. – LordTribual May 21 '16 at 08:04
  • Well what format do you send? XML? – LordTribual May 21 '16 at 08:48
  • You can of course send any format and proccess your data on the client side. But before asking for help we need more information about your data etc. – LordTribual May 21 '16 at 08:49
  • Yes of course, I understand. I wasn't clear enough and my problem wasn't stated clear enough. Still trying to figure out the syntax for receiving the data as an Array of objects from the server side. Maybe after banging my head against the wall for a couple days more I'll eventually figure it out (I hope)! – AT82 May 21 '16 at 12:46
  • You still havent answerd what format the data has? XML? JSON? What is it you are sending? – LordTribual May 21 '16 at 17:41
  • JSON Array of objects. – AT82 May 22 '16 at 11:41

1 Answers1

-1

Your service, means this.http.get('some URL') returns an Observable. What you have to do in your component is to store that Observable in a variable and use it inside your template in combination with the async pipe. In case you are using the latest version of Angular 2 you have to do the following:

export class MyComponent {
  public cases: Observable<Case[]>;

  constructor (private myService: MyService) {
    this.cases = myService.getCases()
                   .map((data) => data.cases.map((item) => new Case(...)));
  }
}

Note that data is your response from the server. Since I still don't know what your response looks like, I made an example. I assume that in that JSON object there is a property called cases that you can then map over. Look at your response object and use the appropriate key to access your data.

Also change your service method to the following:

getCases(){
  return this.http.get('some URL')
    .map((res: Response) => {
      let body = res.json();
      return body.data || { };
    });
}

In your view you can then use your data and loop over it using ngFor like so:

<li *ngFor="let case of cases | async">
  {{ case }}
</li>

The important bit here is the async pipe. You need this because your property is a stream. This pipe subscribes to the Observable and returns the latest value it has emitted.

NOTE

Change the type of your Observable to a specific type. I did not know what your data looks like so I have used any. Be always explicit about your types if possible.

LordTribual
  • 4,219
  • 2
  • 28
  • 38
  • Thanks a lot for the input! Tried you example, the "this.cases" (in the constructor)is underlined and shows error: [ts] Type 'Observable' is not assignable to type 'Observable'. Type 'Response' is not assignable to type 'Case[]'. Property 'length' is missing in type 'Response'. (property) CaseListComponent.cases: Observable. Even tried with the type "". Shows no error then, but doesn't work :( I use angular beta 17. – AT82 May 23 '16 at 09:09
  • One thing was that the property was `private`. I made it `public` now so you can access it in your view. What did you try? If you want each item in your array to be of type case you have to transform the response. So use `map` and instantiate each item to a new Case. – LordTribual May 23 '16 at 14:40
  • I have updated my answer and added a transformation which creates new cases. Please change `...` to what you need. After that you have an array of cases. – LordTribual May 23 '16 at 14:42
  • Thanks a lot for taking your time to help me! Now I get underlined error at items.map((item): Property 'map' does not exist on type 'Response'. I do have the map imported, or actually all: import 'rxjs/Rx'; Using VS code, angular 2.0.0-beta 17, rxjs 5.0.0-beta.2 and typescript ^1.8.9. – AT82 May 24 '16 at 07:22
  • Next time, if you ask a question, add more information so people can directly solve your problem in the form of an answer and not by comments! – LordTribual May 24 '16 at 08:52
  • The underlined error mentioned in a previous comment: `Property 'map' does not exist on type 'Response'`. – AT82 May 25 '16 at 06:14
  • Whats the error? I cannot help you if you don't post what your data looks like when it comes into your component. I suggested to use `console.log`. – LordTribual May 25 '16 at 07:34
  • Try `myService.getCases().map((data) => console.log(data));` Did you also change your service method to transform to json as mentioned in my answer? – LordTribual May 25 '16 at 09:43