Undefined jquery json result

Question

I have this query in the server side with a while loop and the result echoed as json:

$sql = mysqli_query($dbc, "SELECT * FROM tienda_prod WHERE prod_activo ='1' ORDER BY prod_fechacreado DESC");

$results = array();
while($row = mysqli_fetch_array($sql, MYSQLI_ASSOC)){ 

    $results[] = array(
        'id' => $row["prod_id"], // or smth like $row["video_title"] for title
        'user' => $row["user_id"],
        'categoria' => $row["cat_id"],
        'subcategoria' => $row["subcat_id"],
        'titulo' => $row["prod_titulo"],
        'descripcion' => $row["prod_descripcion"],
        'precio' => $row["prod_precio"],
        'moneda' => $row["prod_moneda"],
        'condicion' => $row["prod_condicion"],
        'marca' => $row["prod_marca_id"],
        'destacado' => $row["prod_destacado"],
        'envios' => $row["prod_envios"],
        'permuta' => $row["prod_permuta"],
        'modelo' => $row["prod_modelo"],
        'fecha_creado' => $row["prod_fechacreado"],
        'fecha_moderado' => $row["prod_fechamoderado"],
        'activo' => $row["prod_activo"]
    );    


}
header('Content-Type: application/json');


    echo json_encode( $results );

When i run this script it only brings me the first object and the rest is undefined.

$.ajax({
            url: 'tienda-app/listing.php',
            type: 'GET',
            dataType: 'json',
            //data: ,
            success: function(data){


                for (var i = 0; i < data.length; i++) {


                      var data = ''
                      + '<div class="col-xs-6 col-md-4 column productbox">'
                            + '<a href="detalle_producto.php#' +  + data[i].id +'">'
                                + '<img src="https://unsplash.it/270/270/?random=4" class="img-responsive">'
                            + '</a>'
                            + '<div class="product-info">'
                            + ' <div class="product-title"><a href="detalle_producto.php#' +  + data[i].id +'">' + data[i].titulo + '</a></div>'
                            + '<div class="product-price">'
                            + '<div class="pull-right"><a href="detalle_producto.php#' +  + data[i].id +'" class="btn btn-info btn-sm" role="button">Ver</a></div>'
                            + '<div class="pricetext">$'+ data[i].precio + '</div></div>'
                            + '<div class="col-separador-s"></div>'
                            + '</div>'
                      + '</div>'

                    $('#listado_tienda').append(data);
                }
            }
        });

I can't find out why it brings only the first object and the rest of the results (a lot) are undefined.

Answer 1

It is happening because you are setting your data (response result) to empty after first loop. So change:

var data = ''
                  + '<div class="col-xs-6 col-md-4 column productbox">'
                        + '<a href="detalle_producto.php#' +  + data[i].id +'">'
                            + '<img src="https://unsplash.it/270/270/?random=4" class="img-responsive">'
                        + '</a>'
                        + '<div class="product-info">'
                        + ' <div class="product-title"><a href="detalle_producto.php#' +  + data[i].id +'">' + data[i].titulo + '</a></div>'
                        + '<div class="product-price">'
                        + '<div class="pull-right"><a href="detalle_producto.php#' +  + data[i].id +'" class="btn btn-info btn-sm" role="button">Ver</a></div>'
                        + '<div class="pricetext">$'+ data[i].precio + '</div></div>'
                        + '<div class="col-separador-s"></div>'
                        + '</div>'
                  + '</div>'

                $('#listado_tienda').append(data);

to

var dataHtml= ''
                  + '<div class="col-xs-6 col-md-4 column productbox">'
                        + '<a href="detalle_producto.php#' +  + data[i].id +'">'
                            + '<img src="https://unsplash.it/270/270/?random=4" class="img-responsive">'
                        + '</a>'
                        + '<div class="product-info">'
                        + ' <div class="product-title"><a href="detalle_producto.php#' +  + data[i].id +'">' + data[i].titulo + '</a></div>'
                        + '<div class="product-price">'
                        + '<div class="pull-right"><a href="detalle_producto.php#' +  + data[i].id +'" class="btn btn-info btn-sm" role="button">Ver</a></div>'
                        + '<div class="pricetext">$'+ data[i].precio + '</div></div>'
                        + '<div class="col-separador-s"></div>'
                        + '</div>'
                  + '</div>'

                $('#listado_tienda').append(dataHtml);

Answer 2

You redefine data object with var data = ''. So change the name.