Juan Juan - 7 months ago 21
Javascript Question

$.each jquery loop printing one "undefined" for every element after getJSON request, grid data prints perfectly

I'm doing a JSON request and after I loop through the elements and they rows are printed perfectly. The thing is that I keep seeing one undefined printing for every element on the top of the grid I'm building, How do I get rid of it?......


undefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefined


$("#newsletters").click(function(){
$.getJSON("/newsletter/getNewsletters", function(result){

var grid="<br><table id='newsletter_grid'>";
grid+="<thead><tr><th></th><th>Año</th><th>Mes</th><th>Quincena</th><th></th><th></th><th>Publicado</th></tr></thead>";

grid+="<tr><td><button id='agregar_button' onclick='crearNuevoNewsLetter()'>Nuevo</button></td></tr>";

$.each(result, function(i, elem){

//show view fieldset, son los campos que se muestran para visualizar los datos

grid+=mostrarElementosViewMode(elem);

//crea los hidden fields asociados a los view fields creados arriba de este

grid+=crearRowHidden(elem);


});


grid+="</table>";

$("#grilla").html(grid);


});




});

function mostrarElementosViewMode(elem){

var elemento;

elemento+="<tr id='fieldset_"+elem.id+"'>";

elemento+="<td><input type='hidden' value='"+elem.id+"'></td>";

elemento+="<td id='anio_view_"+elem.id+"'>"+elem.anio+"</td>";

elemento+="<td id='mes_view_"+elem.id+"'>"+elem.mes+"</td>";

elemento+="<td id='quincena_view_"+elem.id+"'>"+elem.quincena+"</td>";

elemento+="<td><button id='editar_"+elem.id+"' value='Editar' onclick='muestraEditarFieldsNewsletter(\""+elem.id+"\")'>Editar</td>";

elemento+="<td><button id='eliminar_newsletter_"+elem.id+"' value='Eliminar'>Eliminar</td>";

if(elem.publicado == 1){
elemento+="<td><input type='checkbox' id='publicado_view_"+elem.id+"' name='publicado' checked='checked'></td>";
} else {
elemento+="<td><input type='checkbox' id='publicado_view_"+elem.id+"' name='publicado'></td>";
}

elemento+="</tr>";

return elemento;

}

function crearRowHidden(elem){

var nuevoHiddenFieldSet="";

nuevoHiddenFieldSet+="<tr id='fieldset_hidden_"+elem.id+"' style='display:none'>";

nuevoHiddenFieldSet+="<td><input type='hidden' value='"+elem.id+"'></td>";

nuevoHiddenFieldSet+="<td><input name='anio' value='"+elem.anio+"' id='anio_"+elem.id+"' /></td>";

nuevoHiddenFieldSet+="<td><input name='mes' value='"+elem.mes+"' id='mes_"+elem.id+"' /></td>";

nuevoHiddenFieldSet+="<td><input name='quincena' value='"+elem.quincena+"' id='quincena_"+elem.id+"' /></td>";

nuevoHiddenFieldSet+="<td><button value='Guardar' name='guardar_newsletter' id='guardar_newsletter_"+elem.id+"' onclick='guardarNewsletter("+elem.id+",\"update\")'>Guardar</td>";

nuevoHiddenFieldSet+="<td></td>";

if(elem.publicado==1){
nuevoHiddenFieldSet+="<td><input type='checkbox' id='publicado_"+elem.id+"' name='publicado' checked='checked'></td>";
}else{
nuevoHiddenFieldSet+="<td><input type='checkbox' id='publicado_"+elem.id+"' name='publicado'></td>";
}

nuevoHiddenFieldSet+="</tr>";

return nuevoHiddenFieldSet;

}


and the web service returns this JSON:

[{"id":"12","anio":"2016","mes":"1","quincena":"4","publicado":"1"},{"id":"11","anio":"0000","mes":"1"
,"quincena":"1","publicado":"1"},{"id":"10","anio":"2000","mes":"1","quincena":"1","publicado":"1"},
{"id":"9","anio":"2000","mes":"1","quincena":"5","publicado":"1"},{"id":"8","anio":"0000","mes":"1","quincena"
:"1","publicado":"1"},{"id":"6","anio":"0000","mes":"1","quincena":"3","publicado":"1"},{"id":"5","anio"
:"2016","mes":"1","quincena":"5","publicado":"1"},{"id":"4","anio":"2016","mes":"1","quincena":"4","publicado"
:"1"},{"id":"3","anio":"2016","mes":"1","quincena":"3","publicado":"1"},{"id":"2","anio":"2016","mes"
:"1","quincena":"2","publicado":"1"},{"id":"1","anio":"2016","mes":"2","quincena":"1","publicado":"1"
}]

Answer

I think you must change

function mostrarElementosViewMode(elem){

    var elemento;

to

function mostrarElementosViewMode(elem){

    var elemento = '';