Check if object exists without throwing an error

Question

So, I have data with multiple objects like so:

let form = {
    name: '',
    bank: {
        name: '',
        number: '',
    } 
}

data: form,
errors: JSON.parse(JSON.stringify(form))

When an error occurs (a value is empty, it gets added to the errors property, so, if the name is empty, the errors will be like

errors: {
    name: {
        {'Name must be set'}
    }
}

Now, as you can see, because the bank object never got an error, the errors property won't have a bank object, which causes error (I can't return empty data for banking, so need a way in my html)

So, in my html, I am trying to get the errors from the errors property

<input type="text"
       class="bg-grey-lightest border outline-none p-2 text-black text-sm w-full"
       placeholder="{{ __('ex : Barclays') }}"
       v-model="form.bank.bank">
<span v-for="error in errors.bank.bank" class="hasError">
    @{{ error }}
</span>

The html above throws an error, because errors.bank.bank doesn't exists, only errors.name as explained above, so how can I check that object exists before running it through the v-for to get the errors?

It's not, the bank object won't exist if there's no errors with the bank part of the form. — user9715413
– user9715413, Commented Oct 1, 2018 at 13:47
Yes, just saw that you are missing the filled check. I'll set up an example in a fiddle. — Rence
– Rence, Commented Oct 1, 2018 at 13:49

Rence · Accepted Answer · 2018-10-01 13:52:53Z

1

You need to perform a check to see if Error is filled (using if):

https://jsfiddle.net/Sirence/eywraw8t/402107/

<div id="app">
  <div v-if="errors && errors.bank">
  <span v-for="error in errors.bank.bank" class="hasError">
    @{{ error }}
 </span>
  </div>
</div>

answered Oct 1, 2018 at 13:52

Rence

2,9403 gold badges27 silver badges44 bronze badges

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

1 Comment

Rence Over a year ago

Also, do not add it to the span itself as suggested by the other answer, as that will throw errors: jsfiddle.net/Sirence/b913cjht. If you do not want to use a div, you can just wrap a separte span around it: jsfiddle.net/Sirence/b913cjht/4

bradm6s · Accepted Answer · 2018-10-01 13:50:27Z

0

You can add something like v-if="errors && errors.bank to the span

answered Oct 1, 2018 at 13:50

bradm6s

1025 bronze badges

Collectives™ on Stack Overflow

Check if object exists without throwing an error

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related