jquery loop on Json data using $.each

Hi I have the following JSON returned in a variable called data.

THIS IS THE JSON THAT GETS RETURNED...

[ 
{"Id": 10004, "PageName": "club"}, 
{"Id": 10040, "PageName": "qaz"}, 
{"Id": 10059, "PageName": "jjjjjjj"}
]

and I am trying to loop through the collection using $.each but I am running into problems where the alert is showing undefined. I have tried alot of different syntax but can't seem to figure this out.

The JQuery I am using is

$.each(data, function(i, item) {
    alert(item.PageName);
});

Can any one point me in the right direction?

EDIT This is the code I am using to grab the data

$.getJSON('/Cms/GetPages/123', null, function(data) {
  fillSelect(data);
});

and this is the function that gets called upon call back

function fillSelect(data) {
  alert(data);
  $.each(data, function(i, item) {
    alert(item.PageName);
  });
}

EDIT 2 This is slightly confusing me, according to the docs it should work as I have it, but it doesn't. According to fiddler the header shows:-

Content-Type: application/json; charset=utf-8

and the JSON is exactly correct above. I am using chrome if this makes any different. Will test in IE and FF....

EDIT 3

using $.get produces

"[
 {
 "Id": 10041,
 "PageName": "01234567890",
 "MetaId": 1000,
 "TemplateId": 2
 },
 {
 "Id": 10001,
 "PageName": "about",
 "MetaId": 1000,
 "TemplateId": 1
 },
 {
 "Id": 10056,
 "PageName": "fdgdfgdfg",
 "MetaId": 1000,
 "TemplateId": 1
 },
 {
 "Id": 10052,
 "PageName": "hjkhjk",
 "MetaId": 1000,
 "TemplateId": 2
 },
 {
 "Id": 10059,
 "PageName": "jjjjjjj",
 "MetaId": 1000,
 "TemplateId": 1
 },
 {
 "Id": 10057,
 "PageName": "qqqqq",
 "MetaId": 1000,
 "TemplateId": 2
 },
 {
 "Id": 10054,
 "PageName": "qwqw",
 "MetaId": 1000,
 "TemplateId": 2
 }
]"

 

 

Answer:

var data = [ 
 {"Id": 10004, "PageName": "club"}, 
 {"Id": 10040, "PageName": "qaz"}, 
 {"Id": 10059, "PageName": "jjjjjjj"}
];

$.each(data, function(i, item) {
    alert(data[i].PageName);
});​

$.each(data, function(i, item) {
    alert(item.PageName);
});​

these two options work well, unless you have something like:

var data.result = [ 
 {"Id": 10004, "PageName": "club"}, 
 {"Id": 10040, "PageName": "qaz"}, 
 {"Id": 10059, "PageName": "jjjjjjj"}
];

$.each(data.result, function(i, item) {
    alert(data.result[i].PageName);
});​

EDIT:

try with this and describes what the result

$.get('/Cms/GetPages/123', function(data) {
  alert(data);
});

FOR EDIT 3:

this corrects the problem, but not the idea to use "eval", you should see how are the response in '/Cms/GetPages/123'.

$.get('/Cms/GetPages/123', function(data) {
  $.each(eval(data.replace(/[
]/, "")), function(i, item) {
   alert(item.PageName);
  });​
});