Ionic 4 Display a specific key value from JSON

Question

I am trying to display only a key value, in this case "_t1_product_price" from a JSON data array which looks as follows. I know that if I use ngFor keyPipe method in Angular6 it would just loop through all keys and values but that isn't what I am looking for to narrow down to a single object. Hoping someone could guide me out.

meta_data: Array(17)
0: {id: 37609, key: "inline_featured_image", value: "0"}
1: {id: 37610, key: "erp-wc-subscription", value: Array(0)}
2: {id: 37619, key: "_inventory_asset_account", value: ""}
3: {id: 37620, key: "_item_sales", value: "0"}
4: {id: 37621, key: "_sales_account", value: ""}
5: {id: 37622, key: "_tax_on_sales", value: "-1"}
6: {id: 37623, key: "_item_purchase", value: "0"}
7: {id: 37624, key: "_purchase_price", value: ""}
8: {id: 37625, key: "_purchase_account", value: ""}
9: {id: 37626, key: "_tax_on_purchase", value: "-1"}
10: {id: 37627, key: "_cost_price", value: ""}
11: {id: 37628, key: "_sales_description", value: ""}
12: {id: 37629, key: "_purchase_description", value: ""}
13: {id: 37630, key: "_woo_uom_input", value: ""}
14: {id: 37900, key: "_t1_product_price", value: "1"}
15: {id: 37901, key: "_t2_product_price", value: "2"}
16: {id: 37902, key: "_t3_product_price", value: "3"}

And also what can I use as TypeScript to display the view. Currently I am using this method which isn't what I am looking for. Thanks in advance.

<ion-item *ngFor="let item of product.meta_data">
              {{item.id}} - {{item.value}}
</ion-item>

do you mean you want to filter your object and returning only the key you want ? https://stackoverflow.com/questions/34164413/how-to-apply-filters-to-ngfor — Crocsx, Aug 14 '19 at 04:10
Do you want to extract only key and values from the objects?? If yes then you can use javascript array.map method. — Shrutika Patil, Aug 14 '19 at 06:47

score 0 · Answer 1 · answered Aug 14 '19 at 04:31

If i understand your question, you can filter the data at typescript level not at the template , You could use map function to get the single key value

    uniqueprice = metadata
            .map(function(product) {
    if(product.key == "_t1_product_price")
        {
          return product.key;
        }
         })
       console.log(uniqueprice);

score 0 · Answer 2 · answered Aug 14 '19 at 05:09

0

you can use the map array method to map the array to a array having a single object and then extract that object using indexing.

metadata.map(data => data.key === 'yourkeytext' && data)[0])

answered Aug 14 '19 at 05:09

iams0nus

481
3
8

score 0 · Answer 3 · answered Aug 14 '19 at 06:50

I think you can use a method to filter the object, which belongs to your key.

  <ion-item>
        {{ getObject(product.meta_data, key) .id}} - 
        {{getObject(product.meta_data,key).value}}
    </ion-item>

    private getObject(listOfObject, key)
    {
     return  listOfObject.filter(data=> data.key == key)
    }

Another way you can use pipe to get values from method, because this method may get call again and again which can make your application slow.

<ion-item>
              {{(item | MyPipe:key).id}} - {{(item | MyPipe:key).value}}
</ion-item>

export class MyPipe implements PipeTransform {    
        transform(value, key):any {  
               value.filter(data=> data.key == key)
        }
}

Ionic 4 Display a specific key value from JSON

3 Answers3