title: jquery loop on Json data using $.each
body: <p>I have the following JSON returned in a variable called data.</p>
  
  <p><strong>THIS IS THE JSON THAT GETS RETURNED...</strong></p>
  
  <pre><code>[ 
  {"Id": 10004, "PageName": "club"}, 
  {"Id": 10040, "PageName": "qaz"}, 
  {"Id": 10059, "PageName": "jjjjjjj"}
  ]
  </code></pre>
  
  <p>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 a lot of different syntax but can't seem to figure this out.</p>
  
  <p>The JQuery I am using is</p>
  
  <pre><code>$.each(data, function(i, item) {
      alert(item.PageName);
  });
  </code></pre>
  
  <p>Can any one point me in the right direction?</p>
  
  <p><strong>EDIT</strong>
  This is the code I am using to grab the data</p>
  
  <pre><code>$.getJSON('/Cms/GetPages/123', null, function(data) {
    fillSelect(data);
  });
  </code></pre>
  
  <p>and this is the function that gets called upon call back</p>
  
  <pre><code>function fillSelect(data) {
    alert(data);
    $.each(data, function(i, item) {
      alert(item.PageName);
    });
  }
  </code></pre>
  
  <p><strong>EDIT 2</strong>
  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:-</p>
  
  <pre><code>Content-Type: application/json; charset=utf-8
  </code></pre>
  
  <p>and the JSON is exactly correct above. I am using chrome if this makes any different. Will test in IE and FF....</p>
  
  <p><strong>EDIT 3</strong></p>
  
  <p>using $.get produces</p>
  
  <pre><code>"[\r\n {\r\n \"Id\": 10041,\r\n \"PageName\": \"01234567890\",\r\n \"MetaId\": 1000,\r\n \"TemplateId\": 2\r\n },\r\n {\r\n \"Id\": 10001,\r\n \"PageName\": \"about\",\r\n \"MetaId\": 1000,\r\n \"TemplateId\": 1\r\n },\r\n {\r\n \"Id\": 10056,\r\n \"PageName\": \"fdgdfgdfg\",\r\n \"MetaId\": 1000,\r\n \"TemplateId\": 1\r\n },\r\n {\r\n \"Id\": 10052,\r\n \"PageName\": \"hjkhjk\",\r\n \"MetaId\": 1000,\r\n \"TemplateId\": 2\r\n },\r\n {\r\n \"Id\": 10059,\r\n \"PageName\": \"jjjjjjj\",\r\n \"MetaId\": 1000,\r\n \"TemplateId\": 1\r\n },\r\n {\r\n \"Id\": 10057,\r\n \"PageName\": \"qqqqq\",\r\n \"MetaId\": 1000,\r\n \"TemplateId\": 2\r\n },\r\n {\r\n \"Id\": 10054,\r\n \"PageName\": \"qwqw\",\r\n \"MetaId\": 1000,\r\n \"TemplateId\": 2\r\n }\r\n]"
  </code></pre>