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 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:
>>>>>>> <button class="btn btn-primary" (click)="onGet()">Get Concrete
>>>>>>> Orders</button>
>>>>>>>
>>>>>>> <div *ngIf="results">{{results}} //this is where I get the [object
>>>>>>> Object] displayed on screen 7 times
>>>>>>>
>>>>>>> <div *ngFor="let result of results" style="border: thin solid
>>>>>>> silver;">
>>>>>>> {{result.id}}<br>
>>>>>>> {{result.crew}}<br>
>>>>>>> {{result.orderno}}<br>
>>>>>>> {{result.jobnumber}}<br>
>>>>>>> {{result.yards}}<br>
>>>>>>> {{result.delivery}}
>>>>>>> </div>
>>>>>>> </div>
>>>>>>>
>>>>>>> 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 [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.
