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

  1. Wikipedia : JSON

About the Author

author image
mkyong
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.

Comments

avatar
15 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
15 Comment authors
sbutlerManojDC ValirezaNaveen Recent comment authors
newest oldest most voted
Batbold Boldbayar
Guest
Batbold Boldbayar

Helped me a lots to understand tnx.

Isaac A.
Guest
Isaac A.

i love you

Naveen Kumar
Guest
Naveen Kumar

make sense to write simple example and make us understand mkyong thanks again

sbutler
Guest
sbutler

thanks heaps, forgot to parse! :) sbutler44 dot site

Manoj
Guest
Manoj

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.

Jagruti Frank
Guest
Jagruti Frank

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… Read more »

sudhakarphad
Guest
sudhakarphad

ur super bro.! thank you very much

Achmad Cahya Aditya
Guest
Achmad Cahya Aditya

Thx

Veeresh
Guest
Veeresh

{ “_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” :… Read more »

Shihab Morayur
Guest
Shihab Morayur

tanks

James
Guest
James

This tool will help to analyse json data http://codebeautify.org/jsonviewer

jotka
Guest
jotka

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

DC V
Guest
DC V

cannot reaad property name of ubdefined

alireza
Guest
alireza

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

Naveen
Guest
Naveen

Good post. thank you.