Cargando archivo JSON local
Estoy intentando cargar un archivo JSON local pero no funciona. Aquí está mi código JavaScript (usando jQuery):
var json = $.getJSON("test.json");
var data = eval("(" +json.responseText + ")");
document.write(data["a"]);
El archivo test.json:
{"a" : "b", "c" : "d"}
No se muestra nada y Firebug me dice que datano está definido. En Firebug puedo ver json.responseTexty es bueno y válido, pero es extraño cuando copio la línea:
var data = eval("(" +json.responseText + ")");
en la consola de Firebug, funciona y puedo acceder a los datos.
¿Alguien tiene una solución?
$.getJSONes asíncrono por lo que deberías hacer:
$.getJSON("test.json", function(json) {
console.log(json); // this will show the info it in firebug console
});
Tenía la misma necesidad (probar mi aplicación angularjs) y la única forma que encontré es usar require.js:
var json = require('./data.json'); //(with path)
nota: el archivo se carga una vez, las llamadas posteriores utilizarán el caché.
Más información sobre la lectura de archivos con nodejs: http://docs.nodejitsu.com/articles/file-system/how-to-read-files-in-nodejs
require.js: http://requirejs.org/
De una forma más moderna, ahora puedes utilizar la API Fetch :
fetch("test.json")
.then(response => response.json())
.then(json => console.log(json));
Todos los navegadores modernos admiten Fetch API. (Internet Explorer no, ¡pero Edge sí!)
o conasync/await
async function printJSON() {
const response = await fetch("test.json");
const json = await response.json();
console.log(json);
}
fuente:
- Usando buscar
- Recuperar en acción
- Puedo usar...?
- Cómo utilizar Fetch con async/await
Si desea permitir que el usuario seleccione el archivo json local (en cualquier lugar del sistema de archivos), entonces la siguiente solución funciona.
Utiliza FileReader y JSON.parser (y no jquery).
<html>
<body>
<form id="jsonFile" name="jsonFile" enctype="multipart/form-data" method="post">
<fieldset>
<h2>Json File</h2>
<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load' onclick='loadFile();'>
</fieldset>
</form>
<script type="text/javascript">
function loadFile() {
var input, file, fr;
if (typeof window.FileReader !== 'function') {
alert("The file API isn't supported on this browser yet.");
return;
}
input = document.getElementById('fileinput');
if (!input) {
alert("Um, couldn't find the fileinput element.");
}
else if (!input.files) {
alert("This browser doesn't seem to support the `files` property of file inputs.");
}
else if (!input.files[0]) {
alert("Please select a file before clicking 'Load'");
}
else {
file = input.files[0];
fr = new FileReader();
fr.onload = receivedText;
fr.readAsText(file);
}
function receivedText(e) {
let lines = e.target.result;
var newArr = JSON.parse(lines);
}
}
</script>
</body>
</html>
Aquí hay una buena introducción a FileReader: http://www.html5rocks.com/en/tutorials/file/dndfiles/
