I am using Angular2, all working good, but am unable to printout multidimensional arrays, here is the code:
class AppComponent {
items:Array<Object>;
constructor(http: Http) {
http.get('data.json')
.map(res => res.json())
.subscribe(data => this.items = data);
}
}
[{
"id": "1",
"v2": "L'Oréal Paris",
"v4": "Serum Absolute Advanced Age-Reversing Makeup"
}]
<div *ng-for="#item of items">
{{item.v2}} {{item.v4}}
</div>
[{
"4940": {
"id": "4940",
"v2": "Pantene Pro-V",
"v4": "Cleansing Conditioner"
},
"4941": {
"id": "4941",
"v2": "Pantene Pro-V",
"v4": "Conditioner"
},
"4942": {
"id": "4942",
"v2": "Pantene Pro-V",
"v4": "2in1 Shampoo and Conditioner"
}]
<div *ng-for="#item of items">
<div *ng-for="#itemone of item">
{{itemone.v2}} {{itemone.v4}}
</div>
</div>
+++++++++++++++++++++++++++++++++++++++++++++++++
I've found a solution, you need to convert object to array before loop:
<div *ng-for="#item of items">
<div *ng-for="#itemone of item | objToArr">
{{itemone.v2}} {{itemone.v4}}
</div>
</div>
And here is the Pipe:
import { Pipe } from 'angular2/angular2';
@Pipe({
name: 'objToArr',
pure: false
})
export class ObjToArr {
transform(object:any) {
var newArray = []
for (var key in object) {
newArray.push(object[key]);
}
return newArray;
}
}
As per the update in question, you need to convert object to array before looping over it:
<div *ng-for="#item of items">
<div *ng-for="#itemone of item | objToArr">
{{itemone.v2}} {{itemone.v4}}
</div>
</div>
The pipe used is below:
import { Pipe } from 'angular2/angular2';
@Pipe({
name: 'objToArr',
pure: false
})
export class ObjToArr {
transform(object:any) {
var newArray = []
for (var key in object) {
newArray.push(object[key]);
}
return newArray;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.