Cannot convert undefined or null to object Angular

Question

I try to make a filter method this method works well but I have an error: cannot convert undefined or null to object that I cannot solve

example json

{
  "toto": [
    "titi",
    "tata"
  ],
  hideString: [], // filter method hide this element
"foo": [
    "foobar",
    "footix"
  ]

}

card.components.ts

    @Input() toto: ISummary[] = []
    
    getKeys() {
     Object.keys(this.toto).filter(key => this.toto[key].lenght > 0)
     // in my console I have the following error: cannot convert undefined or null to object 
        the error comes from this line
    }
    
    totoa(keys:string){
     return this.toto[key]
    }

card.html

<div *ngFor="let keys of getKeys()">
 {{keys}}
  <div *ngFor="let values of totoa(keys)">
    {{values}}
  </div
</div

home.components.ts

public result: string = '';

public toto?: Observable<ISummary[]>; // maybe the problem comes from Here I have ternary operator '?'


ngOnInit() {
 this.activatedRoute.paramMap.subscribe(params = > {
  let bigramme = params.get('bigramme');
  this.result = bigramme as string;
  getSummary();
 }
}

getSummary() {
 this.toto = this.sumService.getAllSummary(this.result);
}

this syntax is weird for me: this.summarykeys.Object.keys(this.toto). you don't need this.summarykeys just use Object.keys(yourobject) — Alireza Ahmadi
– Alireza Ahmadi, Commented Jul 19, 2021 at 8:06
Also note that toto is array and keys of array is 0,1,...` . — Alireza Ahmadi
– Alireza Ahmadi, Commented Jul 19, 2021 at 8:08
@AlirezaAhmadi do you need all keys in array of object ? yes exactly — user16356529
– user16356529, Commented Jul 19, 2021 at 8:17

Alireza Ahmadi · Accepted Answer · 2021-07-19 08:56:01Z

1

The cannot convert undefined or null to object Angular error is occurred when you try Object.keys(null). So you can check the object you want to pass to object.keys.

But

It seems you want to show some data in your html based on key/value, so there is a keyvalue pipe for this purpose and no need to extra code such as totoa methods.

And for hiding empty value simply use [hidden]

<div *ngFor="let item of testObject | keyvalue" [hidden]="item.value.length == 0">
    Key: <b>{{item.key}}</b>

    <div *ngFor="let item1 of item.value">
        Value: <b>{{item1}}</b>
    </div>
    <br>
</div>

Here is working sample

The result:

answered Jul 19, 2021 at 8:56

Alireza Ahmadi

10.2k8 gold badges28 silver badges66 bronze badges

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

Comments

Elikill58 · Accepted Answer · 2021-07-19 08:10:22Z

1

You have to check it before using toto object.

The ? can also be used to null/undefined issue, like :

this.toto[key]?.something(); // will not throw error if toto[key] is not defined

But I think you are trying to get keys of toto before setting it, so I suggest you soemthing like :

public summarykeys: string[] = [];
    
@Input() toto: ISummary[] = []
    
getKeys() {
    return this.toto ? this.summarykeys.Object.keys(this.toto).filter(key => this.toto[key].lenght > 0) : [];
}
    
totoa(keys: string){
    return this.toto[key]
}

answered Jul 19, 2021 at 8:10

Elikill58

5,04527 gold badges33 silver badges65 bronze badges

Collectives™ on Stack Overflow

Cannot convert undefined or null to object Angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related