0

I searched for solutions to the problem of

core.umd.js:3523 ORIGINAL EXCEPTION: Cannot read property 'fullName' of undefined

The Exception came from Template on getting specific property:

{{project.collaborators["0"]["fullName"]}}

I found some useful answer too.

but I am looking for a way to define a global service which will check each object and replace missing/empty property with default value i.e -

instead of checking in each template's each property and will make code less buggy.

// undefined-obj.service.ts
import { Injectable } from '@angular/core';

@Injectable()
export class UndefinedObjectsGlobalService {
private charecterToReplace: string = '-'; // set defualt value

replaceDefaultCharecter(object: any, charecterToReplace: string): any {
        this.charecterToReplace = charecterToReplace;
        // create instance vars to store keys and final output
        let keyArr: any[] = Object.keys(object),
        var dataArr: any[];

        // loop through the object,
        // pushing values to the return array
        keyArr.forEach((key: any) => {

                // if key is null at any iteration then replace is with given text
                if (key == null){
                        dataArr.push(object[key] = this.charecterToReplace); 
                        // else push 
                }else{
                        dataArr.push(object[key]); 
                }

        });

        // return the resulting array
        // need to convert is back to object any idea ?
        return dataArr;
        }
}

as I am new to angular so the class undefinedObjectsGlobalService may be buggy

please help.

Community
  • 1
  • 1
Kaleem Ullah
  • 6,799
  • 3
  • 42
  • 47
  • Where are you using `.fullName`? – Günter Zöchbauer Jan 30 '17 at 07:54
  • where is the object holding the .fullName property coming from? as far as I have been told, forcing values to undefined properties is not a good practice. – briosheje Jan 30 '17 at 07:56
  • in your case the problem is not that fullname is undefined but that the object fullname is a property of is undefined. Basically your collaborators list is in fact empty. I'm not sure how you'd fix that but I doubt you could do it in a generic way. – toskv Jan 30 '17 at 08:36
  • you understand my question, collaborator object is empty or it has some properties with null values, please guide me the generic way. – Kaleem Ullah Jan 30 '17 at 08:40
  • If your problem, is to bypass rending of undefined/null properties then why not try using the Elvis Operator https://angular.io/docs/ts/latest/guide/template-syntax.html#!#safe-navigation-operator – Thirueswaran Rajagopalan Jan 30 '17 at 09:25
  • the collaborator object is not empty. it doesn't exist! you are trying to get the first element of an empty list. In javascript that returns undefined.. It has a meaning in itself.. it means the project has no collaborators. I guess that means nothing is shown on the in this case. Showing something seems wrong.. you should use the elvis operator. – toskv Jan 30 '17 at 09:27

1 Answers1

2

You seem to be trying to access a property of an object that does not exist.

Angular already provides the elvis operator to handle this kind of thing.

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      {{collaborators["0"]?.fullname}}
    </div>
  `,
})
export class App {
  name:string;
  collaborators: [{fullname: string}];
  constructor() {
    this.name = 'Angular2'
    this.collaborators = [];
  }
}

You can see an example here.

toskv
  • 30,680
  • 7
  • 72
  • 74