Json(jquery) y php al recorrer datos.. devueltos.

xpapachox · #1 (**permalink**) 10/01/2012, 13:42

Hola a todos..
Bueno.. he estado.. revisando un poco del ajax de jquery y me toque. con un duda..

Como podria hacer para Recorrer los datos devueltos. del ajax tipo JSON..

En este caso me retorna un arreglo.. convertido a json... pero como ven la parte comentada de abajo.. solo puedo acceder a ellos 1 a 1..
como podria para mostrar listado en una tabla.. o algo asi...

Código HTML:

$(function(){
                $.getJSON('php_datos/dato_jason_2.php',respuesta);

                function respuesta(data){
                    var verHTML='Los 2 primeros Cliente: <br />';
                    verHTML+='------------------------------<br >';
//                    verHTML+='Cliente1:<br />';
//                    verHTML+='Codigo:'+data.cli1.codigo+' | '+'Nombre:'+data.cli1.nombre+' | '+'Correo:'+data.cli1.correo+'<br />';
//                    verHTML+='Cliente1:<br />';
//                    verHTML+='Codigo:'+data.cli2.codigo+' | '+'Nombre:'+data.cli2.nombre+' | '+'Correo:'+data.cli2.correo+'<br />';
                    //$('#con').html(verHTML);

                    var count=data.size;
                    var cli="";
                    for(var i=1;i<=count;i++){                
                        cli="cli"+i
                        verHTML+='Codigo:'+data.cli.codigo+' | '+'Nombre:'+data.cli.nombre+' | '+'Correo:'+data.cli.correo+'<br />';
                    }
                  
                    $('#con').html(verHTML);
                }

            });

Si hay alguna otra forma de retornar esa lista de arreglos... =/
Espero su ayuda.

linuxzero · #2 (**permalink**) 10/01/2012, 13:45

postea la parte del php cuando generas el vector al cual despues le aplicas el json_encode()

xpapachox · #3 (**permalink**) 10/01/2012, 14:01

Hola..
A cabo de cambiar.. las lineas donde se volvia a llenar el array
"$lista["cli1"]","$lista["cli2"]".. Lo deje vacio..

$lista["cli1"] = array ( 'codigo' => 1001,

Lo deje vacio como esta abjo..

<?php

$lista[] = array ( 'codigo' => 1001,
'nombre' => 'Rudas Diaz, Amado',
'telefono' => '153-4526',
'direccion' => 'Jr.Lima 3110',
'correo' => '[email protected]',
'imagen' => '1001.jpg',
'estado' => true
);
$lista[] = array ( 'codigo' => 1002,
'nombre' => 'Lopez Carrion, Victoria',
'telefono' => '526-4589',
'direccion' => 'Av.Peru 8569',
'correo' => '[email protected]',
'imagen' => '1002.jpg',
'estado' => true
);
echo json_encode($lista);
?>

y en el Ajax.. ahora si puede mostrame la longitud.
Pero ahora como haria para mostrar toda la lista del arreglo..(ya sea en una tabla)

$(function(){
$.getJSON('php_datos/dato_jason_2.php',respuesta);

function respuesta(data){
alert(data.length)
}

});

xpapachox · #4 (**permalink**) 10/01/2012, 15:04

xD

Bueno yo mismo me respondo... haber si alguien le sirve...

Ahi el codigo completo.

1.Los datos de la pagina php.

<?php
$lista[] = array ( 'codigo' => 1001,
'nombre' => 'Rudas Diaz, Amado',
'telefono' => '153-4526',
'direccion' => 'Jr.Lima 3110',
'correo' => '[email protected]',
'imagen' => '1001.jpg',
'estado' => true
);
$lista[] = array ( 'codigo' => 1002,
'nombre' => 'Lopez Carrion, Victoria',
'telefono' => '526-4589',
'direccion' => 'Av.Peru 8569',
'correo' => '[email protected]',
'imagen' => '1002.jpg',
'estado' => true
);

echo json_encode($lista);

?>
----------------
2.La pagina del Ajax.
<html>
<head>
<script src="js/jquery-1.4.2.min.js" ></script>

<script>
$(function(){
$.getJSON('php_datos/dato_jason_2.php',respuesta);

function respuesta(data){
var cant=data.length; //aca capturamos el tamaño del arreglo devuelto.
var ihtml="<table border=1 cellspacing=0 cellpadding=0>"; //creamos nuevo elemento tabla
for(var i=0;i<cant;i++){
ihtml+="<tr><td>"+data[i]['codigo']+"</td><td>"+data[i]['nombre']+"</td></tr>"; //lista de datos
}
ihtml+="</table>";

$("#con").html(ihtml); // aca es donde mostramos la lista de datos.

}

});
</script>
</head>
<body>
<form>
<div id="con"></div>
</form>
</body>
</html>

xpapachox · #5 (**permalink**) 10/01/2012, 15:05

Espero les sirva... :D

xpapachox · #6 (**permalink**) 10/01/2012, 15:38

Bueno aca les dejo otra forma de recorrer un arreglo asociativo devuelto como tipo de dato JSON en el ajax JQUERY. Pero ahora con la funcion "each" de JQUERY.

En este

1.codigo php.
<?php
$lista["cli1"] = array ( 'codigo' => 1001,
'nombre' => 'Rudas Diaz, Amado',
'telefono' => '153-4526',
'direccion' => 'Jr.Lima 3110',
'correo' => '[email protected]',
'imagen' => '1001.jpg',
'estado' => true
);
$lista["cli2"] = array ( 'codigo' => 1002,
'nombre' => 'Lopez Carrion, Victoria',
'telefono' => '526-4589',
'direccion' => 'Av.Peru 8569',
'correo' => '[email protected]',
'imagen' => '1002.jpg',
'estado' => true
);
echo json_encode($lista);
?>

2.pagina que del ajax..

<html>
<head>
<script src="js/jquery-1.4.2.min.js" ></script>

<script>
$(function(){
$.getJSON('php_datos/dato_jason_3.php',respuesta);

function respuesta(data){
var ihtml="";
var ihtml="<table border=1 cellspacing=0 cellpadding=0>";
//en este caso cliente contendra a los objetos principales "cli1","cli2",etc
//y cliinfo contendra los valores de cada objeto...

$.each(data,function(cliente,cliinfo){
ihtml+="<tr><td>"+cliinfo.codigo+"</td><td>"+cliinfo.nombre+"</td><td>"+cliinfo.correo+"</td></tr>";
});
ihtml+="</table>";
$("#con").html(ihtml);

}

});
</script>
</head>
<body>
<form>
<div id="con"></div>
</form>
</body>
</html>

................................
Espero les sirva.......
................................

linuxzero · #7 (**permalink**) 11/01/2012, 04:59

Me alegro que lo hayas podido solucionar ;) y ademas de mostrar tu solucion