Well, if it's aan array, you will have to do something like
dara[0].companyName.
What does your json look like?
Also, use data?.companyName in the template, so that it doesn't break if
your data is undefined, like when you're getting the quote.
On Nov 8, 2017 1:35 AM, "Rich Leach" <r...@peaktopeakhosting.com> wrote:
> Thank you! This is so helpful as I learn Angular....
>
> Everything is now working except for when I want to print the results to
> the screen instead of just logging to the console.... I made the following
> changes to the app.component.ts file:
> onGetStock() {
> this.serverService.getStock(this.tickersymbol)
> .subscribe(
> (data: any[]) => this.data = data, // this was set to
> console.log() but I'm trying to get it to output to the screen.
> (error) => console.log(error)
> );
> this.quoteReturned = true;
> }
>
> ... and here in my app.component.html I'm trying to get the results to
> display:
> <div *ngIf="quoteReturned">
> QUOTE RETURNED: {{ data.companyname }}
> </div>
>
> but this generates an error saying "... companyname is undefined...." even
> though companyname was one of the elements in the returned array object
> that was printed to the console.
>
> How do I gain access to the results from the service call on screen? I had
> it in the console....
>
> Thank you again,
>
> Rich
>
>
>
>
>
> On Tuesday, November 7, 2017 at 3:13:43 PM UTC-7, Lucas Lacroix wrote:
>>
>> You've bound your input element to the "tickersymbol" variable. Angular
>> will make sure that when the user modifies the input that the member
>> variable on the instance of the component will also be updated.
>>
>> So, here is what you can do:
>>
>> *component.TS*
>> // Note: remove tickersymbolback and tickersymbolfront
>> // need to declare the member variable or you will get a compile error
>> tickersymbol: string;
>> onGetStock() {
>> this.serverService.getStock(this.tickersymbol)
>> .subscribe(
>> (data: any[]) => console.log(data),
>> (error) => console.log(error)
>> );
>> }
>>
>> *Service.ts*
>> getStock(symbol: string) {
>> return this.http.get(*`*https://api.iextrading.com/1.0/stock/
>> *${encodeURIComponent(symbol)}/quote`*) //this will get updated with
>> the parsed string from the user submitted value
>> .map(
>> (response:Response) => {
>> const data = response.json();
>> return data;
>> }
>> );
>> }
>>
>> `` is string interpolation and ${} is the replacement string. So, if the
>> symbol the user typed in was "DEMO", the resulting URL would be: "
>> https://api.iextrading.com/1.0/stock/DEMO/quote";.
>>
>> On Tue, Nov 7, 2017 at 4:57 PM Arnaud Deman <arnaud...@sppapps.com>
>> wrote:
>>
>>> Hi,
>>>
>>> I try again ;)
>>>
>>> I think the interpolation i.e. : '{{tickersymbol}}' can be used in
>>> the template not in the component.
>>> In the component you could use this kind of string :
>>> let apicall: string=`https://api.iextrading.com/1.0/stock/
>>> <https://www.google.com/url?q=https%3A%2F%2Fapi.iextrading.com%2F1.0%2Fstock%2F&sa=D&sntz=1&usg=AFQjCNFAqHQw6Lci0kqPQ-ab52hw6oGK7Q>
>>> ${tickersymbol}&&/quote`;
>>> (note the quote used: `)
>>>
>>> And then pass it to the injected service.
>>>
>>> Hope this will help !
>>> Regards,
>>> Arnaud.
>>>
>>> Le mardi 7 novembre 2017 18:55:58 UTC+1, Rich Leach a écrit :
>>>>
>>>> Thank you for your help!
>>>>
>>>> I think the larger question is, how do I actually parse, and pass, the
>>>> string (that will represent the actual URL to my web service) from my .html
>>>> form and into my .ts component (to ultimately inject into the service)?
>>>>
>>>> I've been targeting the strategy of trying to combine the 2 strings
>>>> (tickersymbolfront is always static, tickersymbolback is where the form
>>>> value from the user gets appended) and then pass that combined value to the
>>>> method (in the service). I get the feeling I'm doing something silly where
>>>> I'm not able to join the strings correctly and/or incorrectly passing them
>>>> to the method....
>>>>
>>>>
>>>> SNIPPETS:
>>>>
>>>> .HTML
>>>>
>>>> <button class="btn btn-primary" (click)="onGetStock()">Get
>>>> Stock</button>
>>>>
>>>> <input type="text" class="form-control" [(ngModel)]="tickersymbol">
>>>>
>>>>
>>>>
>>>> .TS
>>>>
>>>> ...
>>>>
>>>> export class AppComponent {
>>>> tickersymbolfront:string = 'https://api.iextrading.com/1.0/stock/
>>>> <https://www.google.com/url?q=https%3A%2F%2Fapi.iextrading.com%2F1.0%2Fstock%2F&sa=D&sntz=1&usg=AFQjCNFAqHQw6Lci0kqPQ-ab52hw6oGK7Q>
>>>> ';
>>>> tickersymbolback:string = '{{tickersymbol}}'&&'/quote';
>>>> apicall={{tickersymbolfront}}+{{tickersymbolback}};
>>>>
>>>> ...
>>>>
>>>> onGetStock(apicall) {
>>>> this.serverService.getStock()
>>>> .subscribe(
>>>> (data: any[]) => console.log(data),
>>>> (error) => console.log(error)
>>>> );
>>>> }
>>>>
>>>>
>>>>
>>>> SERVICE.TS
>>>>
>>>> ...
>>>>
>>>> getStock() {
>>>> return this.http.get('https://api.iextrading.com/1.0/stock/TTD/quot
>>>> e') //this will get updated with the parsed string from the user
>>>> submitted value
>>>> .map(
>>>> (response:Response) => {
>>>> const data = response.json();
>>>> return data;
>>>> }
>>>> );
>>>> }
>>>>
>>>>
>>>>
>>>> Again, thanks for your help.
>>>>
>>>> Rich
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>> On Monday, November 6, 2017 at 6:13:10 PM UTC-7, Rich Leach wrote:
>>>>>
>>>>> Hi
>>>>>
>>>>> I'm trying to build a string from a form that I will ultimately pass
>>>>> as a url for a service call.
>>>>>
>>>>> I have a hard coded string, something like '
>>>>> https://api.iextrading.com/1.0/stock/IBM/quote'
>>>>>
>>>>> ... where "IBM" will be dynamically updated with the user entered
>>>>> value.
>>>>>
>>>>> So in my html template I have
>>>>> <input type="text" class="form-control" [(ngModel)]="tickersymbol">
>>>>> <div>
>>>>> https://api.iextrading.com/1.0/stock/{{tickersymbol}}/quote
>>>>> </div>
>>>>>
>>>>> ...which outputs my desired string to the screen.
>>>>>
>>>>> Like I said, n00b question, but how/where would I capture the value
>>>>> from the form field and then pass it to my service?
>>>>>
>>>>> Thanks in advance,
>>>>>
>>>>> Rich
>>>>>
>>>> --
>>> You received this message because you are subscribed to the Google
>>> Groups "Angular and AngularJS discussion" group.
>>> To unsubscribe from this group and stop receiving emails from it, send
>>> an email to angular+u...@googlegroups.com.
>>> To post to this group, send email to ang...@googlegroups.com.
>>> Visit this group at https://groups.google.com/group/angular.
>>> For more options, visit https://groups.google.com/d/optout.
>>>
>> --
>> Lucas Lacroix
>> Computer Scientist
>> Advanced Technology Division, MEDITECH <http://ehr.meditech.com/>
>> 781-774-2293
>>
> --
> You received this message because you are subscribed to a topic in the
> Google Groups "Angular and AngularJS discussion" group.
> To unsubscribe from this topic, visit https://groups.google.com/d/
> topic/angular/nmbleJuxqvI/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to
> angular+unsubscr...@googlegroups.com.
> To post to this group, send email to angular@googlegroups.com.
> Visit this group at https://groups.google.com/group/angular.
> For more options, visit https://groups.google.com/d/optout.
>
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
