-1

Im a newbie to angular.. Given below is a test code which Im writing.. Summary : My problem is that Im not getting a value back into an object, eventhough that Im able to see that in the log. Detail : Im using Angular4, given below is my component code , service and html code, My intention is that when I hit the submit button , the subscriber will call a service using "this.pythTicker" as a parm to a REST API service and the service will return some values for "this.pythTicker" into the property retPythService. The returned values are getting printed in log properly but not getting assigned to this.retPythService. SO my question is, Am I doing something wrong in populationg this.retPythService?? The confusion I have is that, the printing to the log just above that works but the subscribing to this.companyRet.compname does not work My eventual plan is to use the property "retPythService" to populate the second line of the HTML(this.companyRet.compname ).

HTML##### pythsearch.component.html 
<form (submit)="onPythSubmit()">
  <div class="form-group">
    <label>Name</label>
restApiSearch-Ticker: <input type="text" [(ngModel)]="pythTicker" name="Ticker"> <input type="submit">
  </div>
</form>
<h3> ticker details from a Pyth RESTAPI  {{ this.companyRet.compname }} </h3>
COMPONENT####### pythsearch.component.ts 
import { PythSrchService } from '../../services/PythSrchService.service';
    @NgModule({
      declarations: [
        PythsearchComponent
        ],
      imports: [BrowserModule, FormsModule],
      providers: [ PythsearchComponent ],
      bootstrap: [ PythsearchComponent ],
     })


export class PythsearchComponent implements OnInit {
  pythTicker: any;
  companyRet = {
  bond : '',
  compname : '',
  convexity : '',
  price : '',
  };
  retPythService: any[];
  errMsg: string;
  constructor( public PythSrchInst: PythSrchService ) {      }
  ngOnInit() { this.retPythService = '';}

  onPythSubmit() {
    console.log ('hit onsubmit', this.pythTicker);

  // try 1 WORKS !!!!, Im passing pythticker and subscribing to the REST API service 
    this.PythSrchInst.getTickerDetails(this.pythTicker).subscribe(
    retPythService =>  console.log('retpthlog', retPythService) );

    // try 2 does not work, trying to move it to another object this.retPythService
    this.PythSrchInst.getTickerDetails(this.pythTicker).subscribe(
      retPythService =>  {this.retPythService = retPythService ; } );

// the below statements return empty values in LOG
    console.log('thisretpythservice in component :' , this.retPythService);
    console.log('compantret.compname:' , this.companyRet );

      }
}

The service fetching the RESTAPI data

export class PythSrchService {
  PythApi= 'http://127.0.0.1:5002/PythSearch';
  retPythService: any;
  constructor( public http: Http )  {}
   getTickerDetails(PassTicker)  {
     this.retPythService = `${this.PythApi}\/${PassTicker} `;
     console.log('api call:', this.retPythService);
     // console.log( 'service call:' , this.http.get(this.retPythService).map(res => res.json()));
     return this.http.get(this.retPythService).map(res => res.json());
   }

LOG OUTPUT

   api call: http://127.0.0.1:5002/PythSearch/TSLA 
    thisretpythservice in component : undefined
    compantret.compname:                   -->>> empty
    Object { bond: "", compname: "", convexity: "", price: "" } -->> empty
    retpthlog 
    Object { bond: "Testla Motor corp 10 year bond", compname: "tesla motor corp", convexity: "0.52", price: "102" } >>> Not empty , why?
rohit2219
  • 218
  • 2
  • 12
  • 1
    You need to check `this.retPythService` **inside the callback**. Of course it's not accessible on the next line *outside* the callback; if it was, the callback would be unnecessary. That's the *whole point of giving the callback*, and of async handling in general. You can see in your own logs the order in which those things happen. – jonrsharpe Jan 05 '18 at 16:15
  • Yes, the order was wrong, when you meant inside call back, you meant inside the subscribe () itself right? – rohit2219 Jan 05 '18 at 16:21
  • 1
    Inside the callback function you pass to subscribe, yes. – jonrsharpe Jan 05 '18 at 16:22
  • Thanks, I was missing the concept of subscribe and observables till now.. Now its clear to me. The below fix worked.. // try 2 works now this.PythSrchInst.getTickerDetails(this.pythTicker).subscribe( retPythService => { this.retPythService = retPythService ; this.companyRet = this.retPythService; console.log('thisretpythservice in component :' , this.retPythService); }); – rohit2219 Jan 05 '18 at 17:04

1 Answers1

0

Posting an answer in case any other newbie encounters the same trivial problem Thanks, I was missing the concept of subscribe and observables till now.. Now its clear to me. The below fix worked..

// try 2 works now

this.PythSrchInst.getTickerDetails(this.pythTicker).subscribe(
  retPythService =>  {
    this.retPythService = retPythService ;
   // This was the problem
    this.companyRet = this.retPythService; 
    console.log('thisretpythservice in component :' , this.retPythService);
  });
rohit2219
  • 218
  • 2
  • 12