$.post to display table with for in

Question

i'm trying to display a table with jsonObject response, using loop for, to begin with objetosRetorna.Propiedad_Msg is always not null, so rows in table don't show anything just columns showing a error message i'm not using AJAX. Here is my code. ....

 $.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 Response

 [{"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"}....]

Thank you. Hope somebody can help me

UPDATE.... TypeError: objetosRetorna.map is not a function[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(""));
       }
    );

We can't help you without seeing the JSON your server returns. — T.J. Crowder, Aug 12 '16 at 07:29

score 0 · Answer 1 · edited May 23 '17 at 12:19

You need to refer to the entry you're looping over. Instead of

for (var i in objetosRetorna){
    if(objetosRetorna.Propiedad_Msg=='Null'){

you would want

for (var i in objetosRetorna){
    if(objetosRetorna[i].Propiedad_Msg=='Null'){
    // --------------^^^

You make the same small mistake later with objetosRetorna.Prop_id a couple of times.

But, for-in isn't the correct way to loop through an array. You have lots of options, but here I'd probably use forEach.

Also, unrelated, but you have

if (objetosRetorna.Propiedad_Msg == 'Null') {

and then immediately after that

if (objetosRetorna.Propiedad_Msg != 'Null') {

In that situation, you can just use else to avoid the maintenance issue of having the condition repeated.

You're also removing everything from the table when adding each row, which means you'll end up with just the last row. So instead of forEach, let's use map to return an array of row strings:

So taking all that together (see *** comments):

$.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(""));
    }
);

I was checking my code,but i dont understand why im getting a TypeError Message about objetosRetorna.map is not a function. — Ivonne Lopez, Aug 12 '16 at 09:49

Frog · Accepted Answer · 2016-08-12T12:51:04.700

Objects, {}, in JavaScript does not have the method .map(), it's only for Arrays, [].

So in order for your code to work change data.map() to data.props.map()

And json response to something like

{"props":[
{"Prop_id":"32"},
{"Prop_titulo":"Mi titulo de propiedad"},
{"Prop_propiedad":"Casa"}, 
{"Prop_categoria":"Renta"}, 
{"Prop_direccion":"Calle Term"},
 ...]}

Something to read .map() on: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

PS. if you just want to iterate json and you can make your props into array you can iterate objects like this:

for (var key in objetosRetorna) {
  if (objetosRetorna.hasOwnProperty(key)) {
    console.log(key + " -> " + p[key]);
  }
}

If you need more in-depth fix or explanation please leave a comment.

$.post to display table with for in

2 Answers2