Getting a variable from a multidimentional JSON array using Jquery

Question

I am retrieving a multidimensional JSON array using JQUERY.

I need to print out various items from the array, but am having a hard time figuring out how to go through the array and get these items so I can insert them into the HTML.

Here is an example of the array (this is what is taken from the jsonpage.php referenced below.

{
   "count":1,
   "total_count":1,
   "contacts":[
      {
         "id":92840643,
         "user_id":55536,
         "first_name":"John",
         "last_name":"Doe",
         "full_name":"John  Doe",
         "initials":"JD",
         "title":null,
         "company":null,
         "email":"[email protected]",
         "avatar":"https://graph.facebook.com/123454/picture?type=large",
         "avatar_url":"https://graph.facebook.com/123454/picture?type=large",
         "last_contacted":null,
         "visible":true,
         "twitter":null,
         "facebook_url":null,
         "linkedin_url":null,
         "first_contacted":null,
         "created_at":"2014-05-26T19:06:55Z",
         "updated_at":"2014-05-26T19:12:42Z",
         "hits":0,
         "user_bucket_id":486405,
         "team_parent_id":null,
         "snoozed_at":null,
         "snooze_days":null,
         "groupings":[
            {
               "id":21554286,
               "type":"Grouping::Location",
               "name":"Johnson, NY",
               "stub":"frisco tx",
               "bucket_id":null,
               "user_id":55536,
               "domain_id":null,
               "editable":null,
               "conversable":null,
               "locked":null,
               "derived_from_id":null
            },
            {
               "id":21553660,
               "type":"Grouping::Bucket",
               "name":"Top Customers",
               "stub":"top customers",
               "bucket_id":486405,
               "user_id":55536,
               "domain_id":null,
               "editable":null,
               "conversable":null,
               "locked":null,
               "derived_from_id":null,
               "has_followups":true,
               "num_days_to_followup":30,
               "program_id":null
            }
         ],
         "email_addresses":[
            "[email protected]"
         ],
         "tags":[

         ],
         "contact_status":3,
         "team_last_contacted":null,
         "team_last_contacted_by":null,
         "phone_numbers":[

         ],
         "addresses":[
            {
               "_id":"538390cfcc0fb067d8000353",
               "created_at":"2014-05-26T19:06:55Z",
               "deleted_at":null,
               "extra_data":{
                  "address_city":"Johnson",
                  "address_state":"NY",
                  "address_country":"United States"
               },
               "label":"Address",
               "primary":null,
               "remote_id":null,
               "updated_at":"2014-05-26T19:06:55Z",
               "username":null,
               "value":"Johnson, NY\nUnited States"
            }
         ],
         "social_profiles":[

         ],
         "websites":[

         ],
         "custom_fields":[
            {
               "_id":"538390cfcc0fb067d8000354",
               "custom_field_id":46639,
               "deleted_at":null,
               "label":"WeeklyNews",
               "value":"YES"
            },
            {
               "_id":"538390cfcc0fb067d8000355",
               "custom_field_id":46640,
               "deleted_at":null,
               "label":"Current Credits",
               "value":"142"
            },
            {
               "_id":"538390cfcc0fb067d8000356",
               "custom_field_id":46641,
               "deleted_at":null,
               "label":"Total Purchased Amount",
               "value":"400"
            },
            {
               "_id":"538390cfcc0fb067d8000357",
               "custom_field_id":46642,
               "deleted_at":null,
               "label":"VDownloads",
               "value":"112"
            },
            {
               "_id":"538390cfcc0fb067d8000358",
               "custom_field_id":46643,
               "deleted_at":null,
               "label":"AEDownloads",
               "value":"9"
            },
            {
               "_id":"538390cfcc0fb067d8000359",
               "custom_field_id":46644,
               "deleted_at":null,
               "label":"ADownloads",
               "value":"53"
            },
            {
               "_id":"538390cfcc0fb067d800035a",
               "custom_field_id":46638,
               "deleted_at":null,
               "label":"Last Login",
               "value":"2014-05-25 23:14:19"
            },
            {
               "_id":"538390cfcc0fb067d800035b",
               "custom_field_id":46649,
               "deleted_at":null,
               "label":"Label",
               "value":"Group1"
            }
         ]
      }
   ]
}

And here is the jquery success code:

 $.post('/jsonpage.php', post_data,  function(response) {



 });

Now, if I put alert(response); within the function i.e.:

 $.post('/jsonpage.php', post_data,  function(response) {

 alert(response);
      });

Then, it 'does' alert the entire JSON string as listed above.

However, if I put this:

 $.post('/jsonpage.php', post_data,  function(response) {

 alert(response.count);
      });

Then, I get UNDEFINED in the alert box. I have tried a few different variables to 'alert' and they all come back undefined.

Thanks for your help!

Craig

Unless your html page is very complex and you really need everything, imo there is way too much "Stuff" in that json and jsonpage.php should probably trim down that massive blob to something more useful/manageable/not as bandwidth intensive. But hey, maybe you need it all! — James
– James, Commented Jun 28, 2014 at 20:07
Thanks James. I am retrieving it via an API, and you are right. I don't need it all and I will see how I can limit it down and not get everything back. Thanks for the comment. — CRAIG
– CRAIG, Commented Jun 28, 2014 at 20:24
Thanks for the edit and cleaning up my question as well. I very much appreciate that. — CRAIG
– CRAIG, Commented Jun 28, 2014 at 20:37

Kristoffer Jälén · Accepted Answer · 2014-06-28 19:55:47Z

1

response.total_count
response.contacts[0].id
response.contacts[0].groupings[0].stub

And so on.

answered Jun 28, 2014 at 19:55

Kristoffer Jälén

4,8664 gold badges35 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Jonathan Wilson Over a year ago

response is data, not a DOM element

Kristoffer Jälén Over a year ago

Oh, sorry, typo. Edited.

CRAIG Over a year ago

This looks right, but I am getting UNDEFINED when trying to alert my variables. Can you check my edits above?

Kristoffer Jälén Over a year ago

Try to inspect the response in the Google Developer Tools console, i.e. do a console.log(response) and expand the result.

Kristoffer Jälén Over a year ago

Great! Have a nice day.

|

James · Accepted Answer · 2014-06-28 20:56:08Z

1

Here are some ways of using the data in your json response. Hope it helps.

$.post('/jsonpage.php', post_data,  function(response) {

  if (!response.contacts || !response.contacts.length) {
    alert("Error loading that/those contact(s)");
    return;
  }

  for (var i=0, c; c = response.contacts[i]; i++) {
    // c is each contact, do stuff with c
    alert("That contact was created at " + c.created_at + " and last updated at " + c.updated_at);

    var cities = [];

    for (var j=0, a; a = c.addresses[j]; j++) {
      // a refers to each address
      cities.push(a.extra_data.address_city);
    }
    alert(c.full_name + " lives in " + cities.join(" and ") + ".");

    for (var j=0, cf; cf = c.custom_fields[j]; j++) {
      // cf is each custom_field
      // build a form or something
      // element label is cf.label
      // element value is currently cf.value
      var p = document.createElement("p");
      p.appendChild(document.createTextNode(cf.label));

      var el = document.createElement("input");
      el.type = "text";
      el.value = cf.value;

      p.appendChild(el);

      document.getElementById("someForm").appendChild(p);

    }

  }

});

answered Jun 28, 2014 at 20:56

James

22.4k5 gold badges29 silver badges44 bronze badges

1 Comment

CRAIG Over a year ago

Checking this out now James, but thanks for taking the time to post this extra info./details. Awesomeness!

malkam · Accepted Answer · 2014-06-28 20:00:47Z

Try this

var data = { "count": 1, "total_count": 1, "contacts": [{ "id": 92840643, "user_id": 55536, "first_name": "John", "last_name": "Doe", "full_name": "John  Doe", "initials": "JD", "title": null, "company": null, "email": "[email protected]", "avatar": "https://graph.facebook.com/123454/picture?type=large", "avatar_url": "https://graph.facebook.com/123454/picture?type=large", "last_contacted": null, "visible": true, "twitter": null, "facebook_url": null, "linkedin_url": null, "first_contacted": null, "created_at": "2014-05-26T19:06:55Z", "updated_at": "2014-05-26T19:12:42Z", "hits": 0, "user_bucket_id": 486405, "team_parent_id": null, "snoozed_at": null, "snooze_days": null, "groupings": [{ "id": 21554286, "type": "Grouping::Location", "name": "Johnson, NY", "stub": "frisco tx", "bucket_id": null, "user_id": 55536, "domain_id": null, "editable": null, "conversable": null, "locked": null, "derived_from_id": null }, { "id": 21553660, "type": "Grouping::Bucket", "name": "Top Customers", "stub": "top customers", "bucket_id": 486405, "user_id": 55536, "domain_id": null, "editable": null, "conversable": null, "locked": null, "derived_from_id": null, "has_followups": true, "num_days_to_followup": 30, "program_id": null}], "email_addresses": ["[email protected]"], "tags": [], "contact_status": 3, "team_last_contacted": null, "team_last_contacted_by": null, "phone_numbers": [], "addresses": [{ "_id": "538390cfcc0fb067d8000353", "created_at": "2014-05-26T19:06:55Z", "deleted_at": null, "extra_data": { "address_city": "Johnson", "address_state": "NY", "address_country": "United States" }, "label": "Address", "primary": null, "remote_id": null, "updated_at": "2014-05-26T19:06:55Z", "username": null, "value": "Johnson, NY\nUnited States"}], "social_profiles": [], "websites": [], "custom_fields": [{ "_id": "538390cfcc0fb067d8000354", "custom_field_id": 46639, "deleted_at": null, "label": "WeeklyNews", "value": "YES" }, { "_id": "538390cfcc0fb067d8000355", "custom_field_id": 46640, "deleted_at": null, "label": "Current Credits", "value": "142" }, { "_id": "538390cfcc0fb067d8000356", "custom_field_id": 46641, "deleted_at": null, "label": "Total Purchased Amount", "value": "400" }, { "_id": "538390cfcc0fb067d8000357", "custom_field_id": 46642, "deleted_at": null, "label": "VDownloads", "value": "112" }, { "_id": "538390cfcc0fb067d8000358", "custom_field_id": 46643, "deleted_at": null, "label": "AEDownloads", "value": "9" }, { "_id": "538390cfcc0fb067d8000359", "custom_field_id": 46644, "deleted_at": null, "label": "ADownloads", "value": "53" }, { "_id": "538390cfcc0fb067d800035a", "custom_field_id": 46638, "deleted_at": null, "label": "Last Login", "value": "2014-05-25 23:14:19" }, { "_id": "538390cfcc0fb067d800035b", "custom_field_id": 46649, "deleted_at": null, "label": "Label", "value": "Group1"}]}] };
    alert(data["contacts"][0]["id"]);

//get count
alert(data["count"]); //1
//get first contacts data
data["contacts"][0]["id"] //retruns 92840643
//do same for others to get data

I think you've got a typo there: alert(j["contacts"][0]["id"]);

Collectives™ on Stack Overflow

Getting a variable from a multidimentional JSON array using Jquery

3 Answers 3

8 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related