[AngularJS] Re: CLI install error:
Tito Sorry this took so long, I'm in the middle of moving This worked nicely buddy, I appreciate your help (again). I can now install the latest version of Angular CLI but for some reason the local version remained untouched; I have to update the individual Angular project after creating it. However it reports that the global version is up to date, just not the local version. https://stackoverflow.com/questions/43931986/how-to-upgrade-angular-cli-to-the-latest-version Not a big deal, at least I'm able to run a new project with the latest version of Angular (vs 4.x which is what I was running before!) I'll have to add you to my Christmas card list for all of your help! Thanks again, Rich On Monday, November 12, 2018 at 6:23:10 PM UTC-7, Tito wrote: > > Hello there, > > Try this? > > > npm config set http-proxy 104.16.27.35:443 > <http://www.google.com/url?q=http%3A%2F%2F104.16.27.35%3A443=D=1=AFQjCNG_5SD0FWsFJa-5dQg1CQAkmHPfDQ>npm > config set https-proxy 104.16.27.35:443 > <http://www.google.com/url?q=http%3A%2F%2F104.16.27.35%3A443=D=1=AFQjCNG_5SD0FWsFJa-5dQg1CQAkmHPfDQ> > > > On Monday, November 12, 2018 at 5:00:21 PM UTC-8, Rich Leach wrote: >> >> Hola Tito! >> >> Thanks for the link buddy, I checked it out and it said I should check >> out my proxy settings, but I'm not sure what to set it to (I've never >> manually spec'd out a proxy for NPM)? Did you set your proxy manually >> when you installed your NPM version? >> >> Good to hear from you buddy >> >> Rich >> >> >> >> >> On Monday, November 12, 2018 at 2:00:57 PM UTC-7, Tito wrote: >>> >>> hello senor Rich >>> >>> check this out >>> >>> https://github.com/npm/npm/issues/17947 >>> >>> On Monday, November 12, 2018 at 12:24:50 PM UTC-8, Rich Leach wrote: >>>> >>>> I'm on Mac OSX 10.14 >>>> >>>> I have NPM 6.4.1 and I'm trying to install the Angular CLI, however >>>> when I run the install command: >>>> >>>> npm install -g @angular/cli >>>> (with or without sudo) >>>> >>>> I get the following error: >>>> >>>> FetchError: request to https://registry.npmjs.org/@angular%2fcli >>>> failed, reason: connect EPERM 104.16.27.35:443 - Local (0.0.0.0:0) >>>> >>>> at ClientRequest.req.on.err >>>> (/usr/local/lib/node_modules/npm/node_modules/node-fetch-npm/src/index.js:68:14) >>>> >>>> >>>> >>>> >>>> To solve this I tried: >>>> >>>> • npm cache verify which comes back successful but having affected 0 >>>> bytes of content >>>> >>>> • I tested the url that is reported in the error in my browser ( >>>> https://registry.npmjs.org/@angular%2fcli) which does, in fact return >>>> data >>>> >>>> >>>> Has anyone else run into this? I know the error suggests my firewall or >>>> proxy could be restricting network access but since I successfully updated >>>> an additional computer today (with the same config) I know this is not the >>>> issue >>>> >>>> >>>> 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+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.
[AngularJS] Re: CLI install error:
Hola Tito! Thanks for the link buddy, I checked it out and it said I should check out my proxy settings, but I'm not sure what to set it to (I've never manually spec'd out a proxy for NPM)? Did you set your proxy manually when you installed your NPM version? Good to hear from you buddy Rich On Monday, November 12, 2018 at 2:00:57 PM UTC-7, Tito wrote: > > hello senor Rich > > check this out > > https://github.com/npm/npm/issues/17947 > > On Monday, November 12, 2018 at 12:24:50 PM UTC-8, Rich Leach wrote: >> >> I'm on Mac OSX 10.14 >> >> I have NPM 6.4.1 and I'm trying to install the Angular CLI, however when >> I run the install command: >> >> npm install -g @angular/cli >> (with or without sudo) >> >> I get the following error: >> >> FetchError: request to https://registry.npmjs.org/@angular%2fcli failed, >> reason: connect EPERM 104.16.27.35:443 - Local (0.0.0.0:0) >> >> at ClientRequest.req.on.err >> (/usr/local/lib/node_modules/npm/node_modules/node-fetch-npm/src/index.js:68:14) >> >> >> >> >> To solve this I tried: >> >> • npm cache verify which comes back successful but having affected 0 >> bytes of content >> >> • I tested the url that is reported in the error in my browser ( >> https://registry.npmjs.org/@angular%2fcli) which does, in fact return >> data >> >> >> Has anyone else run into this? I know the error suggests my firewall or >> proxy could be restricting network access but since I successfully updated >> an additional computer today (with the same config) I know this is not the >> issue >> >> >> 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+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.
[AngularJS] CLI install error:
I'm on Mac OSX 10.14 I have NPM 6.4.1 and I'm trying to install the Angular CLI, however when I run the install command: npm install -g @angular/cli (with or without sudo) I get the following error: FetchError: request to https://registry.npmjs.org/@angular%2fcli failed, reason: connect EPERM 104.16.27.35:443 - Local (0.0.0.0:0) at ClientRequest.req.on.err (/usr/local/lib/node_modules/npm/node_modules/node-fetch-npm/src/index.js:68:14) To solve this I tried: • npm cache verify which comes back successful but having affected 0 bytes of content • I tested the url that is reported in the error in my browser ( https://registry.npmjs.org/@angular%2fcli) which does, in fact return data Has anyone else run into this? I know the error suggests my firewall or proxy could be restricting network access but since I successfully updated an additional computer today (with the same config) I know this is not the issue 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+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.
[AngularJS] Re: Permissions issue during installation
Thank you again Tito! I wasn't able to solve my problem with any of the chmod or chgrp commands so I'll have to look into using an installer helper (Homebrew? Have you used it?) over the weekend. Thanks again buddy! Rich On Wednesday, January 10, 2018 at 5:43:07 PM UTC-7, Tito wrote: > > Hello Senor Rico > > Please see this > > https://github.com/angular/angular-cli/issues/6848 > > On Wednesday, January 10, 2018 at 2:59:43 PM UTC-8, Rich Leach wrote: >> >> I recently purchased the Material Design with Bootstrap for Angular. >> >> https://mdbootstrap.com/angular/5min-quickstart/ >> >> I've been wrestling with my Mac trying to get it installed over the last >> few days, mainly permission issues The support guys over there are very >> cool and have been dealing with my beginner issues, but I think something >> else may be up with my system >> >> Whenever I run their install command from within my project, for example: >> sudo npm install git+ >> https://oauth2:sbbypbsf-mcbhgyhu...@git.mdbootstrap.com/mdb/angular/ng-pro.git >> >> --save >> >> >> I get a lengthy result but in it is always this problem: >> ... >> >> gyp verb get node dir target node version installed: 8.9.4 >> >> gyp verb build dir attempting to create "build" dir: >> /Users/rich/Desktop/angular02/node_modules/node-sass/build >> >> gyp ERR! configure error >> >> gyp ERR! stack Error: EACCES: permission denied, mkdir >> '/Users/rich/Desktop/angular02/node_modules/node-sass/build' >> >> gyp ERR! System Darwin 15.6.0 >> >> ... >> >> >> But here's the problem: the error message says permission denied for the >> mkdir command on the directory, so I simply went and set the permissions on >> my project folder (and all enclosed items) to access for everyone. But the >> error still keeps coming and the install fails, and even running ng serve >> fails (complains it can't find module node-sass, which is what's being >> blocked). >> What else can I do besides manually setting my project folder's >> permissions to make this installation work? >> >> Yes, I've uninstalled, reinstalled Node/CLI/Angular >> >> Thanks, >> >> Rich >> >> >> >> >> My configuration: >> >> Angular CLI: 1.5.0 >> >> Node: 8.9.4 >> >> OS: darwin x64 >> >> Angular: 5.2.0 >> >> ... animations, common, compiler, compiler-cli, core, forms >> >> ... http, language-service, platform-browser >> >> ... platform-browser-dynamic, router >> >> >> @angular/cli: 1.5.0 >> >> @angular-devkit/build-optimizer: 0.0.36 >> >> @angular-devkit/core: 0.0.22 >> >> @angular-devkit/schematics: 0.0.42 >> >> @ngtools/json-schema: 1.1.0 >> >> @ngtools/webpack: 1.8.0 >> >> @schematics/angular: 0.1.11 >> >> @schematics/schematics: 0.0.11 >> >> typescript: 2.5.3 >> >> webpack: 3.10.0 >> >> >> -- 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.
[AngularJS] Permissions issue during installation
I recently purchased the Material Design with Bootstrap for Angular. https://mdbootstrap.com/angular/5min-quickstart/ I've been wrestling with my Mac trying to get it installed over the last few days, mainly permission issues The support guys over there are very cool and have been dealing with my beginner issues, but I think something else may be up with my system Whenever I run their install command from within my project, for example: sudo npm install git+https://oauth2:sbbypbsf-mcbhgyhu...@git.mdbootstrap.com/mdb/angular/ng-pro.git --save I get a lengthy result but in it is always this problem: ... gyp verb get node dir target node version installed: 8.9.4 gyp verb build dir attempting to create "build" dir: /Users/rich/Desktop/angular02/node_modules/node-sass/build gyp ERR! configure error gyp ERR! stack Error: EACCES: permission denied, mkdir '/Users/rich/Desktop/angular02/node_modules/node-sass/build' gyp ERR! System Darwin 15.6.0 ... But here's the problem: the error message says permission denied for the mkdir command on the directory, so I simply went and set the permissions on my project folder (and all enclosed items) to access for everyone. But the error still keeps coming and the install fails, and even running ng serve fails (complains it can't find module node-sass, which is what's being blocked). What else can I do besides manually setting my project folder's permissions to make this installation work? Yes, I've uninstalled, reinstalled Node/CLI/Angular Thanks, Rich My configuration: Angular CLI: 1.5.0 Node: 8.9.4 OS: darwin x64 Angular: 5.2.0 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, router @angular/cli: 1.5.0 @angular-devkit/build-optimizer: 0.0.36 @angular-devkit/core: 0.0.22 @angular-devkit/schematics: 0.0.42 @ngtools/json-schema: 1.1.0 @ngtools/webpack: 1.8.0 @schematics/angular: 0.1.11 @schematics/schematics: 0.0.11 typescript: 2.5.3 webpack: 3.10.0 -- 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.
[AngularJS] Material Design vs Bootstrap (or both?)
I'm going to be designing more and doing more layout work for Angular and wanted to know if the community has a preferred toolset? I've seen a lot of Material Design https://material.angular.io/ but I've done a lot with Bootstrap in the past so I found https://mdbootstrap.com/angular/ (which isn't free, I know) but looks a lot more familiar. Any others out there I should consider? Not trying to start a war or debate, just trying to understand what's out there and mainstream Thanks, 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+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.
[AngularJS] Re: Using values returned from HTTP service call
Tito
My original code would have worked, as posted, with the following changes:
My .html file where I was looping through the output needed 2 changes:
• The replacement of the smart quotes with standard quotes
• My references to the service call values were all in lowercase
(result.id, result.orderno, result.crew, result.jobnumber, result.yards,
result.delivery); they needed to be upper-cased (result.ID, result.ORDERNO,
result.CREW, result.JOBNUMBER, result.YARDS, result.DELIVERY). So with
everything else remaining the same, this code pasted below is what made
everything start to work again:
{{results}}
ID: {{result.ID}}
ORDER#: {{result.ORDERNO}}
CREW: {{result.CREW}}
JOB# {{result.JOBNUMBER}}
YARDS: {{result.YARDS}}
DELIVERY: {{result.DELIVERY}}
I think the factors that complicated matters for me personally were that I
started coding on a Windows machine without editors (only Wordpad, hence
the smart quote issue) and that I had never made this functionality work in
Angular before, so I was seeing all of this brand new for the first time.
So, for example when you suggested I add an Order class to my
data.service.ts file I started to get confused as none of the docs I was
using seemed to need that. But I tried all that you suggested and I'm sorry
I didn't take a breath sooner to rewrite my code in a proper editor and
give the correct attention to my HTML file casing.
Like I said, my data.service.ts and app.component.ts files were OK
(although I just ran another test with your Order class and type reference
in the getAllOrders() call, and it also works fine with those code items
remaining, so kudos!). It was the upper-case issue with the values in the
.html file that would have messed up anyone else, I believe
I'm near Denver. Ever come to Colorado? Beers on me my friend!
Rich
On Tuesday, December 19, 2017 at 8:35:11 PM UTC-7, Tito wrote:
>
> ok Rich. Now explain to me why it worked.
> where abouts are you located?
--
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.
[AngularJS] Re: Using values returned from HTTP service call
Tito
BEST ADVICE I GOT ALL WEEK!
Here's what was happening:
I started this exercise on my Mac, had to travel for a project and jumped
onto a Windows machine (not mine so none of my editors, I've been using
WordPad)
This code in my HTML:
{{result.ID}}
{{result.ORDERNO}}
{{result.CREW}}
{{result.JOBNUMBER}}
{{result.YARDS}}
{{result.DELIVERY}}
... was italicized. (When I first started on this issue I tried upper and
lower case but that didn't make any difference, because it was italicized.
Italics shouldn't make a difference, right? Not on Windows apparently).
I took your advice, I got focused, downloaded Atom, got my code in there,
focused back to step 1 in my debugging (test upper/lower case) and since my
call values are returning as upper case, upper case in my HTML works fine
and the results are now OUTPUT TO SCREEN!
I was never bitten by italicized code before, but code pasted from
Microsoft editors has given me issues in the past. Regardless, let's call
the official Root Cause here as being upper/lower case issue.
... and you sir, just landed on my Christmas card list.
Drop me a line and I'll send you something from Amazon (or booze).
THANKS TITO!
On Tuesday, December 19, 2017 at 5:20:43 PM UTC-7, Tito wrote:
>
> Stay focused Rich!
> You keep creating more smaller graves for yourself.
>
> so you say when you add the data manually it works
>
> concreteorders = [
> {orderno: '160', crew: '2', jobno: '1702377', yards: '40', delivery:
> 'Elm/Turant Streets'},
>
> but this data you are adding is totally different than the data from your
> api
>
> {ID: 1, ORDERNO: 160, CREW: 2, JOBNUMBER: 1702377, YARDS: 40, …} do you
> see what the difference it? capitalization, order of data, name of keys in
> key/value.
>
> I cant see the rest of that data payload please send me the full data.
> Also when people ask a question to help you, help them help you by
> answering exactly what has been asked.
> Again focus Rich! :)
> Again the key word is focus and breath.
>
>
>
> On Tuesday, December 19, 2017 at 4:08:17 PM UTC-8, Rich Leach wrote:
>>
>> Tito
>>
>> I made the changes you suggested and while the app now compiles and no
>> errors in the browser, I'm back to the original behavior of the app
>> running, and when the button is clicked I get the 7 repeated divs that are
>> empty [empty object] (X7)
>>
>> The data being returned from my service is actual JSON data, 7 records in
>> total. The console.log() dump is accurate and true; those are the 7 records
>> and the data is correct.
>>
>>
>>1. (7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
>> 1. 0:{ID: 1, ORDERNO: 160, CREW: 2, JOBNUMBER: 1702377, YARDS: 40
>> , …}
>> 2. 1:{ID: 2, ORDERNO: 44, CREW: 3, JOBNUMBER: 1702391, YARDS: 90, …
>> }
>> 3. 2:{ID: 3, ORDERNO: 19, CREW: 5, JOBNUMBER: 1702294, YARDS: 30, …
>> }
>> 4. 3:{ID: 4, ORDERNO: 66, CREW: 6, JOBNUMBER: 1702364, YARDS: 55, …
>> }
>> 5. 4:{ID: 5, ORDERNO: 69, CREW: 7, JOBNUMBER: 1702272, YARDS: 170
>> , …}
>> 6. 5:{ID: 6, ORDERNO: 102, CREW: 9, JOBNUMBER: 1702321, YARDS: 10
>> , …}
>> 7. 6:{ID: 7, ORDERNO: 36, CREW: 10, JOBNUMBER: 1702289, YARDS: 80
>> , …}
>> 8. length:7
>>
>>
>> Here's what makes this so frustrating: If I hard code the results into an
>> array called "concreteorders" (see below) in my class file I can easily
>> loop over the array using the existing html, without a problem. I can't
>> find any documentation anywhere that talks about receiving query data from
>> a service call, everything hard codes (like below) because no one wants to
>> teach a lesson about this and force the students to setup a web server; yet
>> a basic service call/loop through query results happens all day long in any
>> web app I'm not sure what to do next? Any suggestions?
>>
>> concreteorders = [
>> {orderno: '160', crew: '2', jobno: '1702377', yards: '40', delivery:
>> 'Elm/Turant Streets'},
>> {orderno: '44', crew: '3', jobno: '1702391', yards: '90', delivery:
>> '2099 Steele Street'},
>> {orderno: '19', crew: '5', jobno: '1702294', yards: '30', delivery:
>> 'Mountain Medical - East Campus'},
>> {orderno: '66', crew: '6', jobno: '1702364', yards: '55', delivery:
>> 'Estes Regional Development Center'},
>> {orderno: '69', crew: '7', jobno: '1702272', yards: '170', delivery:
>> 'Airport Blvd/Terrance lot'},
>> {orderno: '102', crew: '9', jobno: '1702321', yards: '10', delivery:
>> 'Lake
[AngularJS] Re: Using values returned from HTTP service call
Tito
I made the changes you suggested and while the app now compiles and no
errors in the browser, I'm back to the original behavior of the app
running, and when the button is clicked I get the 7 repeated divs that are
empty [empty object] (X7)
The data being returned from my service is actual JSON data, 7 records in
total. The console.log() dump is accurate and true; those are the 7 records
and the data is correct.
1. (7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
1. 0:{ID: 1, ORDERNO: 160, CREW: 2, JOBNUMBER: 1702377, YARDS: 40, …}
2. 1:{ID: 2, ORDERNO: 44, CREW: 3, JOBNUMBER: 1702391, YARDS: 90, …}
3. 2:{ID: 3, ORDERNO: 19, CREW: 5, JOBNUMBER: 1702294, YARDS: 30, …}
4. 3:{ID: 4, ORDERNO: 66, CREW: 6, JOBNUMBER: 1702364, YARDS: 55, …}
5. 4:{ID: 5, ORDERNO: 69, CREW: 7, JOBNUMBER: 1702272, YARDS: 170, …}
6. 5:{ID: 6, ORDERNO: 102, CREW: 9, JOBNUMBER: 1702321, YARDS: 10, …}
7. 6:{ID: 7, ORDERNO: 36, CREW: 10, JOBNUMBER: 1702289, YARDS: 80, …}
8. length:7
Here's what makes this so frustrating: If I hard code the results into an
array called "concreteorders" (see below) in my class file I can easily
loop over the array using the existing html, without a problem. I can't
find any documentation anywhere that talks about receiving query data from
a service call, everything hard codes (like below) because no one wants to
teach a lesson about this and force the students to setup a web server; yet
a basic service call/loop through query results happens all day long in any
web app I'm not sure what to do next? Any suggestions?
concreteorders = [
{orderno: '160', crew: '2', jobno: '1702377', yards: '40', delivery:
'Elm/Turant Streets'},
{orderno: '44', crew: '3', jobno: '1702391', yards: '90', delivery:
'2099 Steele Street'},
{orderno: '19', crew: '5', jobno: '1702294', yards: '30', delivery:
'Mountain Medical - East Campus'},
{orderno: '66', crew: '6', jobno: '1702364', yards: '55', delivery:
'Estes Regional Development Center'},
{orderno: '69', crew: '7', jobno: '1702272', yards: '170', delivery:
'Airport Blvd/Terrance lot'},
{orderno: '102', crew: '9', jobno: '1702321', yards: '10', delivery:
'Lakes/SE 40th'},
{orderno: '36', crew: '10', jobno: '1702289', yards: '80', delivery:
'Boulder TpkPecos Blvd'}
];
Again thank you for your help.
Rich
On Tuesday, December 19, 2017 at 4:30:15 PM UTC-7, Tito wrote:
>
> what data is http://127.0.0.1:8510/CFC/service.cfc?method=getAllOrders
> <http://www.google.com/url?q=http%3A%2F%2F127.0.0.1%3A8510%2FCFC%2Fservice.cfc%3Fmethod%3DgetAllOrders=D=1=AFQjCNHxX1lZFgnr9qPYMZoiDc8tj0rAuA>
> exactly
> returning? how many key value pairs is the api returning? for example if it
> returns 10 key value pairs but your Order Class has 6, then it might have 4
> more extra key/value pairs it might not know what to do with them.
>
> Also change things to this, not sure if it makes a difference
> import { Injectable } from '@angular/core';
> import { Http, Response } from '@angular/http';
> import 'rxjs/Rx';
>
>
>
> export class Order{
> ID: number;
> ORDERNO: number;
> CREW: number;
> YARDS: number;
> JOBNUMBER: number;
> DELIVERY: string;
> };
>
> @Injectable()
> export class DataService {
>
> constructor(private http:Http) { }
>
>
>
> getAllOrders(){
> return this.http.get('
> http://127.0.0.1:8510/CFC/service.cfc?method=getAllOrders
> <http://www.google.com/url?q=http%3A%2F%2F127.0.0.1%3A8510%2FCFC%2Fservice.cfc%3Fmethod%3DgetAllOrders=D=1=AFQjCNHxX1lZFgnr9qPYMZoiDc8tj0rAuA>
> ')
> .map((response: Response) => <Order[]>response.json());
> }
> };
>
> On Tuesday, December 19, 2017 at 3:14:01 PM UTC-8, Rich Leach wrote:
>>
>> Thanks Tito.
>>
>> I finally got the app to compile, but now the browser is throwing errors
>> (see below).
>>
>> My data.service.ts file now looks like this:
>>
>> import { Injectable } from '@angular/core';
>> import { Http, Response } from '@angular/http';
>> import 'rxjs/Rx';
>>
>> @Injectable()
>>
>> export class Order{
>> ID: number;
>> ORDERNO: number;
>> CREW: number;
>> YARDS: number;
>> JOBNUMBER: number;
>> DELIVERY: string;
>> };
>>
>> export class DataService {
>>
>> constructor(private http:Http) { }
>>
>>
>>
>> getAllOrders(){
>> return this.http.get('
>> http://127.0.0.1:8510/CFC/service.cfc?method=getAllOrders')
>> .map((response: Response) => <Order[]>response.json());
>> }
>> };
>>
>>
>>
>> ... but as I said the browser is throwing the following errors:
>> "Can't reso
[AngularJS] Re: Using values returned from HTTP service call
Thanks Tito.
I finally got the app to compile, but now the browser is throwing errors
(see below).
My data.service.ts file now looks like this:
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/Rx';
@Injectable()
export class Order{
ID: number;
ORDERNO: number;
CREW: number;
YARDS: number;
JOBNUMBER: number;
DELIVERY: string;
};
export class DataService {
constructor(private http:Http) { }
getAllOrders(){
return
this.http.get('http://127.0.0.1:8510/CFC/service.cfc?method=getAllOrders')
.map((response: Response) => <Order[]>response.json());
}
};
... but as I said the browser is throwing the following errors:
"Can't resolve all parameters for data service".
Are we trying to type the response to type:Order? Won't I have to create a
new component and then import it into my data.service.ts file? I'm trying
to understand the solution as much as I want to solve the issue.
Again, thanks for your patience.
Rich
On Tuesday, December 19, 2017 at 3:57:36 PM UTC-7, Tito wrote:
>
> no worries :) learning myself as well, you will get soon and say to
> yourself "that was it"
>
> but sorry to say you seem to be digging a deeper hole by creating new
> components and stuff before fully understanding what it is you are doing.
> Always start simple and build on that.
> I would recommend not digging into rabbit holes.
>
>
> Add the following class
>
> export class Order{
> ID: number;
> ORDERNO: number;
> CREW: number;
> YARDS: number;
> JOBNUMBER: number;
> DELIVERY: number;
> }
>
> right above getAllOrders
>
> getAllOrders(){
> return this.http.get('
> http://127.0.0.1:8510/CFC/service.cfc?method=getAllOrders')
> .map((response: Response) => <Order[]>response.json());
> }
> }
>
>
> On Tuesday, December 19, 2017 at 2:11:29 PM UTC-8, Rich Leach wrote:
>>
>> Tito
>>
>> I'm so sorry to need so much hand holding, I'm still learning Angular and
>> I'm doing my best
>>
>> I created a new component called Order (I typed "ng g c order" ) and
>> pasted your suggestion into the component so order.component.ts now appears
>> like this:
>>
>> import { Component, OnInit } from '@angular/core';
>>
>> @Component({
>> selector: 'app-order',
>> templateUrl: './order.component.html',
>> styleUrls: ['./order.component.css']
>> })
>> export class OrderComponent implements OnInit {
>>
>> constructor() { }
>>
>> ngOnInit() {
>>
>> ID: number;
>> ORDERNO: number;
>> CREW: number;
>> YARDS: number;
>> JOBNUMBER: number;
>> DELIVERY: string;
>> }
>>
>> }
>>
>> ... and unfortunately there are a bunch of errors that prevent the
>> application from compiling. Is that what you meant me to do?
>>
>> Thank you again for your patience, I really appreciate your help.
>>
>> Rich
>>
>>
>>
>>
>> On Tuesday, December 19, 2017 at 2:59:55 PM UTC-7, Tito wrote:
>>>
>>> did you add the class?
>>>
>>> export class Order{
>>> ID: number;
>>> ORDERNO: number;
>>> CREW: number;
>>> YARDS: number;
>>> JOBNUMBER: number;
>>> DELIVERY: number;
>>> }
>>>
>>> On Tuesday, December 19, 2017 at 1:47:03 PM UTC-8, Rich Leach wrote:
>>>>
>>>> Tito
>>>>
>>>> Thanks for getting back to me with help!
>>>>
>>>> I tried making the changes you suggested, specifically I altered my
>>>> method call as follows:
>>>>
>>>> data.service.ts:
>>>>
>>>> getAllOrders(){
>>>> return this.http.get('
>>>> http://127.0.0.1:8510/CFC/service.cfc?method=getAllOrders')
>>>> .map((response: Response) => <Order[]>response.json());
>>>> }
>>>> }
>>>>
>>>> but it won't compile, it complains that "Cannot find name 'order'".
>>>>
>>>> Anything you'd suggest?
>>>>
>>>> Thanks again,
>>>>
>>>> Rich
>>>>
>>>>
>>>>
>>>>
>>>> On Tuesday, December 19, 2017 at 2:10:48 PM UTC-7, Tito wrote:
>>>>>
>>>>> let me take a stab here comparing things to my code.
>>>>> please add the following, of course fill in the rest of the columns,
>>>>> hope
[AngularJS] Re: Using values returned from HTTP service call
Tito
I'm so sorry to need so much hand holding, I'm still learning Angular and
I'm doing my best
I created a new component called Order (I typed "ng g c order" ) and pasted
your suggestion into the component so order.component.ts now appears like
this:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-order',
templateUrl: './order.component.html',
styleUrls: ['./order.component.css']
})
export class OrderComponent implements OnInit {
constructor() { }
ngOnInit() {
ID: number;
ORDERNO: number;
CREW: number;
YARDS: number;
JOBNUMBER: number;
DELIVERY: string;
}
}
... and unfortunately there are a bunch of errors that prevent the
application from compiling. Is that what you meant me to do?
Thank you again for your patience, I really appreciate your help.
Rich
On Tuesday, December 19, 2017 at 2:59:55 PM UTC-7, Tito wrote:
>
> did you add the class?
>
> export class Order{
> ID: number;
> ORDERNO: number;
> CREW: number;
> YARDS: number;
> JOBNUMBER: number;
> DELIVERY: number;
> }
>
> On Tuesday, December 19, 2017 at 1:47:03 PM UTC-8, Rich Leach wrote:
>>
>> Tito
>>
>> Thanks for getting back to me with help!
>>
>> I tried making the changes you suggested, specifically I altered my
>> method call as follows:
>>
>> data.service.ts:
>>
>> getAllOrders(){
>> return this.http.get('
>> http://127.0.0.1:8510/CFC/service.cfc?method=getAllOrders')
>> .map((response: Response) => <Order[]>response.json());
>> }
>> }
>>
>> but it won't compile, it complains that "Cannot find name 'order'".
>>
>> Anything you'd suggest?
>>
>> Thanks again,
>>
>> Rich
>>
>>
>>
>>
>> On Tuesday, December 19, 2017 at 2:10:48 PM UTC-7, Tito wrote:
>>>
>>> let me take a stab here comparing things to my code.
>>> please add the following, of course fill in the rest of the columns,
>>> hope it is not a big data blob. Also make sure the data types for these
>>> keys are accurate and align to your api (no criss cross)
>>>
>>> then instead of
>>>
>>> .map(
>>> (response:Response) => {
>>> const data = response.json();
>>> return data;
>>> }
>>>
>>> do .map((response: Response) => <Order[]>response.json())
>>>
>>> no need for return data. that might be the issue?
>>>
>>> export class Order{
>>> ID: number;
>>> ORDERNO: number;
>>> CREW: number;
>>> YARDS: number;
>>> JOBNUMBER: number;
>>> DELIVERY: number;
>>> }
>>>
>>> On Tuesday, December 19, 2017 at 9:52:05 AM UTC-8, Rich Leach wrote:
>>>>
>>>> Sure thing, here are my code snippets as requested!
>>>>
>>>>
>>>>
>>>>>> From my html:
>>>>>> Get Concrete
>>>>>> Orders
>>>>>>
>>>>>> {{results}} //this is where I get the [object
>>>>>> Object] displayed on screen 7 times
>>>>>>
>>>>>>
>>>>>> {{result.id}}
>>>>>> {{result.crew}}
>>>>>> {{result.orderno}}
>>>>>> {{result.jobnumber}}
>>>>>> {{result.yards}}
>>>>>> {{result.delivery}}
>>>>>>
>>>>>>
>>>>>>
>>>>>> And my service calling code:
>>>>>> getAllOrders(){
>>>>>> return this.http.get('
>>>>>> http://127.0.0.1:8510/CFC/service.cfc?method=getAllOrders')
>>>>>> .map(
>>>>>> (response:Response) => {
>>>>>> const data = response.json();
>>>>>> return data;
>>>>>> }
>>>>>> );
>>>>>> }
>>>>>>
>>>>>> ... and my component.ts code:
>>>>>> onGet() {
>>>>>> this.dataService.getAllOrders()
>>>>>> .subscribe(
>>>>>> (data: any[]) => console.log(data), //this.results.data
>>>>>> (error) => console.log(error)
>>>>>> );
>>>>>> }
>>>>>>
>>>>>
>>>> and here is the actual console.log(data) result:
>>>>
>>>>1. (7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
>>>> 1. 0:{ID: 1, ORDERNO: 160, CREW: 2, JOBNUMBER: 1702377, YARDS: 40
>>>> , …}
>>>> 2. 1:{ID: 2, ORDERNO: 44, CREW: 3, JOBNUMBER: 1702391, YARDS: 90
>>>> , …}
>>>> 3. 2:{ID: 3, ORDERNO: 19, CREW: 5, JOBNUMBER: 1702294, YARDS: 30
>>>> , …}
>>>> 4. 3:{ID: 4, ORDERNO: 66, CREW: 6, JOBNUMBER: 1702364, YARDS: 55
>>>> , …}
>>>> 5. 4:{ID: 5, ORDERNO: 69, CREW: 7, JOBNUMBER: 1702272, YARDS: 170
>>>> , …}
>>>> 6. 5:{ID: 6, ORDERNO: 102, CREW: 9, JOBNUMBER: 1702321, YARDS: 10
>>>> , …}
>>>> 7. 6:{ID: 7, ORDERNO: 36, CREW: 10, JOBNUMBER: 1702289, YARDS: 80
>>>> , …}
>>>> 8. length:7
>>>> 9.
>>>>
>>>> Thanks for your help,
>>>>
>>>> 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+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.
[AngularJS] Re: Using values returned from HTTP service call
Tito
Thanks for getting back to me with help!
I tried making the changes you suggested, specifically I altered my method
call as follows:
data.service.ts:
getAllOrders(){
return
this.http.get('http://127.0.0.1:8510/CFC/service.cfc?method=getAllOrders')
.map((response: Response) => <Order[]>response.json());
}
}
but it won't compile, it complains that "Cannot find name 'order'".
Anything you'd suggest?
Thanks again,
Rich
On Tuesday, December 19, 2017 at 2:10:48 PM UTC-7, Tito wrote:
>
> let me take a stab here comparing things to my code.
> please add the following, of course fill in the rest of the columns, hope
> it is not a big data blob. Also make sure the data types for these keys are
> accurate and align to your api (no criss cross)
>
> then instead of
>
> .map(
> (response:Response) => {
> const data = response.json();
> return data;
> }
>
> do .map((response: Response) => <Order[]>response.json())
>
> no need for return data. that might be the issue?
>
> export class Order{
> ID: number;
> ORDERNO: number;
> CREW: number;
> YARDS: number;
> JOBNUMBER: number;
> DELIVERY: number;
> }
>
> On Tuesday, December 19, 2017 at 9:52:05 AM UTC-8, Rich Leach wrote:
>>
>> Sure thing, here are my code snippets as requested!
>>
>>
>>
>>>> From my html:
>>>> Get Concrete
>>>> Orders
>>>>
>>>> {{results}} //this is where I get the [object
>>>> Object] displayed on screen 7 times
>>>>
>>>>
>>>> {{result.id}}
>>>> {{result.crew}}
>>>> {{result.orderno}}
>>>> {{result.jobnumber}}
>>>> {{result.yards}}
>>>> {{result.delivery}}
>>>>
>>>>
>>>>
>>>> And my service calling code:
>>>> getAllOrders(){
>>>> return this.http.get('
>>>> http://127.0.0.1:8510/CFC/service.cfc?method=getAllOrders')
>>>> .map(
>>>> (response:Response) => {
>>>> const data = response.json();
>>>> return data;
>>>> }
>>>> );
>>>> }
>>>>
>>>> ... and my component.ts code:
>>>> onGet() {
>>>> this.dataService.getAllOrders()
>>>> .subscribe(
>>>> (data: any[]) => console.log(data), //this.results.data
>>>> (error) => console.log(error)
>>>> );
>>>> }
>>>>
>>>
>> and here is the actual console.log(data) result:
>>
>>1. (7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
>> 1. 0:{ID: 1, ORDERNO: 160, CREW: 2, JOBNUMBER: 1702377, YARDS: 40
>> , …}
>> 2. 1:{ID: 2, ORDERNO: 44, CREW: 3, JOBNUMBER: 1702391, YARDS: 90, …
>> }
>> 3. 2:{ID: 3, ORDERNO: 19, CREW: 5, JOBNUMBER: 1702294, YARDS: 30, …
>> }
>> 4. 3:{ID: 4, ORDERNO: 66, CREW: 6, JOBNUMBER: 1702364, YARDS: 55, …
>> }
>> 5. 4:{ID: 5, ORDERNO: 69, CREW: 7, JOBNUMBER: 1702272, YARDS: 170
>> , …}
>> 6. 5:{ID: 6, ORDERNO: 102, CREW: 9, JOBNUMBER: 1702321, YARDS: 10
>> , …}
>> 7. 6:{ID: 7, ORDERNO: 36, CREW: 10, JOBNUMBER: 1702289, YARDS: 80
>> , …}
>> 8. length:7
>> 9.
>>
>> Thanks for your help,
>>
>> 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+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.
[AngularJS] Re: Using values returned from HTTP service call
Sure thing, here are my code snippets as requested!
>> From my html:
>> Get Concrete
>> Orders
>>
>> {{results}} //this is where I get the [object
>> Object] displayed on screen 7 times
>>
>>
>> {{result.id}}
>> {{result.crew}}
>> {{result.orderno}}
>> {{result.jobnumber}}
>> {{result.yards}}
>> {{result.delivery}}
>>
>>
>>
>> And my service calling code:
>> getAllOrders(){
>> return this.http.get('
>> http://127.0.0.1:8510/CFC/service.cfc?method=getAllOrders')
>> .map(
>> (response:Response) => {
>> const data = response.json();
>> return data;
>> }
>> );
>> }
>>
>> ... and my component.ts code:
>> onGet() {
>> this.dataService.getAllOrders()
>> .subscribe(
>> (data: any[]) => console.log(data), //this.results.data
>> (error) => console.log(error)
>> );
>> }
>>
>
and here is the actual console.log(data) result:
1. (7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
1. 0:{ID: 1, ORDERNO: 160, CREW: 2, JOBNUMBER: 1702377, YARDS: 40, …}
2. 1:{ID: 2, ORDERNO: 44, CREW: 3, JOBNUMBER: 1702391, YARDS: 90, …}
3. 2:{ID: 3, ORDERNO: 19, CREW: 5, JOBNUMBER: 1702294, YARDS: 30, …}
4. 3:{ID: 4, ORDERNO: 66, CREW: 6, JOBNUMBER: 1702364, YARDS: 55, …}
5. 4:{ID: 5, ORDERNO: 69, CREW: 7, JOBNUMBER: 1702272, YARDS: 170, …}
6. 5:{ID: 6, ORDERNO: 102, CREW: 9, JOBNUMBER: 1702321, YARDS: 10, …}
7. 6:{ID: 7, ORDERNO: 36, CREW: 10, JOBNUMBER: 1702289, YARDS: 80, …}
8. length:7
9.
Thanks for your help,
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+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.
[AngularJS] Using values returned from HTTP service call
(I recently posted this question as part of another issue I was having and
wanted to break it out separately, will link back shortly)
I have a service call in Angular that returns the following JSON data
(results of a console.log()):
1. (7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
1. 0:{ID: 1, ORDERNO: 160, CREW: 2, JOBNUMBER: 1702377, YARDS: 40, …}
2. 1:{ID: 2, ORDERNO: 44, CREW: 3, JOBNUMBER: 1702391, YARDS: 90, …}
3. 2:{ID: 3, ORDERNO: 19, CREW: 5, JOBNUMBER: 1702294, YARDS: 30, …}
4. 3:{ID: 4, ORDERNO: 66, CREW: 6, JOBNUMBER: 1702364, YARDS: 55, …}
5. 4:{ID: 5, ORDERNO: 69, CREW: 7, JOBNUMBER: 1702272, YARDS: 170, …}
6. 5:{ID: 6, ORDERNO: 102, CREW: 9, JOBNUMBER: 1702321, YARDS: 10, …}
7. 6:{ID: 7, ORDERNO: 36, CREW: 10, JOBNUMBER: 1702289, YARDS: 80, …}
8. length:7
So you can see I'm obviously getting the data back - console.log() let's me
see it, but the issue is that when I attempt to display the values in my
.html template I simply get
[object Object],[object Object],[object Object],[object Object],[object
Object],[object Object],[object Object]
... just wondering what I have to do with my object to be able to use it in
my .html template?
>From my html:
Get Concrete
Orders
{{results}} //this is where I get the [object Object]
displayed on screen 7 times
{{result.id}}
{{result.crew}}
{{result.orderno}}
{{result.jobnumber}}
{{result.yards}}
{{result.delivery}}
And my service calling code:
getAllOrders(){
return this.http.get('
http://127.0.0.1:8510/CFC/service.cfc?method=getAllOrders')
.map(
(response:Response) => {
const data = response.json();
return data;
}
);
}
... and my component.ts code:
onGet() {
this.dataService.getAllOrders()
.subscribe(
(data: any[]) => this.results=data,
(error) => console.log(error)
);
}
Thanks so much for your help and patience,
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+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.
[AngularJS] Re: Loop over service call results?
UPDATE:
I modified the return format of my service call which now gives me the
following for the same call:
1. (7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
1. 0:{ID: 1, ORDERNO: 160, CREW: 2, JOBNUMBER: 1702377, YARDS: 40, …}
2. 1:{ID: 2, ORDERNO: 44, CREW: 3, JOBNUMBER: 1702391, YARDS: 90, …}
3. 2:{ID: 3, ORDERNO: 19, CREW: 5, JOBNUMBER: 1702294, YARDS: 30, …}
4. 3:{ID: 4, ORDERNO: 66, CREW: 6, JOBNUMBER: 1702364, YARDS: 55, …}
5. 4:{ID: 5, ORDERNO: 69, CREW: 7, JOBNUMBER: 1702272, YARDS: 170, …}
6. 5:{ID: 6, ORDERNO: 102, CREW: 9, JOBNUMBER: 1702321, YARDS: 10, …}
7. 6:{ID: 7, ORDERNO: 36, CREW: 10, JOBNUMBER: 1702289, YARDS: 80, …}
8. length:7
Which is much more familiar to me, so I'm sure I can make that work now.
The issue is, I can console.log() the results (above) but when I attempt to
display the values in my .html template I simply get
[object Object],[object Object],[object Object],[object Object],[object
Object],[object Object],[object Object]
... just wondering what I have to do in order to finally be able to get
access to display my values in my .html template?
Again, my html:
{{results}}
{{result.id}}
{{result.crew}}
{{result.orderno}}
{{result.jobnumber}}
{{result.yards}}
{{result.delivery}}
And my actual calling code:
getAllOrders(){
return
this.http.get('http://127.0.0.1:8510/CFC/service.cfc?method=getAllOrders')
.map(
(response:Response) => {
const data = response.json();
return data;
}
);
}
Thanks so much for your patience,
Rich
On Monday, December 18, 2017 at 3:28:05 PM UTC-7, Rich Leach wrote:
>
> Sander
>
> Thanks for your post, it was helpful and got me past this issue.
>
> Now I have my service call only retrieving the DATA part of the JSON
> object which helps.
>
> I'm using this code in my service call:
> getAllOrders(){
> return this.http.get('
> http://127.0.0.1:8510/CFC/service.cfc?method=getAllOrders')
> .map(
> (response:Response) => {
> const data = response.json().DATA;
> return data;
> }
> )
> ;
> }
>
> And it now returns:
>
>1. (7) [Array(6), Array(6), Array(6), Array(6), Array(6), Array(6),
>Array(6)]
> 1. 0:(6) [1, 160, 2, 1702377, 40, "Elm/Turrant Drive"]
> 2. 1:(6) [2, 44, 3, 1702391, 90, "2099 Steele Street"]
> 3. 2:(6) [3, 19, 5, 1702294, 30, "Mountain Medical - West Campus"]
> 4. 3:(6) [4, 66, 6, 1702364, 55, "Estes Regional Dev Center"]
> 5. 4:(6) [5, 69, 7, 1702272, 170, "Airport Blvd/South lot"]
> 6. 5:(6) [6, 102, 9, 1702321, 10, "Lakes/NE 44th"]
> 7. 6:(6) [7, 36, 10, 1702289, 80, "Boulder Tpk/Pecos"]
> 8. length:7
> 9. __proto__:Array(0)
>
>
> However in my .html template I can only reference the results as a single
> blob of data; when I loop over it I get blank values back.
>
> How do I loop over these results from my service call? In my .html
> template I'm currently using the following but as I said it's all blanks
> that I'm getting back:
>
>
>
> {{result.id}}
> {{result.crew}}
> {{result.orderno}}
> {{result.jobnumber}}
> {{result.yards}}
> {{result.delivery}}
>
>
>
> If I simply use {{results}} I get everything, but I need to loop over and
> display each row from the query in the JSON object.
>
> Again thank you for your help, very appreciated!
>
> Rich
>
>
>
>
> On Sunday, December 17, 2017 at 11:21:23 PM UTC-7, Sander Elias wrote:
>>
>> Why don't you just loop over the `DATA` out of your result?
>> or, if you don't care of the rest, use a map operator to narrow the
>> result down like:
>>
>> httpClient.get('someUrl').pipe(map(resultJson => resultJson.DATA))
>>
>> Regards
>> Sander
>>
>
--
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.
[AngularJS] Re: Loop over service call results?
Sander
Thanks for your post, it was helpful and got me past this issue.
Now I have my service call only retrieving the DATA part of the JSON object
which helps.
I'm using this code in my service call:
getAllOrders(){
return
this.http.get('http://127.0.0.1:8510/CFC/service.cfc?method=getAllOrders')
.map(
(response:Response) => {
const data = response.json().DATA;
return data;
}
)
;
}
And it now returns:
1. (7) [Array(6), Array(6), Array(6), Array(6), Array(6), Array(6),
Array(6)]
1. 0:(6) [1, 160, 2, 1702377, 40, "Elm/Turrant Drive"]
2. 1:(6) [2, 44, 3, 1702391, 90, "2099 Steele Street"]
3. 2:(6) [3, 19, 5, 1702294, 30, "Mountain Medical - West Campus"]
4. 3:(6) [4, 66, 6, 1702364, 55, "Estes Regional Dev Center"]
5. 4:(6) [5, 69, 7, 1702272, 170, "Airport Blvd/South lot"]
6. 5:(6) [6, 102, 9, 1702321, 10, "Lakes/NE 44th"]
7. 6:(6) [7, 36, 10, 1702289, 80, "Boulder Tpk/Pecos"]
8. length:7
9. __proto__:Array(0)
However in my .html template I can only reference the results as a single
blob of data; when I loop over it I get blank values back.
How do I loop over these results from my service call? In my .html template
I'm currently using the following but as I said it's all blanks that I'm
getting back:
{{result.id}}
{{result.crew}}
{{result.orderno}}
{{result.jobnumber}}
{{result.yards}}
{{result.delivery}}
If I simply use {{results}} I get everything, but I need to loop over and
display each row from the query in the JSON object.
Again thank you for your help, very appreciated!
Rich
On Sunday, December 17, 2017 at 11:21:23 PM UTC-7, Sander Elias wrote:
>
> Why don't you just loop over the `DATA` out of your result?
> or, if you don't care of the rest, use a map operator to narrow the result
> down like:
>
> httpClient.get('someUrl').pipe(map(resultJson => resultJson.DATA))
>
> Regards
> Sander
>
--
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.
[AngularJS] Loop over service call results?
I have a small test app running locally where I setup a simple REST service
that executes a query and returns the results as JSON.
I verified independently that the data returned is, in fact valid JSON.
What I need to do is loop through the JSON to display the results in my
.html template. If I console.log() the results I see my JSON, but I don't
know how exactly I prepare my results from my .ts file and get them
displayed in my .html file. Here are the console.log() results:
1. {COLUMNS: Array(6), DATA: Array(7)}
1. COLUMNS:Array(6)
1. 0:"ID"
2. 1:"ORDERNO"
3. 2:"CREW"
4. 3:"JOBNUMBER"
5. 4:"YARDS"
6. 5:"DELIVERY"
7. length:6
8. __proto__:Array(0)
2. DATA:Array(7)
1. 0:(6) [1, 160, 2, 1702377, 40, "Elm/Turrant Drive"]
2. 1:(6) [2, 44, 3, 1702391, 90, "2099 Steele Street"]
3. 2:(6) [3, 19, 5, 1702294, 30, "Mountain Medical - West Campus"]
4. 3:(6) [4, 66, 6, 1702364, 55, "Estes Regional Dev Center"]
5. 4:(6) [5, 69, 7, 1702272, 170, "Airport Blvd/South lot"]
6. 5:(6) [6, 102, 9, 1702321, 10, "Lakes/NE 44th"]
7. 6:(6) [7, 36, 10, 1702289, 80, "Boulder Tpk/Pecos"]
8. length:7
9. __proto__:Array(0)
3. __proto__:Object
I was looking at some docs on angular.io which talked about creating an
interface, but I've looped over arrays before (that were hard coded, NOT
returned from a http call). This doesn't seem correct but I may be
wrong
Is there a "best practices" way of doing this sort of thing?
Many thanks,
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+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.
[AngularJS] Re: *ngFor throwing error
Thanks for your note Sander.
... but I thought I was already doing that in my subscribe method? If not
here where would you suggest? Also I have complete control over formatting
the service call response so I can format the text any way necessary if you
think it would be easier to solve this on the service end
Here it is:
onGet() {
this.dataService.getAllOrders()
.subscribe(
(data: any[]) => this.results=data, (for testing, on this line I used
(I thought the "data: any[] " code tells Angular that data is typed to
expect any array)
(error) => console.log(error)
);
}
On Saturday, December 16, 2017 at 5:52:20 AM UTC-7, Sander Elias wrote:
>
> Hi Rich,
>
> I think that the data you get from your service is a string. Perhaps you
> should JSON.parse it before trying to use ngFor on it.
>
> Regards
> Sander
>
--
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.
[AngularJS] *ngFor throwing error
I'm returning an array object from a http service call (successfully) and
can console.log() the result without incident. However when I try looping
through the array in my .html I get an error message.
In my .html template I'm trying to use the following code to display the
results:
{{result.id}}
{{result.crew}}
{{result.orderno}}
{{result.jobnumber}}
{{result.yards}}
{{result.delivery}}
When I attempt to loop through the array (results) in my .html template I
get the following error:
ERROR Error: Cannot find a differ supporting object '[{ID: '1', ORDERNO:
'160', CREW: '2', JOBNUMBER: '1702377', YARDS: '40', DELIVERY: 'Elm/Turrant
Drive'},{ID: '2', ORDERNO: '44', CREW: '3', JOBNUMBER: '1702391', YARDS:
'90', DELIVERY: '2099 Steele Street'}]
It seems like Angular doesn't recognize the data from my service call as an
array, because I can copy the service call results from the console and
paste this exact array into my ..component.ts file, and Angular runs just
fine.
Service call code, outputs to console just fine, gives me ERROR above:
app.component.ts
...
onGet() {
this.dataService.getAllOrders()
.subscribe(
(data: any[]) => this.results=data, (for testing, on this line I used
((data: any[] => console.log(data),)
(error) => console.log(error)
);
}
same app.component.ts file where I hardcoded the service call results to a
variable. Outputs in .html template fine.
concreteorders = [
{orderno: '160', crew: '2', jobno: '1702377', yards: '40', delivery:
'Elm/Turant Streets'},
{orderno: '44', crew: '3', jobno: '1702391', yards: '90', delivery:
'2099 Steele Street'},
{orderno: '19', crew: '5', jobno: '1702294', yards: '30', delivery:
'Mountain Medical - East Campus'},
{orderno: '66', crew: '6', jobno: '1702364', yards: '55', delivery:
'Estes Regional Development Center'},
{orderno: '69', crew: '7', jobno: '1702272', yards: '170', delivery:
'Airport Blvd/Terrance lot'},
{orderno: '102', crew: '9', jobno: '1702321', yards: '10', delivery:
'Lakes/SE 40th'},
{orderno: '36', crew: '10', jobno: '1702289', yards: '80', delivery:
'Boulder TpkPecos Blvd'}
];
So I don't think it's value returned from the service call as I copied and
pasted it exactly and it worked!
After some Google searches I found this:
https://github.com/angular/angular/issues/6392
and while it seems the verbiage of the reporting error message has been
updated there doesn't seem to be a fix that anyone can point to I tried
the hack() and a few other things mentioned but couldn't get anything to
finally work.
Am I missing a new way to loop through an array returned from a http
service call?
Many thanks,
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+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.
[AngularJS] Routing error
I'm getting the following error when configuring a new route:
ERROR Error: Uncaught (in promise): EmptyError: no elements in sequence
EmptyError: no elements in sequence
I think this is a pretty simple task, here's what I did:
in my app-routing.module.ts I import the component and then set the path in
my Routes array:
import { ConcreteorderComponent } from
'./concreteorder/concreteorder.component';
{ path: 'concreteorder', component: ConcreteorderComponent }
(the component is there, I double checked)
and in my app.module.ts I also did an import and set the path in my Routes
array (exactly like above). I also added it to my declarations section. I
made sure to import "import { RouterModule, Routes } from
'@angular/router';" and the component is also being imported as well. In my
Routes array I'm also setting 2 other paths:
{ path: 'home', component: HomeComponent },
{ path: '', component: HomeComponent },
which are being returned as expected.
What am i missing?
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+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.
[AngularJS] Standard navigation convention(s) for Angular?
Hi After getting my routing code to work I realized that I wasn't seeing any docs about Navigation, or specifically anything Angular regarding automated menu development Some sites I've built in the past have had rather detailed and complex menus based on permissions, content, current URL, etc Are there any Angular conventions that the community uses to build out advanced navigation? Or is the solution to simply use manual Javascript calls to render what I need? 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+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.
[AngularJS] Re: Site template setup question
Thank you Sander, I appreciate your feedback. Regards, Rich On Monday, November 13, 2017 at 10:29:17 PM UTC-7, Sander Elias wrote: > > Hi Rich, > > The way to do that now is to use components for each part. Each component > can have its own template file, with it will pull in during dev. > If you mean by files, separate HTML files you can load dynamically into > your running app, the current answer is almost no. (There are a few things > you can, but shouldn't be doing) > > Please take notice of the word current! Angular Elements are in the > pipeline and will make this possible again. There are some caveats, but not > ones that you can't work around. > > Regards > Sander > -- 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.
[AngularJS] Site template setup question
I'm building a small Angular site, I have a design with a header, content area and footer. The header and footer remain static for now, and the content area will display the contents for the selected page. I configured routing, but my question is, does the Angular community do anything with including files? For example in the past, if I had a web template configuration for a typical web site it would look like: mainTemplate file: include headerFile serveContentFile include footerFile The mainTemplate file would have the main design of the site and simply include the headerFile and footerFile. The serveContentFile would be specific to the requested page, but the headers and footers were often the same content for most of the site so they would simply get included for ease of reuse. Is there a convention in place by the Angular community like this, or something that mimics this kind of effort? Thank you 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+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.
[AngularJS] Re: template vs. reactive Angular forms
Thank you all for your insight, I appreciate your help. Rich On Friday, November 10, 2017 at 4:12:02 AM UTC-7, Zlatko Đurić wrote: > > Hi Rich, > > In addition to what Sander has said, I'll add one more vote for > template-driven forms. I often have to style the forms specifically, and > reasoning about that is, to me, much easier when I can see what I'm styling > - but that heavily depends on what kind of an app you're working on. I > never ran into a serious issue with template forms nor reactive, but when > it's debug time with subtle issues, reactive forms demand more of my poor > brain, so I prefer the the declarative way that, well, declares clearly > what it does. > > > -- 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.
[AngularJS] template vs. reactive Angular forms
When deciding to use template vs. reactive forms in Angular, is one more popular than the other? I believe I understand how reactive might be able to be more tightly bound to the domain model but is it worth the extra code in doing so? Thx in advance for the input, 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+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.
Re: [AngularJS] Re: n00b question: concatenating string using 2 way binding
So clearly there's something in the way I'm trying to display my code
that's not working, as I've tried displaying the data {{data.companyName}}
simply didn't work for me, I'll review that and find the err of my ways
Results
{{ data.companyName }}
{{ data | json }}
I can see I have some homework to do with pipes especially, as this would
have been handy to use in my debugging ( your line of code: ... {{ data |
json }}... ). For memorialization purposes the Angular docs even suggest
using JSON pipe for debugging purposes:
https://angular.io/guide/pipes
The JsonPipe <https://angular.io/api/common/JsonPipe> provides an easy way
to diagnosis a mysteriously failing data binding or inspect an object for
future binding.
I'm going to go ahead and consider this thread closed, even though I still
have to finalize exactly how I'll get my quote displayed and output into my
UI.
Thanks again for all of your help, you're making the learning process much
more effective.
Rich
On Wednesday, November 8, 2017 at 1:22:43 AM UTC-7, Zlatko Đurić wrote:
>
>
>
> On Wednesday, November 8, 2017 at 2:07:43 AM UTC+1, Rich Leach wrote:
>>
>> 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
>>
>>
>> QUOTE RETURNED: {{data[0].companyName}}
>>
>>
>> ... no dice. Any ideas?
>>
>>>
>>>>
> Well, your code is probably buggy. Here, the "quote getter" works just
> fine:
>
> https://stackblitz.com/edit/quote-getter?file=app%2Fapp.component.html
>
> Take a look and see what you did differently.
>
>
--
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.
Re: [AngularJS] Re: n00b question: concatenating string using 2 way binding
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
QUOTE RETURNED: {{data[0].companyName}}
... 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" <ri...@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:
>>
>> QUOTE RETURNED: {{ data.companyname }}
>>
>>
>> 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;
>>> }
>>> );
>>> }
Re: [AngularJS] Re: n00b question: concatenating string using 2 way binding
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:
QUOTE RETURNED: {{ data.companyname }}
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=D=1=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
>>>
>>> Get Stock
>>>
>>>
>>>
>>>
>>>
>>> .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=D=1=AFQjCNFAqHQw6Lci0kqPQ-ab52hw6oGK7Q>
>>> ';
>>> tickersymbolback:string = '{{tickersymbol}}'&&'/quote';
>>> apicall={{tickersymbolfront}}+{{tickersymbolback}};
>>>
>>> ...
>>>
>>> onGetStock(apicall) {
>>> this.serverService.getStock()
>>> .subscribe(
>>> (data: any[]) => console.log(data),
>>> (error) => console.log(error)
&g
[AngularJS] Re: n00b question: concatenating string using 2 way binding
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
Get Stock
.TS
...
export class AppComponent {
tickersymbolfront:string = 'https://api.iextrading.com/1.0/stock/';
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
>
>
> https://api.iextrading.com/1.0/stock/{{tickersymbol}}/quote
>
>
> ...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+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.
[AngularJS] n00b question: concatenating string using 2 way binding
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
https://api.iextrading.com/1.0/stock/{{tickersymbol}}/quote
...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+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.
[AngularJS] Re: Values returned by service display fine in console, cause error on screen
Thanks so much Zlatko, this was very helpful. Your suggestion regarding the
AsyncPipe was also incredibly helpful.
Rich
On Wednesday, October 25, 2017 at 8:35:27 AM UTC-6, Zlatko Đurić wrote:
>
> Well, two things. For one, the way you define your property, *stock*,
> it's undefined when the thing is initialized. So, before the *dataService*
> gets
> the data back, it's undefined in the template, so yuou have
> *undefined.symbol* - so that's what fails.
>
> You can any of these:
>
> [...snip...]
> template: `Closing price for {{ stock?.symbol }} is {{ stock ?
> stock.close : '0' }}, while the opening was {{ stock && stock.opening || ''
> }} and high {{ stock.high }}`
> [...snip...]
>
> To solve your problem, pick any example. To learn how to solve the problem
> in the future, try to explain what each of these does.
>
> For some values (not this one though), you can also use *`{{ obj | async
> }}` * - it's called AsyncPipe in Angular, read up on it.
>
> 2 more things:
> - you fetch stuff in your constructor. That's not a good pattern, some
> things may not work as expected. Instead, do all of this init logic by
> implementing OnInit interface. It's pretty simple actually:
> import { Component, OnInit} from '@angular/core'
> @Component({
> selector:'my-cmp',
> template: 'Hi there',
> })
> export class MyCmp implements OnInit {
> constructor(private dataService: DataService) {}// in constructor,
> you basically only inject all the dependencies.
>
> ngOnInit() {
> // This runs when the component is fully initialized. You can do all
> the logic-related stuff here. If you also want to access view (template),
> implement AfterViewInit instead.
> this.dataService.getStocks().subscribe(stock => this.stock = stock);
> }
>
>
> Another tiny issue is that you declared *stock* as an array, not a single
> object.
>
> class MyComponent {
> obj: any; // that's an object. And it's undefined.
> obj2: any = {};// that's also an object, initialized to {};
> obj3: any[]; // that's an array. But if you test
> this.obj3.length, it's gonna break because your array is empty.
> obj4: any[] = []; // also an array, but it's initialized when the
> object gets created. It's set to [] (empty array)
> ...
> }
>
> Hope this helps.
>
>
--
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.
[AngularJS] Re: Error while displaying service call results
Thanks so much Sander, this was very helpful.
Regards,
Rich
On Thursday, October 26, 2017 at 11:33:29 PM UTC-6, Sander Elias wrote:
>
> Hi Rich,
>
> First of all, your typing is off. At least the type any[] does not relate
> to your template where you are using an Object.
> Also, subscribing in the service as you are doing it, is not needed.
> Let me show you some of my example code:
>
> @Component({
> selector: 'app-movie',
> template: `
> Movie Component
>
> Previous
>
>
> ({{movie.id}}) {{movie.title }}
>
>
>
> No Movie
>
>
> Next
> Home
> `,
> providers: [ FilmService ],
> styleUrls: ['./movie.component.css']
> })
> export class MovieComponent implements OnInit {
> private currentId: number;
> public currentMovie: Observable;
> private routerEventsSubscription: Subscription;
>
> constructor(
> private filmService: FilmService,
> private route: ActivatedRoute,
> private router: Router
> ) {}
>
> ngOnInit(): void {
> // Get new movie whenever the URL's id changes
> this.currentMovie = this.route.paramMap
> .switchMap(params => {
> const id = +params.get('id');
> return this.filmService.getFilm(id)
> .do(movie => this.currentId = movie.id)
> });
> }
>
> nextMovie() {
> this.currentId = this.currentId ? this.currentId + 1 : 1;
> this.router.navigate([`/movie/${this.currentId}`]);
> }
>
> previousMovie() {
> this.currentId = this.currentId ? this.currentId - 1 : 1;
> this.router.navigate([`/movie/${this.currentId}`]);
> }
> }
>
>
> This sample does a some more as what you are asking about, but it shows
> you how to avoid subscribing in your component, and how to prevent
> the error you are having. the ngIf prevents the content from rendering
> until there is actually a movie loaded from the service. It even shows you
> how to use the else, to show a loading/not found message to the user.
>
> If you have any more questions, just ask!
>
> Regards
> Sander
>
--
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.
[AngularJS] Error while displaying service call results
... just learning Angular, trying to learn the code and not piss off the
community at the same time
I have a data service component that is successfully returning a stock
quote. With the code below I can output the results to console.log() with
no issues (no errors in the console) but when I try to post onscreen I'm
getting an error message in the console but not onscreen (ERROR TypeError:
Can not read property 'symbol' of undefined) even though the data is still
present, visible and correct. What I want displayed onscreen is actually
correctly displayed onscreen, just with this error in the console.
*STOCKS.COMPONENT.TS:*
*import { Component } from '@angular/core';*
*import { DataService } from '../../services/data.service';*
*@Component({*
* selector: 'app-stocks',*
* template: `Hello from Stocks Component*
* Todays closing price for {{ stock.symbol }} is {{stock.close}}. `*
*})*
*export class StocksComponent {*
* stock:any[];*
* constructor(public dataService:DataService)*
* {*
*this.dataService.getStocks().subscribe(stock => {*
* //console.log(stock);*
* this.stock = stock;*
*});*
* }*
*}*
... so obviously the issue is with my template code and how I'm referring
to the specific value(s) in the stock array. Can anyone set me straight on
the correct syntax to display results onscreen without getting the console
error?
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+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.
[AngularJS] Values returned by service display fine in console, cause error on screen
... just learning Angular, trying to learn the code and not piss off the
community at the same time
I have a data service component that is successfully returning a stock
quote. With the code below I can output the results to console.log() with
no issues (no errors in the console) but when I try to post onscreen I'm
getting an error message in the console but not onscreen (ERROR TypeError:
Can not read property 'symbol' of undefined) even though the data is still
present, visible and correct. What I want displayed onscreen is actually
correctly displayed onscreen, just with this error in the console.
*STOCKS.COMPONENT.TS:*
*import { Component } from '@angular/core';*
*import { DataService } from '../../services/data.service';*
*@Component({*
* selector: 'app-stocks',*
* template: `Hello from Stocks Component*
* Todays closing price for {{ stock.symbol }} is {{stock.close}}. `*
*})*
*export class StocksComponent {*
* stock:any[];*
* constructor(public dataService:DataService)*
* {*
*this.dataService.getStocks().subscribe(stock => {*
* //console.log(stock);*
* this.stock = stock;*
*});*
* }*
*}*
... so obviously the issue is with my template code and how I'm referring
to the specific value(s) in the stock array. Can anyone set me straight on
the correct syntax to display array results onscreen without getting the
console error?
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+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.
