Question

I am appending a json response to an html element. The code is very simple

HTML

<div>
  <ul id='grid'></ul>
</div>

jQuery

data = ["Paintings",{ "age":0}]

$(function() {
   $.each(data, function(i,index) {         
     $('div').find('ul').append('<li>'+index.age+'</li>');
  });
});

The output looks like this

undefined

0

Where is the undefined coming from??

I tried using this to remove the undefined

$('#grid').children(':first-child').remove('li');

but it removes the “0” and the undefined.

http://jsfiddle.net/ccUKH/

Answer 1

data is an array, the first element of array is a string Paintings. Second element of array is an object with property age.

The each loops over both elements in array and since string has no property age it creates an LI with text undefined .

You could change the data structure or look for object or string in array and react accordingly…not sure what you want to do. Not clear what you are doing with Paintings