How to access JSON object in JavaScript
Below is a JSON string.
JSON String
{
"name": "mkyong",
"age": 30,
"address": {
"streetAddress": "88 8nd Street",
"city": "New York"
},
"phoneNumber": [
{
"type": "home",
"number": "111 111-1111"
},
{
"type": "fax",
"number": "222 222-2222"
}
]
}
To access the JSON object in JavaScript, parse it with JSON.parse(), and access it via “.” or “[]”.
JavaScript
<script>
var data = '{"name": "mkyong","age": 30,"address": {"streetAddress": "88 8nd Street","city": "New York"},"phoneNumber": [{"type": "home","number": "111 111-1111"},{"type": "fax","number": "222 222-2222"}]}';
var json = JSON.parse(data);
alert(json["name"]); //mkyong
alert(json.name); //mkyong
alert(json.address.streetAddress); //88 8nd Street
alert(json["address"].city); //New York
alert(json.phoneNumber[0].number); //111 111-1111
alert(json.phoneNumber[1].type); //fax
alert(json.phoneNumber.number); //undefined
</script>
Reference
About Author
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.
i love you
{
“_id” : ObjectId(“5625e76522a4e1a009ff8948”),
“name” : “Country 1”,
“parentId” : “5625e76522a4e1a009ff8947”,
“type” : “COUNTRY”,
“order” : 0,
“createdDate” : 1445324645373,
“lastModifiedDate” : 1445324645373,
“ancestors” : [
“5625e76522a4e1a009ff8947”
]
}
{
“_id” : ObjectId(“5625e76522a4e1a009ff8949”),
“name” : “Site 1”,
“parentId” : “5625e76522a4e1a009ff8948”,
“type” : “SITE”,
“order” : 0,
“createdDate” : 1445324645401,
“lastModifiedDate” : 1445324645401,
“ancestors” : [
“5625e76522a4e1a009ff8947”,
“5625e76522a4e1a009ff8948”
]
}
{
“_id” : ObjectId(“5625e76522a4e1a009ff894a”),
“name” : “Building 1”,
“parentId” : “5625e76522a4e1a009ff8949”,
“type” : “BUILDING”,
“order” : 0,
“createdDate” : 1445324645426,
“lastModifiedDate” : 1445324645426,
“ancestors” : [
“5625e76522a4e1a009ff8947”,
“5625e76522a4e1a009ff8948”,
“5625e76522a4e1a009ff8949”
]
}
{
“_id” : ObjectId(“5625e76522a4e1a009ff894b”),
“name” : “Floor 0”,
“parentId” : “5625e76522a4e1a009ff894a”,
“type” : “FLOOR”,
“order” : 0,
“createdDate” : 1445324645484,
“lastModifiedDate” : 1445324645484,
“levelSpecificData” : {
“iconZoomFactor” : 0.25,
“labelZoomFactor” : 1,
“labelFont” : “arial”,
“labelFontSize” : 10
},
“ancestors” : [
“5625e76522a4e1a009ff8947”,
“5625e76522a4e1a009ff8948”,
“5625e76522a4e1a009ff8949”,
“5625e76522a4e1a009ff894a”
]
}
{
“_id” : ObjectId(“5625e78022a4e1a009ff894c”),
“name” : “Floor 1”,
“parentId” : “5625e76522a4e1a009ff894a”,
“order” : 1,
“type” : “FLOOR”,
“createdDate” : 1445324672901,
“lastModifiedDate” : 1445324695318,
“levelSpecificData” : {
“iconZoomFactor” : 0.25,
“labelZoomFactor” : 1,
“labelFont” : “arial”,
“labelFontSize” : 24
},
“ancestors” : [
“5625e76522a4e1a009ff8947”,
“5625e76522a4e1a009ff8948”,
“5625e76522a4e1a009ff8949”,
“5625e76522a4e1a009ff894a”
]
}
How can we deal with this type of json data???
Helped me a lots to understand tnx.
Thanks sir!
9 Years and still useful
how do you perform filter operation on phoneNumber base on the type home?
Simple but brilliant. Thank you
Thanks, been trying for hours to get something working and this was what I needed.
always your the best
thank you sir
suppose instead of phoneNumber its a 0 and inside this 0 property type home and number. now how can u get property inside it. im working on a javascript file and i get error message Unexpected number.
how to read a .json file in .js file…
the json file will includes data in format like { “name”: “ram”,”address”:”UK”}
thanks heaps, forgot to parse! 🙂 sbutler44 dot site
I am using python flask framework. I have a json object passed to an HTML page using render_template method. I can see the whole JSON when I write {{ myJSONobject }} inside HTML but I get error when I use that inside JS.
Good post. thank you.
make sense to write simple example and make us understand mkyong thanks again
Hi
How shall I parse this JSON
{
“channelList”: {
“channel1”: “All channels local”,
“channe2”: “CH1Local CH2Local CH3Local CH4Local CH5Remote”
}
}
Object from which JSON is being generated is
public class ChannelList implements Serializable {
HashMap channelList;}
I am using angular2 to call restapi
getActiveChannel(): Observable {
return this._http.get(this._activeChannelUrl)
.map((response: Response) => response.json())
.do(data => console.log(“All: ” + JSON.stringify(data)))
.catch(this.handleError);
}
I need to parse JSON response in key value pair
Please note channel list– contain hashmap of channel name and its description
so key value will differ on calls from one client to another client.
Keys will also not remain same as there are different channels.
Hashmap is prepared on fly with the client naming convention.
Appreciate your response.
ur super bro.! thank you very much
Thx
tanks
This tool will help to analyse json data http://codebeautify.org/jsonviewer
Hi Mkyong
With all the respect for the previous tutorials, you’ll be showing how to declare private variable in Java soon. And in the second part, how to declare protected variable. After three weeks, how to declare the public one.
cheers jotka
cannot reaad property name of ubdefined
hello young tank you for your toturials .
in my project server send json object to ui with web service .and i want to show json object in ui(angularjs).
please help me .tanks