-1

I'm having trouble with my service. I have a service wich get a JSON from the HTTP module and fill a class 'olders' with it. But when I call my service, it doesn't do anything and my class olders is still undifined... And if I make a *ngFor directive in the yearbook.component.html, I just get nothing... I think my problem came from my service, but I don't know where is the error... Even if i put the console.log inside of the subscribe

my yearbook.component :

import {Component} from '@angular/core'
import {Olders} from './olders'
import {OldersService} from './olders.service'

@Component({
  moduleId: module.id,
  selector: 'yearbook',
  templateUrl: 'yearbook.component.html',

})

export class YearbookComponent {

  olders : Olders[];

  constructor(
    private _oldersService : OldersService
  ){}


  ngOnInit() {

    this._oldersService.getOldersfromAPI()
                       .subscribe( res => {this.olders = res,
                                           console.log(this.olders)},
                                   err => console.error(err.status)
                                 );


  }
 }

and the olders.service :

import {Injectable} from '@angular/core'
import {Http} from '@angular/http'
import {Olders} from './olders'
import 'rxjs/add/operator/map'
import 'rxjs/add/operator/do'

@Injectable ()

export class OldersService {

  constructor(private _http:Http) {

  }

  getOldersfromAPI(){

    return this._http.get('../CDN/olders.json')
                     .do(x => console.log(x))
                     .map(olders => {olders = olders.json()});
  }
}

Thanks in advance for all your answers guys

Antoine Xevlabs
  • 851
  • 1
  • 6
  • 20
  • 4
    Possible duplicate of [How do I return the response from an Observable/http/async call in angular2?](http://stackoverflow.com/questions/43055706/how-do-i-return-the-response-from-an-observable-http-async-call-in-angular2) – eko Apr 30 '17 at 18:08
  • this url looks strange '../CDN/olders.json' – Julia Passynkova Apr 30 '17 at 18:11
  • Better not use relative paths in the request, use the "complete" path, starting from top level (usually `src`). Have you checked console, any errors? I would guess you would get a 404 error for that url :) – AT82 Apr 30 '17 at 18:14
  • This has nothing to do with angular, or http, or observables. It's basic JS asynchronicity behavior. Move the `console.log` into the subscription handler which is when the data is available. –  Apr 30 '17 at 18:31
  • this url is simply the path for my json, I don't have any errors in my console, even a 404 one @AJT_82 – Antoine Xevlabs Apr 30 '17 at 18:41
  • Yeah I read the topic, but I still got the same problem even if I do that... @torazaburo – Antoine Xevlabs Apr 30 '17 at 19:07

1 Answers1

2

You are missing a return statement in your mapping:

.map(olders => {olders = olders.json()});

should be:

.map(olders => { return olders = olders.json()});
AT82
  • 71,416
  • 24
  • 140
  • 167
  • Thanks a lot for your response. But I still got the same problem, in fact what i found strange is that my console don't show me anything when i load the page, or the .do should show my json in the console no ? – Antoine Xevlabs Apr 30 '17 at 19:06
  • Your code seems fine to me, now when I tested it... Have you checked the response tab and see that you are actually getting data? Code seems fine otherwise: http://plnkr.co/edit/CtPmucjBv9yXa4AnOmMy?p=preview – AT82 Apr 30 '17 at 19:14
  • so yes... `do` should print your data, so I suspect you are not getting any :) – AT82 Apr 30 '17 at 19:23
  • You mean the network one ? I think i don't get anything... I don't know why ... edit : the link of the network console https://img4.hostingpics.net/pics/776674Capturedecran20170430a212221.png – Antoine Xevlabs Apr 30 '17 at 19:24
  • You know where it can cames from ? I tested both my code on my windows and my mac and same result – Antoine Xevlabs Apr 30 '17 at 19:25
  • Could you show a snippet of your json file? The path should be right as well, since you are not getting a 404 error. Hmmm, strange. – AT82 Apr 30 '17 at 19:26
  • In the image the network traffic is filtered with CSS. Can you click All and make the request again? – eko Apr 30 '17 at 19:27
  • @echonax ahahaah, you were faster :P – AT82 Apr 30 '17 at 19:29
  • @AJT_82 :p I'll leave you alone – eko Apr 30 '17 at 19:30
  • Oh sorry ! here is the right now https://img4.hostingpics.net/pics/553382Capturedecran20170430a214105.png – Antoine Xevlabs Apr 30 '17 at 19:42
  • Can't see the `olders.json` request there at all? – AT82 Apr 30 '17 at 19:44
  • and my json (but i think i'll get a message error if my json was right) `[ { "name": "BMW", "surname": "BMW", "function": "Automobile", "mail": "tdc@bmw.eu", "tel": "0630450986" } ]` – Antoine Xevlabs Apr 30 '17 at 19:44
  • No, no request for olders.json... strange af – Antoine Xevlabs Apr 30 '17 at 19:45
  • I used the authentification of angular2, do you think it may interfere ? – Antoine Xevlabs Apr 30 '17 at 19:46
  • What authentication? I fell off the wagon there :) – AT82 Apr 30 '17 at 19:55
  • Ahah sorry, authentication with authguard in angular 2 – Antoine Xevlabs Apr 30 '17 at 20:04
  • But normally it just protect routes – Antoine Xevlabs Apr 30 '17 at 20:05
  • Yeah, it shouldn't matter, if you are able to route to `YearbookComponent` it shouldn't really affect the request. This is really hard to tell what could be causing this. Could you possibly try and reproduce the issue with a plunker? – AT82 Apr 30 '17 at 20:12
  • 1
    Yes i'm gonna try – Antoine Xevlabs Apr 30 '17 at 20:15
  • Here is the plunker. The plunker console shows me a strange error, I don't know where it cames from. But I think my problem cames from the fakeBackendProvider that I have used . [Plunker](https://plnkr.co/edit/3riZcjoVyjztGxfYhVIm?p=preview) – Antoine Xevlabs May 01 '17 at 10:02
  • Ugh, there's a lot of code there :D The fake backend is most definitely interfering with your request. You can't have that and at the same time make "regular" http-requests. – AT82 May 01 '17 at 10:08
  • Yes I just see that now... after 2 days ahah ! But I don't know how to manage to make "classical request" with this fake backend so i'm gonna read on that thanks for your answers btw :) @AJT_82 – Antoine Xevlabs May 01 '17 at 21:09