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:
> '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&sa=D&sntz=1&usg=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&sa=D&sntz=1&usg=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 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 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.
