2016-11-08 41 views
0

我想从服务器ionic 2中显示以下数据。 和访问对象使用*ngFor如何使用* ngFor和访问键显示json对象,对象的值

我想显示此对象动态使用*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

听起来像http://stackoverflow.com/questions/38554562/how-can-i-use-ngfor-to-iterate-over-typescript-enum-as-an-array-of-strings/ 38554580#38554580 –

回答

2

打印Admiranda阵列*ngfor循环,先写一个

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 ,比你可以用这个p ipe是这样的。

<ul *ngFor="let item of items"> 
    <li *ngFor="let value of item | objectValues"> 
    {{ value }} 
    </li> 
</ul> 
+0

谢谢你的回复,但是更多的细节我怎么能在离子2中使用管道? – mahmoudismail

+0

离子2下引擎盖使用角2,这个管我认为你可以使用角2管。只需将您的管道包含在app.module.ts文件中,并且您可以在项目管道符号中的任意位置使用该管道。我没有关于离子的想法,但我确实有关于角度2. –

+0

当我的模板中使用此管道有任何建议时,我有一个错误'未捕获的错误:模板解析错误'? – mahmoudismail