Problem parsing JSON responce from server

Question

Hello,

I'm making a post request to the server and getting back the array of data that I want, but I can't see to access the individual elements and I can't figure out why.

This is the jist of it

$(document).ready(function() {
  $.post("myscript", { Action: "JQueryReq",  },
  function(data){
   alert(data);
  });
});

If I do the above I get back everything I want and it looks like this (in the JS dialog box)

[{"val1":null,"val2":null,"val3":null,"Size":"Inches","valu4":null}]

But if I change

alert(data);

to

alert(data.Size);

I just get "undefined"

I also tried

var myjsonreturn = eval(data);
alert(myjsonreturn.Size);

I also tried

var myjsonreturn = eval('('+data+')');
alert(myjsonreturn.Size);

And every time I get undefined.

What am I doing wrong?

TIA

Answer 1

What is data? Is it a string? If so, you want to use:

eval('('+data+')')[0].Size;

Answer 2

Tried this?

alert(data[0].Size)

Answer 3

What you're getting back as a JSON response is an array with just one cell. Because the array's length is 1 the index will start from the number 0, so you can access the contents like this:

alert(data[0].Size);

Or, if you want to loop through the values with jQuery's .each():

$.each(data[0], function(index, value){
    alert(index + ':' + value);
});