$ .post to display a table with

Question

I am trying to display a table with jsonObject response using loop for, for starters with objetosRetorna.Propiedad_Msg is always non-zero, so the rows in the table don't show anything, only the columns showing the 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. Hope someone 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(""));
       }
    );

Answer 1

Objects, {}, in JavaScript do not have a .map () method, this is only for arrays, [].

, , 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() on: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

PS. json, , :

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

, .

Answer 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 . , , , forEach.

, ,

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

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

else, .

, , . forEach map :

, (. *** ):

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