$.post 用 for in 显示表格
Posted
技术标签:
【中文标题】$.post 用 for in 显示表格【英文标题】：$.post to display table with for in 【发布时间】：2016-12-19 03:09:19 【问题描述】：我正在尝试显示一个带有 jsonObject 响应的表，使用循环 for，以 objetosRetorna.Propiedad_Msg 开头，因此始终不为空，因此表中的行不显示任何内容，只是显示 error message 的列 我没有使用 AJAX。 这是我的代码。 ....
$.post("ListaUser.php",
IdPost: DatosJson ,
function(objetosRetorna)
for (var i in objetosRetorna)
if(objetosRetorna.Propiedad_Msg=='Null')
$("#tabla tbody").html("");
var nuevaFila=
"<tr>"
+"<td><a href='NewUser.php?a=" + objetosRetorna.Prop_id + "'><button type='button' class='btn btn-default light-green lighten-1'>Editar </button></a> <button type='button' onclick='Eliminar("+objetosRetorna.Prop_id+")' class='red lighten-1 btn btn-danger '>Eliminar</button></td>"
+"<td>"+objetosRetorna[i].Prop_titulo+"</td>"
+"<td>"+objetosRetorna[i].Prop_propiedad+"</td>"
+"<td>"+objetosRetorna[i].Prop_categoria+"</td>"
+"<td>"+objetosRetorna[i].Prop_direccion+"</td>"
+"<td>"+objetosRetorna[i].Prop_colonia+"</td>"
+"<td>"+objetosRetorna[i].Prop_coordenadas+"</td>"
+"<td>"+objetosRetorna[i].Prop_superficie+"</td>"
+"<td>"+objetosRetorna[i].Prop_recamaras+"</td>"
+"<td>"+objetosRetorna[i].Prop_imagenes+"</td>"
+"<td>"+objetosRetorna[i].Prop_precio+"</td>"
+"<td>"+objetosRetorna[i].Prop_antiguedad+"</td>"
+"<td>"+objetosRetorna[i].Prop_fecha+"</td>"
+"<td>"+objetosRetorna[i].Prop_descripcion+"</td>"
+"<td>"+objetosRetorna[i].Prop_prop_id+"</td>"
+"</tr>";
$(nuevaFila).appendTo("#tabla tbody");
if (objetosRetorna.Propiedad_Msg!="Null")
var nuevaFila =
"<tr>"
+"<td colspan='5'><center><font color='red'>"+objetosRetorna.Propiedad_Msg+"</font></center></td>"
+"</tr>";
$(nuevaFila).appendTo("#tabla tbody");
,"json");
Json 响应
["Prop_id":"32",
"Prop_titulo":"Mi titulo de propiedad",
"Prop_propiedad":"Casa",
"Prop_categoria":"Renta",
"Prop_direccion":"Calle Term",
"Prop_colonia":"Progreso",
"Prop_coordenadas":"499965",
"Prop_superficie":"40m2",
"Prop_recamaras":"5",
"Prop_imagenes":"imagenes",
"Prop_precio":"4500","Prop_antiguedad":"15 a\u00f1os","Prop_fecha":"0000-00-00",
"Prop_descripcion":"Departamen","Prop_prop_id":"10",
"Propiedad_Msg":"Null"....]
谢谢。 希望有人可以帮助我
更新.... TypeError: objetosRetorna.map 不是函数[Saber más]index.php:62:30
function(objetosRetorna)
var rows = objetosRetorna.map (function(objeto)
if (objeto.Propiedad_Msg == 'Null')
return "<tr>" +
"<td><a href='NewUser.php?a=" + objeto.Prop_id + "'><button type='button' class='btn btn-default light-green lighten-1'>Editar </button></a> <button type='button' onclick='Eliminar("+objeto.Prop_id+")' class='red lighten-1 btn btn-danger '>Eliminar</button></td>"+
"<td>"+objeto.Prop_titulo+"</td>"+
"<td>"+objeto.Prop_propiedad+"</td>"+
"<td>"+objeto.Prop_categoria+"</td>"+
"<td>"+objeto.Prop_direccion+"</td>"+
"<td>"+objeto.Prop_colonia+"</td>"+
"<td>"+objeto.Prop_coordenadas+"</td>"+
"<td>"+objeto.Prop_superficie+"</td>"+
"<td>"+objeto.Prop_recamaras+"</td>"+
"<td>"+objeto.Prop_imagenes+"</td>"+
"<td>"+objeto.Prop_precio+"</td>"+
"<td>"+objeto.Prop_antiguedad+"</td>"+
"<td>"+objeto.Prop_fecha+"</td>"+
"<td>"+objeto.Prop_descripcion+"</td>"+
"<td>"+objeto.Prop_prop_id+"</td>"+
"</tr>";
return "<tr>" +
"<td colspan='5'><center><font color='red'>"+objeto.Propiedad_Msg+"</font></center></td>"+
"</tr>";
);
$("#tabla tbody").html(rows.join(""));
);
【问题讨论】：
如果没有看到您的服务器返回的 JSON，我们将无法帮助您。 【参考方案1】：对象，，在 javascript 中没有方法 .map()，它只适用于数组，[]。
因此，为了让您的代码正常工作，请将 data.map() 更改为 data.props.map()
而 json 响应类似
"props":[
"Prop_id":"32",
"Prop_titulo":"Mi titulo de propiedad",
"Prop_propiedad":"Casa",
"Prop_categoria":"Renta",
"Prop_direccion":"Calle Term",
...]
要阅读 .map() 的内容： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
附言。如果你只想迭代 json 并且你可以将你的 props 放入数组中，你可以像这样迭代对象：
for (var key in objetosRetorna)
if (objetosRetorna.hasOwnProperty(key))
console.log(key + " -> " + p[key]);
如果您需要更深入的修复或解释，请发表评论。
【讨论】：
【参考方案2】：您需要参考您正在循环的条目。而不是
for (var i in objetosRetorna)
if(objetosRetorna.Propiedad_Msg=='Null')
你会想要的
for (var i in objetosRetorna)
if(objetosRetorna[i].Propiedad_Msg=='Null')
// --------------^^^
您稍后使用objetosRetorna.Prop_id 多次犯同样的小错误。
但是，for-in 不是循环遍历数组的正确方法。你有lots of options，但在这里我可能会使用forEach。
同样，不相关，但你有
if (objetosRetorna.Propiedad_Msg == 'Null')
然后紧接着
if (objetosRetorna.Propiedad_Msg != 'Null')
在这种情况下，您可以使用else 来避免重复出现这种情况的维护问题。
在添加 每一 行时，您还会从表格中删除所有内容，这意味着您最终只会得到最后一行。所以代替forEach，让我们使用map来返回一个行字符串数组：
所以把所有这些放在一起（见*** cmets）：
$.post("ListaUser.php",
IdPost: DatosJson
,
function(objetosRetorna)
// *** Note use of `map` to get a string for each row
var rows = objetosRetorna.map(function(objecto) // *** We receive each entry as the `objecto` argument
// Use `objeto` for the various things below
if (objeto.Propiedad_Msg == 'Null')
return "<tr>" +
"<td><a href='NewUser.php?a=" + objeto.Prop_id + "'><button type='button' class='btn btn-default light-green lighten-1'>Editar </button></a> <button type='button' onclick='Eliminar(" + objeto.Prop_id + ")' class='red lighten-1 btn btn-danger '>Eliminar</button></td>" +
"<td>" + objetos.Prop_titulo + "</td>" +
"<td>" + objetos.Prop_propiedad + "</td>" +
"<td>" + objetos.Prop_categoria + "</td>" +
"<td>" + objetos.Prop_direccion + "</td>" +
"<td>" + objetos.Prop_colonia + "</td>" +
"<td>" + objetos.Prop_coordenadas + "</td>" +
"<td>" + objetos.Prop_superficie + "</td>" +
"<td>" + objetos.Prop_recamaras + "</td>" +
"<td>" + objetos.Prop_imagenes + "</td>" +
"<td>" + objetos.Prop_precio + "</td>" +
"<td>" + objetos.Prop_antiguedad + "</td>" +
"<td>" + objetos.Prop_fecha + "</td>" +
"<td>" + objetos.Prop_descripcion + "</td>" +
"<td>" + objetos.Prop_prop_id + "</td>" +
"</tr>";
// It's not null
return "<tr>" +
"<td colspan='5'><center><font color='red'>" + objeto.Propiedad_Msg + "</font></center></td>" +
"</tr>";
);
// *** Now we replace the table contents with the strings (joined into one string)
$("#tabla tbody").html(rows.join(""));
);
【讨论】：
我正在检查我的代码，但我不明白为什么我收到关于 objetosRetorna.map 的 TypeError 消息不是函数。以上是关于$.post 用 for in 显示表格的主要内容，如果未能解决你的问题，请参考以下文章
使用 put in for 循环以表格格式打印名称，但仅正确打印姓氏
R markdown：使用for循环生成文本并显示图形/表格