Question

using $.map function i am looping a object and appending the element i make. but my case, i am getting the console info properly, but finally returning object only appending, what is the issue in my code?

my code :

  $('body').append(
 $.map(val.fields, function (val, i) {
     var element;
     if (val.label) {
         element = $('<label />', {
             text: val.label
         });
         console.log(element); //properly consoles 3 lables but not appending why?
     }
     if (val.type) {
         element = val.type === 'text' || val.type === 'submit' ? $('<input />', {
             type: val.type,
             name: val.name,
             value: val.value,
             id: val.vlaue
         }) : val.type === 'select' ? $('<select />', {
             name: val.name
         }) : '';
         console.log(element); // properly console 3 element and only this is appending
     }

     return element;
 }))

Answer 1

The problem seems to be with the type of the objects returned from the call to $.map.

If you change your map call to return element[0] (The actual dom element created rather than the wrapped jQuery object) then it works:

$('body').append(
     $.map(val.fields, function (val, i) {
         var element;
         if (val.label) {
             element = $('<label />', {
                 text: val.label
             });
             console.log(element); //properly consoles 3 lables but not appending why?
         }
         if (val.type) {
             element = val.type === 'text' || val.type === 'submit' ? $('<input />', {
                 type: val.type,
                 name: val.name,
                 value: val.value,
                 id: val.vlaue
             }) : val.type === 'select' ? $('<select />', {
                 name: val.name
             }) : '';
             console.log(element); // properly console 3 element and only this is appending
         }

         return element[0]; // <----- Added [0] here
     })
)

Example – http://jsfiddle.net/nhds6/

This is assuming that there will always be an element. You probably want to add some error handling if that isn’t the case.