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

26 comments on “How to access JSON object in JavaScript

  1. how do you perform filter operation on phoneNumber base on the type home?

    Reply
  2. Thanks, been trying for hours to get something working and this was what I needed.

    Reply
  3. 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.

    Reply
  4. how to read a .json file in .js file…
    the json file will includes data in format like { “name”: “ram”,”address”:”UK”}

    Reply
  5. thanks heaps, forgot to parse! 🙂 sbutler44 dot site

    Reply
  6. 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.

    Reply
  7. 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

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

    Reply
  9. 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.

    Reply
  10. {

    “_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???

    Reply
  11. 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

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *