LOL
... you would think this would be something easy....
{{data[0].companyName}} is not working, nothing gets returned (no errors
either).
I've included the returned json below (copied directly from the console).
In my service call I'm actually calling "... response.json()" so I'm not
sure why this isn't rendering to the screen. I even tried
<div *ngFor="let d of data">
QUOTE RETURNED: {{data[0].companyName}}
</div>
... no dice. Any ideas?
1. {symbol: "MSFT", companyName: "Microsoft Corporation", primaryExchange
: "Nasdaq Global Select", sector: "", calculationPrice: "close", …}
1. avgTotalVolume:19953190
2. calculationPrice:"close"
3. change:-0.2
4. changePercent:-0.00237
5. close:84.27
6. closeTime:1510088400240
7. companyName:"Microsoft Corporation"
8. delayedPrice:84.08
9. delayedPriceTime:1510091860473
10. iexAskPrice:0
11. iexAskSize:0
12. iexBidPrice:0
13. iexBidSize:0
14. iexLastUpdated:1510088399455
15. iexMarketPercent:0.03412
16. iexRealtimePrice:84.215
17. iexRealtimeSize:100
18. iexVolume:611621
19. latestPrice:84.27
20. latestSource:"Close"
21. latestTime:"November 7, 2017"
22. latestUpdate:1510088400240
23. latestVolume:17925586
24. marketCap:650108515733
25. open:84.81
26. openTime:1510065000721
27. peRatio:28
28. previousClose:84.47
29. primaryExchange:"Nasdaq Global Select"
30. sector:""
31. symbol:"MSFT"
32. week52High:86.2
33. week52Low:57.28
34. ytdChange:0.34979226589964846
35. __proto__:Object
On Tuesday, November 7, 2017 at 5:43:24 PM UTC-7, Zlatko Đurić wrote:
>
> 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" <[email protected]
> <javascript:>> 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 <[email protected]>
>>> 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/quote') //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 [email protected].
>>>> To post to this group, send email to [email protected].
>>>> 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
>> [email protected] <javascript:>.
>> To post to this group, send email to [email protected]
>> <javascript:>.
>> 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 [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
