 <p>Both <code>.each()</code> and <code>.map()</code> are functions that are able to access the elements in your <code>data.list</code>. Read more about <strong><a href="http://api.jquery.com/each/" rel="nofollow">.each()</a></strong> and <strong><a href="http://api.jquery.com/jQuery.map/" rel="nofollow">.map()</a></strong></p> <p>You can use one or the other, you don't need both:</p> <pre><code>$.map(data.list, function(val, i) { $('#category').append(new Option(val,val)); console.log("val1 " + val); }); </code></pre> <p>Or</p> <pre><code>$(data.list).each(function(i, val) { $('#category').append(new Option(val,val)); console.log("val1 " + val); }); </code></pre> <p>Pay attention to the arguments order, <code>.each()</code> is in different order from <code>.map()</code>.</p>