How to parse Json Object in Angular?

Question

I am working with some JSON and want to display the menu in angular only if the image is not null, example JSON is as follows, so if image is null don't show the component, any idea how to loop through this JSON in HTML, I am working on Angular.

Json:

users = [
 {
   user: [
     image: 'user1.png',
     data: {
        name: 'abc'     
        }
   ]
 }
{
   user: [
     image: null,
     data: {
        name: 'xyz'     
        }
   ]
 },
{
   user: [
     image: 'user1.png',
     data: {
        name: 'xyzz'     
        }
   ]
 }
]

Html

<div *ngFor="let user of users">
   // want to show this component only if there is image
   // want to do something like that
   // ngIF="user.image != null" then show but its not working
   <user-image [user]="user"></user-image>
</div>

*ngIf='user.image' check with this.

Jai
– Jai

2022-08-26 16:26:13 +00:00
Commented Aug 26, 2022 at 16:26 — Jai
– Jai, Commented Aug 26, 2022 at 16:26
users is not JSON, users is a JavaScript object.

crashmstr
– crashmstr

2022-08-26 16:41:11 +00:00
Commented Aug 26, 2022 at 16:41 — crashmstr
– crashmstr, Commented Aug 26, 2022 at 16:41
That is not json, its is a JS object

Yousaf Raza
– Yousaf Raza

2022-08-26 19:59:53 +00:00
Commented Aug 26, 2022 at 19:59 — Yousaf Raza
– Yousaf Raza, Commented Aug 26, 2022 at 19:59

Prashant Singh · Accepted Answer · 2022-08-26 16:37:26Z

2

Change it to.

<div *ngFor="let user of users">
   <user-image *ngIf="user?.image" [user]="user"></user-image>
</div>

answered Aug 26, 2022 at 16:37

Prashant Singh

6911 gold badge5 silver badges17 bronze badges

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

Comments

Passionate Coder · Accepted Answer · 2022-08-26 16:59:04Z

0

your Object is giving error to me so I changed it little bit.

You can try below solution

users = [
    {
      user: {
        image: 'user1.png',
        data: {
           name: 'abc'     
           }
          }
    },
   {
      user: {
        image: null,
        data: {
           name: 'xyz'     
           }
          }
    },
   {
      user: {
        image: 'user1.png',
        data: {
           name: 'xyzz'     
           }
          }
    }
  ]
}


<div *ngFor="let userObj of users">
  <user-image  *ngIf="userObj.user?.image" [user]="userObj.user"></user-image>
</div>

answered Aug 26, 2022 at 16:59

Passionate Coder

7,3042 gold badges24 silver badges50 bronze badges

Comments

Danielle · Accepted Answer · 2022-08-26 17:32:41Z

0

If only when image is different than null, you can do something like

   <user-image *ngIf="user.image != null" [user]="user"></user-image>

Although user-image will be displayed even if the content of image is "" or has any other value than null (true, false, 123, "123", "", etc)

answered Aug 26, 2022 at 17:32

Danielle

1,5261 gold badge15 silver badges36 bronze badges

Collectives™ on Stack Overflow

How to parse Json Object in Angular?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related