JSON Object 从响应访问

Question

[
  {
    "productName": "saree",
    "productDescription": "bomkai saree",
    "productDiscountPrice": 12000,
    "imageUrl": "drdrfd",
    "productActualPrice": 12400,
    "productImages": [
      {
        "id": 10,
        "name": "Screenshot from 2022-09-05 18-27-38.png",
        "type": "image/png",
        "picByte": "3B0JoYZ1QGDSDBwyYAP0p4AgqrkuCDxrnc4dx3KCk4kHrj3rRbY3EgluN4exFo2KYC4pdyHuuog3KfVIPlDWvoS1uGO8T1nVByTumaZbzz/PYNA7DacA8zbANn4tGqDy2IQ563ZKYGxgkdA1DdNNjFlwzn6k+OO4Hjj27mAqXhcbyvg+SVoaYpDOGcyemBNINSGCd4UOLuvN5fjzXW08cNM95EULIhse4yDHWaFt+Rts6HHWXWgPrusOJ+YfGTI3/A4U7lzwWAyjoAAAAAElFTkSuQmCC"
      }
    ],
    "id": 22
  }
]

how i can Access picByte from angular UI,
i got response from the api with list of obect inside other object like i mentioned here,the productImages is a seperate list i need productImages.picByte value to set inside image tag to make a view,how can i do it? with a for loop or any thing? please help( https://i.stack.imgur.com/x0a6e.png )]( https://i.stack.imgur.com/Ib8vA.png ),i need to shoe these byte inside my image tag for display the images,

Answer 1

You should be able to easily just loop through the results in your html as so:

<div *ngFor="let data of myObject">
  <p>Id: {{data.id}}</p>
  <img
  *ngFor="let images of data.productImages"
  [src]="getImageSrc(images.picByte)"
  width="250px"
  height="250px"
/>
</div>

Where myObject is your apiResponse. getImageSrc is defined in the component code as:

getImageSrc(image: string) {
    return 'data:image/png;base64, ' + image;
  }