What happens when we use the json key as JS codes?
I am from C ++ and know little about JavaScript.
In JavaScript, I know that we can do the following:
<script>
var obj = JSON.parse('{ "name":"John", "age":30, "gibberish":"New York"}');
document.getElementById("demo").innerHTML = obj.name + ", " + obj.gibberish;
</script>
This is an example from W3School. And of course the JSON object could be obtained from anywhere. But I am very curious what happened when we use
obj.name or obj.gibberish
How could the browser understand these names and gibberish? What's going on behind this? Are there any exceptions that we cannot use this way?
early
source to share
In your case obj
, a JavaScript object, not a JSON object as @zb says. You can convert a JSON string, for example '{ "name":"John", "age":30, "gibberish":"New York"}'
to a JS object, using JSON.parse
. This returns an object. In JavaScript, every object has properties. Because such properties are values associated with objects. Dot alert obj.name
essentially retrieves the value for the property name
that is defined on obj
. The same applies to obj.gibberish
.
The browser knows how to handle objects and allows you to access properties using dot notation. Another way to access an object defined on an object is to use the square bracket notation, for example. obj['name']
... This is similar to working with an array, but the difference is that it obj
is an object, not an array. Also, you are not passing in the index, but rather the name of the property (as a string) that you want to access.
What happens behind the scenes is that your code will be interpreted and the expression obj.name
will evaluate as John
and obj.gibberish
evaluate as New York
.
As for .innerHTML
, you are assigning values to it as a property name
, gibberish
and you are concatenating it with a comma. In fact, innerHTML
it is another property defined on the object, in your case it is the native DOM element returned document.getElementById("demo")
. It allows you to set the HTML content of this element. Assuming the inner html of an element is <p id="demo"></p>
empty and you call a function where you cast the value to obj.name + ", " + obj.gibberish
, then the HTML content of that element will look like this:
<p id="demo">John, New York</p>
You can see it in action here .
And to answer your last question
Are there any exceptions that we cannot use this way?
No, whenever you are dealing with an object, you can use dot or square bracket notation to access the object's properties. However, you run into problems when accessing the property of what is null
or undefined
like
obj.address.street
There address
is undefined
, which leads to the following error Uncaught TypeError: Cannot read property 'street' of undefined
. This does not apply to obj.name.firstname
. Althogh name
has no property called firstname
because it is a string, you won't get the same error. It will just return undefined
. You might think that you can create a property on a string. However, the line is one of the primitive types of JavaScript, as well as number
, boolean
, null
and undefined
. These primitive types cannot have properties. There is only one non-primitive type: Object, which can have properties.
The only exception to what I said above, that I have no properties on primitive types, is if you are using getters and setters. This means that if you have a specific getter for a given property, you can create properties on primitive types. But this is a bit off topic and I would like to redirect you to this and where you can find more information on set
and get
.
source to share
'{ "name":"John", "age":30, "gibberish":"New York"}'
is a string JSON
. You need to convert Json Object using JSON.parse
.
After being converted to an object, He sees it as
var obj = JSON.parse('{ "name":null,"age":30, "gibberish":"New York"}');
console.log(obj)
See console.log
Object has a pair and a value . You must get a specific value from an object with a respected key.
var obj = JSON.parse('{ "name":"John", "age":30, "gibberish":"New York"}');
console.log(obj.name)
eg : obj.name
First get all the data obj
, then get the specific key value representing name
. Same process with all object key value pairs obj.gibberish
=>New York
source to share
To access the JSON data
Javascript we use dot notation
. Let's take an example of an object obj
:
var obj = { "name":"John", "age":30, "gibberish":"New York"}
To access properties, we'll use dot notation like this :
obj.name // John
obj.age // 30
obj.gibberish // New York
Here the variable is listed first obj
, then a period followed by the key to be accessed.
To print the values, we can either use alert()
or console.log()
in JavaScript.
We can also use the square bracket syntax to access the property value from JSON
. To access this, we have to keep the key in double quotes in square brackets. Like this one :
obj["name"] // John
obj["age"] // 30
obj["gibberish"] // New York
source to share