Json object with dash (-) character on element name

Question

I'm parsing a json object that contains an element named data-config.

ex:

var video = data.element.data-config;

Whenever I parse this element I'm getting this error:

ReferenceError: config is not defined

The ReferenceError doesn't mention data-config but simply config.
Any idea why I'm getting this error? Is this related with the dash (-) character?

Solution 1

Valid Characters

In general JavaScript, variable/function names can't contain -. They can only contain letters, $, and _ (Underscore)

So...

The error is coming because it's parsing:

var video is equal to data.element.data(valid) minus config

Solution

Because variables can't contain dashes, you need to use what I'm going to call String/Bracket Notation

data.element['data-config']

If you need to do more then one, do

data.element['data-config']['child']

I don't recommend using String/Bracket Notation when you don't have to, it's better practice.

Solution 2

You have to use [] notation when object properties contain special characters

var video = data.element['data-config'];

Comments

[Pedro Lobito]

That's why I love SO, it works! I'll accept your answer in 10m. tks

[Pedro Lobito]

Thank you for the explanation.