how to return blank string if object is undefined in angularjs forms

Question

I have a form model that I am using to map my form fields in AngularJS. Since I am updating these fields on a database I want to retrieve the fields once the user submits the form and comes back to it.

form object:

vm.user = {
        userBag:[
          {
            name: nameService.nameBag[0].organizationName
          },
          {
            name: nameService.nameBag[1].organizationName,
          },
          {
            name: nameService.nameBag[2].organizationName,
          }
        ]
  };

I have coded the form object to return the database fields but I'm running into an error when the user initially has nothing submitted in the field bc the object is empty. Getting the error:

"TypeError: Cannot read property 'organizationName' of undefined"

nameServie is just a get call that retrieves the get.

How do I make it so that the name fields just return a blank if the nameService is undefined?

Possibly with: name: nameService.nameBag[0] ? nameService.nameBag[0].organizationName : "" — Aleksey Solovey
– Aleksey Solovey, Commented May 21, 2018 at 15:41
What do you mean by "nameServie is just a get call that retrieves the get"? — georgeawg
– georgeawg, Commented May 21, 2018 at 19:39

Raeesaa · Accepted Answer · 2018-05-21 16:16:12Z

2

You can use ternary operator to achieve it:

 vm.user = {
        userBag:[
          {
            name: (nameService && nameService.nameBag && nameService.nameBag[0]) ? nameService.nameBag[0].organizationName : ""
          },
          {
            name: (nameService && nameService.nameBag && nameService.nameBag[1]) ? nameService.nameBag[1].organizationName : ""
          },
          {
            name: (nameService && nameService.nameBag && nameService.nameBag[2]) ? nameService.nameBag[2].organizationName : "",
          }
        ]
    };

edited May 21, 2018 at 16:16

answered May 21, 2018 at 15:42

Raeesaa

3,3262 gold badges24 silver badges46 bronze badges

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

1 Comment

jmcgriz Over a year ago

To avoid the repetition, I'd advise writing a little helper function, for example: getNameProperty(obj, property) { return (obj && obj.nameBag && obj.nameBag[0]) ? obj.nameBag[0][property] : "" }, then each would be name: getNameProperty(nameService, 'organizationName')

J. Pichardo · Accepted Answer · 2018-05-21 16:01:28Z

There are several ways to accomplish what you want:

Ternary operator

Using a ternary operator you could have something like:

vm.user = {
  userBag:[
    {
      name: nameService ? nameService.nameBag[0].organizationName : ''
    },
    {
      name: nameService ? nameService.nameBag[1].organizationName : ''
    },
    {
      name: nameService ? nameService.nameBag[2].organizationName : ''
    }
  ]
};

Or operator

With the || operator you can evaluate if the path you want to access "exists" or has value:

{
  name: (nameService && ... && nameService.nameBag[0].organizationName) || ''
}

Optional Access Function

However in order to keep things DRY I would rather use a function for optional access, something like:

function optionalAccess(obj, path, def) {
  const propNames = path.replace(/\]|\)/,'').split(/\.|\[|\(/);

  return propNames.reduce((acc, prop) => acc[prop] || def, obj);
}

const obj = {
  items: [{ hello: "Hello" }]
};

console.log(optionalAccess(obj, "items[0].hello", "def")); // prints: Hello
console.log(optionalAccess(obj, "items[0].he", "def")); // prints: def

TC39 Proposal

There is currently a proposal in order to be able to use chaining, which would allow you to do something like:

nameService?.nameBag[0]?.organizationName || ''

If you want to do something like that there is also the babel plugin

https://www.npmjs.com/package/babel-plugin-transform-optional-chaining

Alexander · Accepted Answer · 2019-11-10 00:53:18Z

i just met the same problem. googling gave no results, but occasionally i have just solved very similar problem and imagined the following solution:

type Pipeline<T> =
  { [K in keyof T]: Pipeline<T[K]> }
  & { VALUE: (defaultValue: T) => T }
export function ppln<T extends {}>(value: T): Pipeline<T> {
  function bound(value: any): boolean {
    return ["string", "number", "boolean", "undefined", "function"]
      .includes(typeof value)
  }
  return new Proxy<T>(
    bound(value) ? {} as T : value, {
    get: (_, field: keyof T) => {
      if (field === "VALUE") {
        return defaultValue => value === undefined ? defaultValue : value
      }
      if (value && value[field]) {
        return ppln(value[field])
      }
      return ppln(undefined)
    }
  }) as unknown as Pipeline<T>
}

then it should be possible to do

ppln(obj).prop1[prop2].prop3.VALUE()
ppln(obj).prop1[prop2].prop3.VALUE('default value')

and get either existing value or undefined without an exception. second line will produce 'default value' if requested value is undefined.

Collectives™ on Stack Overflow

how to return blank string if object is undefined in angularjs forms

3 Answers 3

1 Comment

Ternary operator

Or operator

Optional Access Function

TC39 Proposal

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Ternary operator

Or operator

Optional Access Function

TC39 Proposal

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related