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
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


0