http.get not working in angular js 2

Question

import {Injectable} from 'angular2/core';
import {SampleInfo} from 'app/sample-info/model/sample-info-model';
import {HTTP_PROVIDERS, Http, Response, Headers, RequestOptions} from 'angular2/http';

import {Observable} from 'rxjs/Observable';
import 'rxjs/Rx';


@Injectable()
export class SampleService {
  constructor (private http: Http) {}

  private _url = 'http://localhost:9090/sample/details/1213';

  getInfo () {
    headers = new Headers({ 'Authorization': 'Basic AVBDIEtr009=' });
    options = new RequestOptions({ headers: headers });
    // $.ajax(this._url); 
    return this.http.get(this._url, options)
                    .map(res => <SampleInfo> res.json())
                    .do(data => console.log(data))
                    .catch(this.handleError);
  }

  private handleError (error: Response) {
    console.error(error);
    return Observable.throw(error.json().error || 'Server error');
  }
}

Please check the above code snippet. In that, this.http.get(...) is not sending the request to the url, but $.ajax(...) is working, could someone please help ?

i already call this from the component class which use the service,

import {Component, OnInit} from 'angular2/core';
import {Router} from 'angular2/router';
import {SampleInfoService} from 'app/booking-info/service/sample-info-service';
import {SampleInfoModel} from 'app/booking-info/model/sample-info-model';
import {TranslateService, TranslatePipe} from 'ng2-translate/ng2-translate';
import {HTTP_PROVIDERS} from 'angular2/http';


@Component({
  selector: 'sample-information',
  templateUrl: 'app/sample-info/templates/sample-info.html',
  providers: [SampleInfoService],
  pipes: [TranslatePipe]

})
export class SampleInfoComponent implements OnInit {
    public sampleInformation = {};
    constructor(private _sampleInfoService: SampleInfoService,private _translate: TranslateService) {
            this.initializeTranslateServiceConfig(_translate, 'en')
        }

    getSampleInfo() {
        this._sampleInfoService.getInfo()
                     .subscribe(
                       SampleInfo => {
                            this.sampleInformation = SampleInfo;
                            console.log(this.sampleInformation);
                        },
                       error =>  this.errorMessage = <any>error);
    }

Günter Zöchbauer · Accepted Answer · 2016-03-02 14:06:00Z

4

update I assume you try to access this.sampleInformation before the value has been received.

Observables are async and getInfo().subscribes() returns before SampleInfo => this.sampleInformation = SampleInfo is executed. This is only executed sometimes later when the response from the server arrives;

Try

getSampleInfo() {
    this._sampleInfoService.getInfo()
                 .subscribe(
                   SampleInfo => {
                     this.sampleInformation = SampleInfo;
                     console.log(this.sampleInformation);
                   },
                   error =>  this.errorMessage = <any>error);
}

original

Observables are lazy by default. You need to this.getinfo().subscribe(x => {}) to initiate the request.

edited Mar 2, 2016 at 14:06

answered Mar 2, 2016 at 13:52

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

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

13 Comments

Günter Zöchbauer Over a year ago

Obviously, your question doesn't provide enough information.

deepugn Over a year ago

Thanks for looking into this @günter-zöchbauer, i have edited the question, please have a look.

Günter Zöchbauer Over a year ago

I updated my answer. Please check in the browser console if you see the request being actually made.

deepugn Over a year ago

That is the actual issue, the request is never actually going, i checked browser console, with $.ajax(...), the request is going.

Günter Zöchbauer Over a year ago

I'm out of ideas. Can you create a Plunker to allow to reproduce the problem? You can use plnkr.co/edit/PClI775hEI6iijOIxExO?p as template.

|

Collectives™ on Stack Overflow

http.get not working in angular js 2

1 Answer 1

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related