JQuery - mostrar datos extraidos de un json mediante ajax

 
Vista:

mostrar datos extraidos de un json mediante ajax

Publicado por Sam (46 intervenciones) el 21/02/2015 18:00:00
Hola amigos, veran tengo los siguientes dos script que, sé, que funcionan bien siempre y cuando el archivo desde donde se extraen los datos, solo tengan los datos de un solo usuario , pero no funciona cuando son datos de varios usuarios.

Me explico , este es el codigo de los 2 script ajax:

escript 1:

<script type="text/javascript" language="javascript">

$(document).ready(function() {

$("#cargar_datos").click(function(event){

$.getJSON('patatas.js', function(datos) {

$('#info').html('<p>Nombre: ' + datos.nombre + '</p>');
$('#info').append('<p>Edad : ' + datos.edad+ '</p>');
$('#info').append('<p>Nacionalidad: ' + datos.nacionalidad+ '</p>');

$('#info').append('<p>Altura: ' + datos.altura+ '</p>');
$('#info').append('<p>Peso: ' + datos.peso+ '</p>');
$('#info').append('<p>Pasatiempos: ' + datos.pasatiempos+ '</p>');

$('#info').append('<p>Soltero: ' + datos.soltero+ '</p>');
$('#info').append('<p>Dirección: ' + datos.direccion.calle +
datos.direccion.numero + datos.direccion.pais +'</p>');

});

});

});

</script>


<div id="info"></div>

<input type="button" id="cargar_datos" value="cargar datos json" />



y script 2:


<script>

$(document).ready(function(){

$("#cargando_datos").click(function(){

$.getJSON("patatas.js", function(result){

$.each(result, function(i, field){
$("#cargando_informacion").append(field + " ");
});
});

});

});

</script>


<input type="button" id="cargando_datos" value="cargando datos json" />

<div id="cargando_informacion"></div>



bien ahora el archivo donde se encuentra la informacion de un usuario solo (con el cual los dos script responden bien):

{
"nombre":"Fulano Probencio",
"edad":27,
"nacionalidad":"Chileno",
"altura":"172 cm",
"peso":75,
"pasatiempos":["Polo","Cricket","Ski","Drafting","Gaming"],
"soltero":"si",
"direccion":{
"calle":"Ave. Siempre Viva",
"numero":"123",
"pais":"México"
}
}


ahora bien, si dicho archivo donde se encuentran los datos del usuario , fueran de varios usuarios entonces no funcionan ninguno de los dos scripts:

{
"personas": [
{
"nombre": "Fulano Probencio",
"edad": 27,
"nacionalidad": "Chileno",
"altura": "172 cm",
"peso": 75,
"pasatiempos": [
"Polo",
"Cricket",
"Ski",
"Drafting",
"Gaming"
],
"soltero": true,
"direccion": {
"calle": "Ave. Siempre Viva",
"numero": "123",
"pais": "México"
}
},
{
"nombre": "Otro Fulano",
"edad": 22,
"nacionalidad": "Argentino",
"altura": "178 cm",
"peso": 72,
"pasatiempos": [
"Pintar",
"Programar",
"Scuba Diving"
],
"soltero": true,
"direccion": {
"calle": "Ave. Siempre Viva",
"numero": "123",
"pais": "México"
}
},
{
"nombre": "Amiga Fulana",
"edad": 25,
"nacionalidad": "Cubana",
"altura": "167 cm",
"peso": 55,
"pasatiempos": [
"Natación",
"Alpinismo",
"Cinéfila",
"Socializar",
"Gaming"
],
"soltero": true,
"direccion": {
"calle": "Cerro del Estudiante",
"numero": "456",
"pais": "Argentina"
}
}
]
}


Si pudieran ayudarme les estaria muy agradecido.

Un saludo
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

mostrar datos extraidos de un json mediante ajax

Publicado por MMan (2 intervenciones) el 21/02/2015 19:04:46
obviamente... no cualquier codigo va a funcionar con cualquier ESTRUCTURA json

dependiendo como esta formado tus datos (JSON) cuantos niveles tiene.. debes adaptar tu codigo a esa estructura/niveles

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
"personas": [
='editor_indent'>{
"nombre": "Fulano Probencio",
"edad": 27,
"nacionalidad": "Chileno",
"altura": "172 cm",
"peso": 75,
='editor_indent'>"pasatiempos": [
"Polo",
"Cricket",
"Ski",
"Drafting",
"Gaming"
],
"soltero": true,
='editor_indent'>"direccion": {
"calle": "Ave. Siempre Viva",
"numero": "123",
"pais": "México"
}
},
 
 
.....
.... mas personas
....
 
}

....

asi vengan 1 o varias "personas" tu json deberia ser UN solo formato, (normalmente el mas complejo, por que obviamente el "simple" no te serviria para contener los datos de muchos)

a menos que tu webservice te entrege 2 formatos distintos, tendrias que hacer doble trabajo.. 1 script para cada uno.. y el script para el formato 1,, no podra ser usado para el formato2 y viceversa

cada script SOLO puede ser usado para un formato/estructura especifico

-------------------
[ ] corchetes (o parentesis cuadrados / square brackets ) = array (se recorre item por item )
{ } llaves ( o parentesis cursivos /curly brackets ) = objeto
------------------
viendo esos datos.. tienes

RAIZ
--- Personas [ array ]
------ Pasatiempos [ array ]
------ Direccion

------------------

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<script>
 
$(document).ready(function(){
 
='editor_indent'>$("#cargando_datos").click(function(){
 
='editor_indent'>$.getJSON("patatas.js", function(result){
 
// result es el RAIZ
// dentro de raiz esta el array PERSONAS
 
='editor_indent'>$.each(result.personas, function(){
 
      // dentro de personas tienes: nombre edad nacionalidad etc etc
     $("#cargando_informacion").append(this.nombre + " ");
     $("#cargando_informacion").append(this.edad + " ");
     $("#cargando_informacion").append(this.nacionalidad + " ");
   .....
    .......
     ......
   // dentro de personas tienes un array Pasatiempos (  esta entre [  ]  )
   $.each(this.pasatiempos, function(indice, valor){
        // lista de pasatiempos
   });
 
   // dentro de personas tienes otro objeto Direccion
   $.each(this.direccion, function () {
     $("#cargando_informacion").append(
       this.calle +
       this.numero +
       this.pais );
   } );
});
});
 
});
 
});
 
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

mostrar datos extraidos de un json mediante ajax

Publicado por sam (46 intervenciones) el 21/02/2015 19:36:21
mman, grancias por estar ayudandome , me esta quedando mas claro con tu explicacion de veras.

pero ocurre algo, el primer boton llamado "cargar datos json" sigue sin funcionar con el codigo que me dices.

y respecto al segundo boton llamado "cargando datos json" solo se carga un solo usuario y cuando le hago click al boton por segunda vez entonces me vuelve a cargar los mismos datos del mismo usuario seguidamente.


la idea es que me muestre la lista de todos los usuarios con sus datos.

pero se me resiste.

como digo solo me funciona cuando meto datos de un solo usuario

help !!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

mostrar datos extraidos de un json mediante ajax

Publicado por MMan (2 intervenciones) el 21/02/2015 21:55:27
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 
		<title>sadfsdf</title>
	</head>
	<body>
 
		<button id="bt_cargadatos">Carga Datos</button>
 
		<div id="personas"></div>
 
		<script>
		$(document).ready(function(){
			$("#personas").html("<H2>LISTO PA CARGAR DATOS.... CLICK EL BOTON !!</H2>");
			$("#bt_cargadatos").click(function(){
				$.getJSON("personas.json", function(result){
					// result es el RAIZ // dentro de raiz esta el array PERSONAS
					$.each(result.personas, function(){
						// dentro de personas tienes: nombre edad nacionalidad etc etc 
						var $persona = "";
						$persona = "<div class=\"persona\"><h1>"+this.nombre + "</h1>";
						$persona = $persona + "<p>edad : "+this.edad + "</p>";
						$persona = $persona + "<p>nacion :"+this.nacionalidad + "</p>";
						// ..... ....... ...... 
 
						// dentro de personas tienes un array Pasatiempos ( esta entre [ ] ) 
						var $listapasatiempos ="";
						$.each(this.pasatiempos, function(indice, valor){
							// lista de pasatiempos 
							$listapasatiempos = $listapasatiempos + "<li>"+valor+"</li>";
						});
						$persona = $persona + "<ul>" + $listapasatiempos + "</ul>";
 
						// dentro de personas tienes otro objeto Direccion 
 
						$persona = $persona + "<p>Direccion : "+ this.direccion.calle +" "+ this.direccion.numero +" - " + this.direccion.pais +"</p></div>";
 
 
						$("#personas").append($persona);
 
					});
				});
			});
		});
		</script>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
{
"personas": [
	{
		"nombre": "Fulano Probencio",
		"edad": 27,
		"nacionalidad": "Chileno",
		"altura": "172 cm",
		"peso": 75,
		"pasatiempos": [
			"Polo",
			"Cricket",
			"Ski",
			"Drafting",
			"Gaming"
		],
		"soltero": true,
		"direccion": {
			"calle": "Ave. Siempre Viva",
			"numero": "123",
			"pais": "México"
		}
	},
	{
		"nombre": "Otro Fulano",
		"edad": 22,
		"nacionalidad": "Argentino",
		"altura": "178 cm",
		"peso": 72,
		"pasatiempos": [
			"Pintar",
			"Programar",
			"Scuba Diving"
		],
		"soltero": true,
		"direccion": {
			"calle": "Ave. Siempre Viva",
			"numero": "123",
			"pais": "México"
		}
	},
	{
		"nombre": "Amiga Fulana",
		"edad": 25,
		"nacionalidad": "Cubana",
		"altura": "167 cm",
		"peso": 55,
		"pasatiempos": [
			"Natación",
			"Alpinismo",
			"Cinéfila",
			"Socializar",
			"Gaming"
		],
		"soltero": true,
		"direccion": {
			"calle": "Cerro del Estudiante",
			"numero": "456",
			"pais": "Argentina"
		}
	}
]
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

mostrar datos extraidos de un json mediante ajax

Publicado por sam (46 intervenciones) el 22/02/2015 11:44:31
Mil y una gracias , super bien explicado, lo he comprendido todo.

Me has aclarado mucho las dudas que tenía.

eres un fenomeno.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar