How do I access this JSON data in Javascript/jQuery given that it is generated dynamically?

Question

I have a dynamically generated array done by PHP sent to Javascript. It's basically an array of unread messages. It contains the sender's name and the messages that they have sent.

Given that I do not know the names, how do I retrieve their names and their messages?

{"Emma Giles":
[{"message":"Hi Phil","date":"Tue 10 May 2:55 PM 2011"}],
"Johnathan Macmanners":
[{"message":"Hi Emma","date":"Sun 26 June 10:03 PM 2011"}],
"Ellen Murley":
[{"message":"Hello","date":"Fri 04 May 4:05 PM 2012"},
{"message":"How are you?","date":"Fri 04 May 2:52 PM 2012"}],
"Amanda Patterson":
[{"message":"test","date":"Fri 27 April 10:07 AM 2012"}],
"ALEX Pell":
[{"message":"Hi Alvon","date":"Mon 05 March 10:07 AM 2012"}]}

I have tried this but it only prints out numbers for some reason and I've replaced key with val and it prints out every single character in the array one by one.:

$.each(data, function(key, val)
{
    console.log(key);
});

I would suggest to change the format of this json if possible — MilkyWayJoe
– MilkyWayJoe, Commented May 9, 2012 at 17:25
Hm, something is wrong. I've tried data[0] and data[1] and it seems to be treating the whole json object as one long strong so [0] refers to "{" and [1] refers to " " " (singular double quote). Does anyone have an idea why this is the case? — Johnathan Au
– Johnathan Au, Commented May 9, 2012 at 17:29
Basically, there is no data[0] because data is a dictionary, not a regular Array. Again, I don't see anything wrong in particular with the code you started with. — Ja͢ck
– Ja͢ck, Commented May 9, 2012 at 17:33

rjz · Accepted Answer · 2012-05-09 17:28:52Z

1

Cleaning up your JSON a bit, you've got a hash made up of usernames pointing to an array of message-objects:

var data = {
  "Emma Giles": [
    {"message":"Hi Phil","date":"Tue 10 May 2:55 PM 2011"}
  ],
  "Johnathan Macmanners": [
    {"message":"Hi Emma","date":"Sun 26 June 10:03 PM 2011"}
  ]
};

You're almost there in terms of getting what you want:

$.each(data, function(name, messages) {
   var messageText = messages[0].message;

   alert(name + ': ' + messageText);
});

Just for reference, there's a fiddle here

answered May 9, 2012 at 17:28

rjz

16.5k3 gold badges39 silver badges35 bronze badges

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

Comments

Evan Davis · Accepted Answer · 2012-05-09 17:25:54Z

1

Your parent container is an object, not an array. You then have a nested array of objects.

for (var key in data) {
    // key is the name of the person,
    // data[key] is the array containing the message data

    for (var i = 0, l = data[key].length; i < l; i++) {
      for (var msgKey in data[key][i]) {
         // msgKey will be "message" or "date"
         // data[key][i][msgKey] is the value of each key
      }  
    }
}

answered May 9, 2012 at 17:25

Evan Davis

36.7k7 gold badges53 silver badges58 bronze badges

Comments

Gras Double · Accepted Answer · 2012-05-09 17:28:48Z

0

Looks like your data is still serialized and recognized as a string.

Try fetching your data with something like that:

$.getJSON(url, function (data) {
    $(data).each(function (key, value) {
        // ...
    });
});

... or use a good ol' eval(), but you'd rather avoid it if you can.

answered May 9, 2012 at 17:28

Gras Double

16.5k9 gold badges61 silver badges56 bronze badges

Comments

frosty · Accepted Answer · 2012-05-09 17:34:14Z

This will also work:

var a = {"Emma Giles":
[{"message":"Hi Phil","date":"Tue 10 May 2:55 PM 2011"}],
"Johnathan Macmanners":
[{"message":"Hi Emma","date":"Sun 26 June 10:03 PM 2011"}],
"Ellen Murley":
[{"message":"Hello","date":"Fri 04 May 4:05 PM 2012"},
{"message":"How are you?","date":"Fri 04 May 2:52 PM 2012"}],
"Amanda Patterson":
[{"message":"test","date":"Fri 27 April 10:07 AM 2012"}],
"ALEX Pell":
[{"message":"Hi Alvon","date":"Mon 05 March 10:07 AM 2012"}]};

var keys = Object.keys(a);
for(var i = 0, max = keys.length; i < max; i++){
    var key = keys[i]; //name
    var val = a[key]; //messages array
    console.log(key);
    for(var j = 0, jmax = val.length; j < jmax; j++){
        var message = val[j].message;
        console.log("      "+message);
    }

}

Collectives™ on Stack Overflow

How do I access this JSON data in Javascript/jQuery given that it is generated dynamically?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related