Bind dropdown value to same item nested array property value in angular?

Question

I have a JSON array of similar items , example of one item is as follow :

{
  "ownerID": "rkjgAs40NEuSJfp4jquNYQ",
  "defaultPriceScheduleID": null,
  "autoForward": false,
  "id": "44685751902",
  "name": "1864 End Leaf B18",
  "description": "1864 End Leaf B18",
  "quantityMultiplier": 1,
  "shipWeight": null,
  "shipHeight": null,
  "shipWidth": null,
  "shipLength": null,
  "active": true,
  "specCount": 26,
  "variantCount": 0,
  "shipFromAddressID": null,
  "inventory": null,
  "defaultSupplierID": null,
  "xp": {
    "SAP-Description": "1864 End Leaf B18",
    "Status": "Active",
    "Brand-Name": "!",
    "Product-Group": "Y6Z-vee5WUytwna-WsSxfw",
    "UPC-Each": "44685751902",
    "productAttributesComplete": true,
    "ImageURLs": [
      null,
      null,
      null,
      null,
      null,
      null
    ],
    "Ecommerce": {
      
    }
  }
}

I have a one dropdown in angular in which I want to bind the name to 'name' and value to 'product-group' but it says xp.product-group is undefined .

this is the code I am using to get the product list in ts file

getProductList(){
    this.service.getProductList().subscribe(data=>{
      this.ProductList=data;
      console.log(this.ProductList[0].xp['Product-Group']);
    });
  }

and here is dropdown html

<div class="form-group">
    <label for="pname">Product Name</label>
<select  (change)="onPOptionsSelected(mySelect.value)" #mySelect >  
    <option *ngFor="let prod of ProductList" [value]="prod.xp['Product-Group']"   class="form-control" id="pname"   >{{prod.name}} </option>  
</select>  
</div>

can you share working example (stackblitz) of this code? This code is working fine — zainhassan
– zainhassan, Commented May 31, 2021 at 4:36
index 77 objects having the XP value as null, that root cause of that issue — a.prakash
– a.prakash, Commented May 31, 2021 at 5:12

zainhassan · Accepted Answer · 2021-05-31 04:53:51Z

1

Use [value]="prod.xp && prod.xp['Product-Group']" in dropdown html in case prod.xp is null or undefined.

answered May 31, 2021 at 4:53

zainhassan

1,7929 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jaypal Sodha · Accepted Answer · 2021-05-31 04:34:29Z

0

can you please try prod.xp.product-Group to access the value of current item you want to access.

answered May 31, 2021 at 4:34

Jaypal Sodha

2,8682 gold badges13 silver badges23 bronze badges

4 Comments

Jaypal Sodha Over a year ago

Please share your entire json object, I will share the working code from stackbliz.

rahularyansharma Over a year ago

[{"ownerID":"rkjgAs40NEuSJfp4jquNYQ","defaultPriceScheduleID":null,"autoForward":false,"id":"44685751902","name":"1864 End Leaf B18","description":"1864 End Leaf B18","quantityMultiplier":1,"shipWeight":null,"shipHeight":null,"shipWidth":null,"shipLength":null,"active":true,"specCount":26,"variantCount":0,"shipFromAddressID":null,"inventory":null,"defaultSupplierID":null,"xp":{"SAP-Description":"1864 End Leaf B18","Status":"Active","Brand-Name":"!","Product-Group":"Y6Z-vee5WUytwna-WsSxfw","UPC-Each":"44685751902","productAttributesComplete":true,"Ecommerce":{}}}]

rahularyansharma Over a year ago

jsonblob.com/91377fb6-c1ca-11eb-9e6f-990fea2cd2a5

Jaypal Sodha Over a year ago

Please have a look at this example stackblitz.com/edit/…

Collectives™ on Stack Overflow

Bind dropdown value to same item nested array property value in angular?

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related