我想在ionic 2中显示来自服务器的以下数据。
并使用*ngFor访问对象的键和值。
我希望使用*ngFor动态显示此对象。怎么弄明白？
此问题是否有更简单的解决方案，因为我觉得使用Angular2的开发人员显示此类json数据会非常常见。
{
"status": "success",
"products": {
"Admiranda": [
{
"entity_id": "448",
"sku": "587",
"name": "# Adm Ape Maia EDT 50 ml 75009 (9)",
"image_url": "/path/media/catalog/product/cache/5/8/587.png",
"url_key": "/path/adm-ape-maia-edt-50-ml-75009-9",
"price": "15,000",
"symbol": "LBP ",
"qty": 0,
"rating": 0,
"wishlist": false,
"specialprice": "7,500",
"brand": "Admiranda"
},
{
"entity_id": "435",
"sku": "571",
"name": "# Adm Aveng Liquid Soap 300ml 73680(3)",
"image_url": "/path/media/catalog/product/cache/5/7/571.png",
"url_key": "/path/adm-aveng-liquid-soap-300ml-73680-3",
"price": "5,000",
"symbol": "LBP ",
"qty": 0,
"rating": 0,
"wishlist": false,
"specialprice": "2,500",
"brand": "Admiranda"
}
],
"Weider": [
{
"entity_id": "306",
"sku": "386",
"name": "32 % Whey Wafer bar choco 35 g",
"image_url": "/path/media/catalog/product/cache/3/2/32_whey_wafer.png",
"url_key": "/path/32-whey-wafer-bar-choco-35-g",
"price": "5,910",
"symbol": "LBP ",
"qty": 0,
"rating": 0,
"wishlist": false,
"specialprice": "3,842",
"brand": "Weider"
},
{
"entity_id": "337",
"sku": "650",
"name": "52% Protein Bar Cherry-Yog 50g",
"image_url": "/path/media/catalog/product/cache/5/2/52_protein_2.png",
"url_key": "/path/52-protein-bar-cherry-yog-50g",
"price": "6,819",
"symbol": "LBP ",
"qty": 0,
"rating": 0,
"wishlist": false,
"specialprice": "4,432",
"brand": "Weider"
}
],
"Yoomi": [
{
"entity_id": "303",
"sku": "638",
"name": "5oz feeding bottle+slow flow teat (2 of)",
"image_url": "/path/media/catalog/product/cache/6/3/638.png",
"url_key": "/path/5oz-feeding-bottle-slow-flow-teat-2-of",
"price": "30,909",
"symbol": "LBP ",
"qty": 0,
"rating": 0,
"wishlist": false,
"specialprice": "21,636",
"brand": "Yoomi"
}
],
"Cosmetic products": [
{
"entity_id": "519",
"sku": "736",
"name": "Bebble Body cream",
"image_url": "/path/media/catalog/product/cache/b/e/bebble_body_cream_175_ml.736_1.png",
"url_key": "/path/bebble-body-cream",
"price": "20,909",
"symbol": "LBP ",
"qty": 0,
"rating": 0,
"wishlist": false,
"specialprice": "10,455",
"brand": "Cosmetic products"
},
{
"entity_id": "517",
"sku": "734",
"name": "Bebble Body milk",
"image_url": "/path/media/catalog/product/cache/b/e/bebble_body_milk_200_ml.734.png",
"url_key": "/path/bebble-body-milk",
"price": "18,182",
"symbol": "LBP ",
"qty": 0,
"rating": 0,
"wishlist": false,
"specialprice": "9,091",
"brand": "Cosmetic products"
}
],
"Dialfa": [
{
"entity_id": "483",
"sku": "184",
"name": "Dialfa HK LipStick Amber 1955 (3)",
"image_url": "/path/media/catalog/product/cache/4/_/4_1.png",
"url_key": "/path/dialfa-hk-lipstick-amber-1955-3",
"price": "4,500",
"symbol": "LBP ",
"qty": 0,
"rating": 0,
"wishlist": false,
"specialprice": "2,250",
"brand": "Dialfa"
},
{
"entity_id": "495",
"sku": "323",
"name": "Dlf Lip Balm Cindrella 0859 (3)",
"image_url": "/path/media/catalog/product/cache/1/2/12.png",
"url_key": "/path/dlf-lip-balm-cindrella-0859-3",
"price": "4,500",
"symbol": "LBP ",
"qty": 0,
"rating": 0,
"wishlist": false,
"specialprice": "2,250",
"brand": "Dialfa"
},
{
"entity_id": "503",
"sku": "368",
"name": "DLF Baby Kitty Sham&Dush250ml0552(8)",
"image_url": "/path/media/catalog/product/cache/h/k/hk_368.png",
"url_key": "/path/dlf-baby-kitty-sham-dush250ml0552-8",
"price": "6,000",
"symbol": "LBP ",
"qty": 0,
"rating": 0,
"wishlist": false,
"specialprice": "3,000",
"brand": "Dialfa"
},
{
"entity_id": "506",
"sku": "397",
"name": "DLF Bagno Guanto Sponge WTP 0044 (5)",
"image_url": "/path/media/catalog/product/cache/3/9/397.png",
"url_key": "/path/dlf-bagno-guanto-sponge-wtp-0044-5",
"price": "8,000",
"symbol": "LBP ",
"qty": 0,
"rating": 0,
"wishlist": false,
"specialprice": "4,000",
"brand": "Dialfa"
}
],
"Nevella": [
{
"entity_id": "277",
"sku": "118",
"name": "Nevella Probiotics 100 Tabs",
"image_url": "/path/media/catalog/product/cache/n/e/nevella2.png",
"url_key": "/path/nevella-probiotics-100-tabs",
"price": "5,139",
"symbol": "LBP ",
"qty": 0,
"rating": 0,
"wishlist": false,
"specialprice": "4,111",
"brand": "Nevella"
},
{
"entity_id": "280",
"sku": "159",
"name": "Nevella Probiotics 2,000 Sachets",
"image_url": "/path/media/catalog/product/cache/u/n/untitled_1.png",
"url_key": "/path/nevella-probiotics-2-000-sachets",
"price": "103,637",
"symbol": "LBP ",
"qty": 0,
"rating": 0,
"wishlist": false,
"specialprice": "103,637",
"brand": "Nevella"
}
],
"Medi Baby": [
{
"entity_id": "549",
"sku": "778",
"name": "Wet Wipes Medi Baby 100 pcs",
"image_url": "/path/media/catalog/product/cache/7/7/778.png",
"url_key": "/path/wet-wipes-medi-baby-100-pcs",
"price": "3,500",
"symbol": "LBP ",
"qty": 0,
"rating": 0,
"wishlist": false,
"specialprice": "2,625",
"brand": "Medi Baby"
}
]
}
}
答案 0 :(得分：2)
在*ngfor循环中打印 Admiranda 数组，首先写一个管道
<强> Pipe.ts
@Pipe({
name: 'objectValues'
})
export class ObjectValuesPipe implements PipeTransform {
transform(obj: any) {
let result = [];
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
result.push(obj[key]);
}
}
return result;
}
}
不要忘记在@NgModule中导入管道，而不是像这样使用此管道。
<ul *ngFor="let item of items">
<li *ngFor="let value of item | objectValues">
{{ value }}
</li>
</ul>
答案 1 :(得分：0)
您可以将keyvalue管道用于json。
看看下面的例子：
<select>
<option *ngFor="let item of json | keyvalue" value="{{ item.key }}">
{{ item.value }}
</option>
</select>