[AngularJS] Loop over service call results?

[Rich Leach]

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

[Sander Elias]

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

[Rich Leach]

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:

<div *ngIf="results">
<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>

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

Post by Sander Elias
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
httpClient.get('someUrl').pipe(map(resultJson => resultJson.DATA))
Regards
Sander

[Rich Leach]

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:
<div *ngIf="results">{{results}}
<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 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

Post by Sander Elias
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.
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;
}
)
;
}
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
<div *ngIf="results">
<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>
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

Post by Sander Elias
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
httpClient.get('someUrl').pipe(map(resultJson => resultJson.DATA))
Regards
Sander