HTTP PUT Request Returns Empty From Angular 2 Service

Question

I'm calling data from a service. I have to pass in an object with properties to retrieve the data. From what I can tell, I'm passing it in correctly and not receiving any errors in console, but the object that I assign to the data is empty. I'm including my Service and Component where I'm outputting the data.

I call the exact same endpoint from an Angular1 App with the same "payload" values and get my data object returned. I'm sure I'm missing something simple. Still getting used to Angular 2.

SERVICE

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Rx';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable ()
export class DataService {
private qrDataUrl = 'http://my.data.url/endpoint';

private payload = {
  DeliveryTypeId: 0,
  PickupLocationid: 0,
  PaymentTypeId: 0,
  Items: ['XXXX'],
  ApplicationToken:'123MYTOKEN456',
  DateOfBirth: "1961-01-01T00:00:00.000Z"
};

  constructor(private http: Http){ }

  getQr():Observable<any>{ 
    return this.http.put(this.qrDataUrl, this.payload)
  .map((res:Response) => res.json());
  }
}

COMPONENT

import { Component, OnInit } from '@angular/core';
import { DataService } from '../shared/dataService';

@Component({
  selector: 'my-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
  providers: [DataService]
})
export class HomeComponent implements OnInit {
  qrData = { };

  constructor(private dataService: DataService) {
    // Do stuff
  }



  getData(){
    this.dataService.getQr().subscribe(data => this.qrData = data);
    console.log(this.qrData); //This logs an empty object 
  }

  ngOnInit() {
    console.log('Hello Home');
    this.getData(); 
  }

}

It will. Its a async call. console.log with be triggered without waiting for the rest to finish. The catch or trick to avoid these issues may be a simple thing - avoid using single line functions when you have assignations. — Gary
– Gary, Commented Jul 30, 2017 at 15:21

Pankaj Parkar · Accepted Answer · 2017-03-09 16:50:26Z

1

Asynchronous operation doesn't work synchronous way. You have to wait until the ajax gets completed. You can only see a data inside subscription of your getQr function once the service call resolved.

getData(){
    this.dataService.getQr().subscribe(data => {
      this.qrData = data;
      console.log(this.qrData); //This logs an empty object 
    });
}

answered Mar 9, 2017 at 16:50

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

2 Comments

billy_comic Over a year ago

This works perfectly. Question: Was the data actually returning in the syntax from the OP and I just had my console.log() taking place before the data had returned? Or did I need to add the syntax including the {} in order to retrieve the asynchronous data?

Pankaj Parkar Over a year ago

Yes, console statement is getting called before ajax completed because it's synchronous operation. And browser do execute synchronous operation before async.

Collectives™ on Stack Overflow

HTTP PUT Request Returns Empty From Angular 2 Service

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related