Si tengo un archivo llamado JSONnames.json con:JSON + Javascript/jQuery. ¿Cómo importar datos desde un archivo json y analizarlos?
{"employees":[
{"firstName":"Anna","lastName":"Meyers"},
{"firstName":"Betty","lastName":"Layers"},
{"firstName":"Carl","lastName":"Louis"},
]}
¿Cómo puedo usar su contenido en javascript?
Un ejemplo de cómo hacer esto podría ser:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$.getJSON('names.json',function(data){
console.log('success');
$.each(data.employees,function(i,emp){
$('ul').append('<li>'+emp.firstName+' '+emp.lastName+'</li>');
});
}).error(function(){
console.log('error');
});
});
</script>
</head>
<body>
<ul></ul>
</body>
</html>
En el código jQuery, debe tener la propiedad employees.
data.employees[0].firstName
Así sería así.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$.getJSON("names.json", function(data) {
console.log(data);
$('body').append(data.employees[0].firstName);
});
</script>
</body>
</html>
Por supuesto, usted necesitará que la propiedad de la versión no jQuery también, pero que había necesidad de analizar la respuesta JSON en primer lugar.
También tenga en cuenta que document.write está destruyendo toda la página.
Si sigue teniendo problemas, pruebe el $.ajax solicitud completa en lugar de la $.getJSON envoltura.
$.ajax({
url: "names.json",
dataType: "json",
success: function(data) {
console.log(data);
$('body').append(data.employees[0].firstName);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log('ERROR', textStatus, errorThrown);
}
});
Hola acantilados, todavía no funciona para mí. ¿Puedes publicar el código completo? El guión estaba en la cabeza, pero ahora está en el cuerpo y no funcionó. =/ – GarouDan
@GarouDan: No estoy seguro de lo que quiere decir cuando dice que no funciona. ¿Se invocó la devolución de llamada? ¿Estás recibiendo algún error en la consola? –
Si desea utilizar PHP.
<?php
$contents = file_get_contents('names.json');
?>
<script>
var names = <?php echo $contents; ?>
var obj = JSON.parse(names);
//use obj
</script>
Opcionalmente, lo utilizan asíncrono:
<script>
$(document).ready(function(){
$.get("get_json.php?file=names",function(obj){
//use obj here
},'json');
});
</script>
El PHP:
<?php
$filename = $_GET['file'] . '.json';
$data['contents'] = file_get_contents($filename);
echo json_encode($data);
?>
El archivo ya contiene json, ¿por qué json_encode lo que ya está json? Él podría simplemente obtener nombres.json directamente sin la última envoltura de php. – ccKep
Solución interesante xbonez. Intentaré un poco usando jQuery e javascript, pero probablemente esto también solucione mi problema. – GarouDan
thx xbonez, tendré en cuenta esta solución también. – GarouDan
Su archivo JSON no contiene JSON válida. Pruebe lo siguiente en su lugar.
{
"employees":
[
{
"firstName": "Anna",
"lastName": "Meyers"
},
{
"firstName": "Betty",
"lastName": "Layers"
},
{
"firstName": "Carl",
"lastName": "Louis"
}
]
}
Debería ver una respuesta. Salida http://jsonlint.com/
oh. sí. ahora funciona ^^. Muchas gracias. Estaba claro que el problema está en el código jquery. – GarouDan
+1 El JSON no válido fue directo a mi cabeza. –
Usted puede incluir simplemente un archivo Javascript en su HTML que declara su objeto JSON como una variable. Entonces puede acceder a sus datos JSON desde su alcance global de Javascript usando data.employees, por ejemplo.
index.html:
<html>
<head>
</head>
<body>
<script src="data.js"></script>
</body>
</html>
data.js:
var data = {
"employees": [{
"firstName": "Anna",
"lastName": "Meyers"
}, {
"firstName": "Betty",
"lastName": "Layers"
}, {
"firstName": "Carl",
"lastName": "Louis"
}]
}
Debe agregar esta declaración al archivo data.js: "" "" module.exports = data; "" "" De lo contrario, no podrá importar el valor de la variable de datos en ningún otro archivo a través de data.js. –
que había cambiado la pregunta y fija los errores. Ahora creo que podría recibir votaciones y sería una buena referencia para otras personas. – GarouDan