0

As the title says, Im calling a Json and It's "working", but i'm getting an error from jquery. "cannot read property "length" of undefined". I dont know what it could be.

here is my html, js and json

http://jsfiddle.net/vitorboccio/7LUCa/

    <div class="wrapper">
        <div class="profile">
            <table id="userdata" border="2">
                <thead>
                    <th>Name</th>
                    <th>E-mail</th>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

JS:

$.ajax({
       get: 'people.json',
       success: function (data) {
           alert('it works');
           $.each(data.table, function(i, f) {
               var tblRow = "<tr>" + "<td>" + f.name + "</td>" +
               "<td>" + f.email + "</td>" + "</tr>"
               $(tblRow).appendTo("#userdata tbody");
           });
       },
       error: function() {alert('it doesnt work')},
       datatype: 'jsonp'
    });

update:

error

vbotio
  • 1,566
  • 3
  • 26
  • 53
  • Can you give us the output of `console.log( data )` – PeterKA Jun 11 '14 at 22:04
  • ReferenceError: data is not defined – vbotio Jun 11 '14 at 22:05
  • Are you sure this error is being produced from this? I dont even see where yo are calling a length property. Can you add a fiddle? – Mark Jun 11 '14 at 22:05
  • It works in chrome, but the jsfiddle server is throwing out "please use post request". probably a 404 get response? http://jsfiddle.net/7LUCa/3/ – Shanimal Jun 11 '14 at 22:09
  • Can you post the output of `console.log( data )` from your server. – PeterKA Jun 11 '14 at 22:12
  • @user3558931 same error: http://vitorboccio.com/projects/test/ – vbotio Jun 11 '14 at 22:14
  • I am NOT asking for the error. I am asking for the value of `data`. – PeterKA Jun 11 '14 at 22:15
  • ok, lol, throw a break point into the success function and see what you are getting back... in this case it's `{error:...}` so the error you are getting is that data has no table property and $.each is complaining that its empty. – Shanimal Jun 11 '14 at 22:18
  • better yet go to the console and type in` $.each()` you'll get the same error because the first parameter is null and has no iterable indexes... oh lol, +1 @dave – Shanimal Jun 11 '14 at 22:19

2 Answers2

4

You can't use .each on something that doesn't have a length. In your fiddle, at the moment, you are getting back

Object {error: "Please use POST request"}

for data. Which obviously you can't iterate over the .table property, as it has no length because it is undefined.

Edit:

This works on your actual site:

$.getJSON('http://vitorboccio.com/projects/test/people.json',
   function (data) {
      console.log(data.data);
       $.each(data.data.table, function(i, f) {
           var tblRow = "<tr>" + "<td>" + f.name + "</td>" +
           "<td>" + f.email + "</td>" + "</tr>"
           $(tblRow).appendTo("#userdata tbody");
       });
   }
);
dave
  • 62,300
  • 5
  • 72
  • 93
0

You can't use each on the data like that. That is were you are getting the error.

Mark
  • 4,773
  • 8
  • 53
  • 91