CODEWITHSUNDEEP
javascriptjsonvue.js
Darwesh Singh
Darwesh Singh

Reputation: 31

Values from JSON object in Vue.js

I'm using Auth0, Vue.js, Vuetify, and Stripe.

Relevant code:

JSON Object (I've blanked out unrelated values)

{ "sub": "", "given_name": "", "family_name": "", "nickname": "", "name": "", "picture": "", "gender": "", "locale": "", "updated_at": "", "https://example.com/stripe_customer_id": "cus_id" }

HTML:

<v-chip disabled>{{ getProfile.https://example.com/stripe_customer_id }}</v-chip>
<v-chip disabled>{{ getProfile.nickname }}</v-chip>
<v-chip disabled>{{ getProfile.gender }}</v-chip>
<v-chip disabled>{{ getProfile.locale }}</v-chip>
<v-chip disabled>{{ getProfile.updated_at }}</v-chip>

As you'd expect, the first line doesn't work due to the HTML link format (specifically, the forward slashes). Is there a way to extract the value of that field?

Unfortunately, the key must be in namespace format due to Auth0 rules (tokens retrieved from Auth0 will omit any added fields that aren't formatted that way. I'm using an Auth0 rule to create the Stripe customer post-registration (if that's at all relevant).

I've tried a few things and all of them result in a raw expression error. Not sure what to try next.

So, is there any way to easily extract that value? Thanks in advance!

Upvotes: 3

Views: 2838

Answers (1)

Muhammad Usman
Muhammad Usman

Reputation: 10148

Use 

getProfile['https://example.com/stripe_customer_id']

To access the keys having dots or /. Any js object's property can be access with object.['key']

Upvotes: 7

Related Questions