javascript - leer - Cargando archivo JSON local
leer json externo con javascript (21)
Estoy intentando cargar un archivo JSON local pero no funcionará. 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 los datos no están definidos. En Firebug puedo ver json.responseText y 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?
De una manera más moderna, ahora puedes usar la API Fetch :
fetch("test.json")
.then(response => response.json())
.then(json => console.log(json));
Todos los navegadores modernos soportan Fetch API. (Internet Explorer no lo hace, pero Edge lo hace!)
fuente:
En angular (o en cualquier otro marco), puedes cargar usando http get. Lo uso de esta forma:
this.http.get(<path_to_your_json_file))
.success((data) => console.log(data));
Espero que esto ayude.
Encontró este hilo al intentar (sin éxito) cargar un archivo json local. Esta solución funcionó para mí ...
function load_json(src) {
var head = document.getElementsByTagName(''head'')[0];
//use class, as we can''t reference by id
var element = head.getElementsByClassName("json")[0];
try {
element.parentNode.removeChild(element);
} catch (e) {
//
}
var script = document.createElement(''script'');
script.type = ''text/javascript'';
script.src = src;
script.className = "json";
script.async = false;
head.appendChild(script);
//call the postload function after a slight delay to allow the json to load
window.setTimeout(postloadfunction, 100)
}
... y se usa así ...
load_json("test2.html.js")
... y este es el <head> ...
<head>
<script type="text/javascript" src="test.html.js" class="json"></script>
</head>
Inténtelo de esta manera (pero también tenga en cuenta que JavaScript no tiene acceso al sistema de archivos del cliente):
$.getJSON(''test.json'', function(data) {
console.log(data);
});
Lo que funcionó para mí es lo siguiente:
Entrada:
http://ip_address//some_folder_name//render_output.html?relative/path/to/json/fie.json
Código Javascript:
<html>
<head>
<style>
pre {}
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
</style>
<script>
function output(inp) {
document.body.appendChild(document.createElement(''pre'')).innerHTML = inp;
}
function gethtmlcontents(){
path = window.location.search.substr(1)
var rawFile = new XMLHttpRequest();
var my_file = rawFile.open("GET", path, true) // Synchronous File Read
//alert(''Starting to read text'')
rawFile.onreadystatechange = function ()
{
//alert("I am here");
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
//alert(allText)
var json_format = JSON.stringify(JSON.parse(allText), null, 8)
//output(json_format)
output(syntaxHighlight(json_format));
}
}
}
rawFile.send(null);
}
function syntaxHighlight(json) {
json = json.replace(/&/g, ''&'').replace(/</g, ''<'').replace(/>/g, ''>'');
return json.replace(/("(//u[a-zA-Z0-9]{4}|//[^u]|[^//"])*"(/s*:)?|/b(true|false|null)/b|-?/d+(?:/./d*)?(?:[eE][+/-]?/d+)?)/g, function (match) {
var cls = ''number'';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = ''key'';
} else {
cls = ''string'';
}
} else if (/true|false/.test(match)) {
cls = ''boolean'';
} else if (/null/.test(match)) {
cls = ''null'';
}
return ''<span class="'' + cls + ''">'' + match + ''</span>'';
});
}
gethtmlcontents();
</script>
</head>
<body>
</body>
</html>
Me sorprende que la importación desde es6 no haya sido mencionada (usar con archivos pequeños)
Ej: import test from ''./test.json''
webpack 2 <usa el json-loader como predeterminado para los archivos .json .
https://webpack.js.org/guides/migrating/#json-loader-is-not-required-anymore
Para TypeScript :
import test from ''json-loader!./test.json'';
TS2307 (TS) No se puede encontrar el módulo ''json-loader! ./ suburbs.json''
Para hacerlo funcionar tuve que declarar primero el módulo. Espero que esto ahorre unas horas para alguien.
declare module "json-loader!*" {
let json: any;
export default json;
}
...
import test from ''json-loader!./test.json'';
Si intenté omitir el loader de json-loader , recibí el siguiente error de webpack :
CAMBIO RÁPIDO: ya no se permite omitir el sufijo ''-loader'' cuando se usan cargadores. Debe especificar ''json-loader'' en lugar de ''json'', consulte https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed
No he encontrado ninguna solución utilizando la biblioteca de cierre de Google. Así que solo para completar la lista para futuros visitantes, aquí se explica cómo cargar un JSON desde un archivo local con la biblioteca de cierre:
goog.net.XhrIo.send(''../appData.json'', function(evt) {
var xhr = evt.target;
var obj = xhr.getResponseJson(); //JSON parsed as Javascript object
console.log(obj);
});
No puedo creer cuántas veces se ha respondido a esta pregunta sin entender o abordar el problema con el código real del Póster original. Dicho esto, yo también soy un principiante (solo 2 meses de codificación). Mi código funciona perfectamente, pero no dude en sugerirle cambios. Aquí está la solución:
//include the ''async'':false parameter or the object data won''t get captured when loading
var json = $.getJSON({''url'': "http://spoonertuner.com/projects/test/test.json", ''async'': false});
//The next line of code will filter out all the unwanted data from the object.
json = JSON.parse(json.responseText);
//You can now access the json variable''s object data like this json.a and json.c
document.write(json.a);
console.log(json);
Aquí hay una forma más corta de escribir el mismo código que proporcioné anteriormente:
var json = JSON.parse($.getJSON({''url'': "http://spoonertuner.com/projects/test/test.json", ''async'': false}).responseText);
También puede usar $ .ajax en lugar de $ .getJSON para escribir el código exactamente de la misma manera:
var json = JSON.parse($.ajax({''url'': "http://spoonertuner.com/projects/test/test.json", ''async'': false}).responseText);
Finalmente, la última forma de hacerlo es envolver $ .ajax en una función. No puedo tomar crédito por esto, pero lo modifiqué un poco. Lo probé y funciona y produce los mismos resultados que mi código anterior. Encontré esta solución aquí -> cargar json en variable
var json = function () {
var jsonTemp = null;
$.ajax({
''async'': false,
''url'': "http://spoonertuner.com/projects/test/test.json",
''success'': function (data) {
jsonTemp = data;
}
});
return jsonTemp;
}();
document.write(json.a);
console.log(json);
El archivo test.json que ves en mi código anterior está alojado en mi servidor y contiene el mismo objeto de datos json que él (el póster original) había publicado.
{
"a" : "b",
"c" : "d"
}
Puedes poner tu json en un archivo javascript. Esto se puede cargar localmente (incluso en Chrome) usando la función getScript() jQuery.
archivo map-01.js:
var json = ''{"layers":6, "worldWidth":500, "worldHeight":400}''
main.js
$.getScript(''map-01.js'')
.done(function (script, textStatus) {
var map = JSON.parse(json); //json is declared in the js file
console.log("world width: " + map.worldWidth);
drawMap(map);
})
.fail(function (jqxhr, settings, exception) {
console.log("error loading map: " + exception);
});
salida:
world width: 500
Observe que la variable json está declarada y asignada en el archivo js.
Recientemente D3js es capaz de manejar el archivo json local.
Este es el problema https://github.com/mbostock/d3/issues/673
Este es el parche inorder para que D3 funcione con archivos json locales. https://github.com/mbostock/d3/pull/632
Si desea que el usuario seleccione el archivo json local (en cualquier lugar del sistema de archivos), la siguiente solución funciona.
Utiliza usos 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/
Si está buscando algo rápido y sucio, simplemente cargue los datos en el encabezado de su documento HTML.
data.js
var DATA = {"a" : "b", "c" : "d"};
index.html
<html>
<head>
<script src="data.js" ></script>
<script src="main.js" ></script>
</head>
...
</html>
main.js
(function(){
console.log(DATA) // {"a" : "b", "c" : "d"}
})()
Si está utilizando una matriz local para JSON, como puede ver en su ejemplo en la pregunta (test.json), entonces puede parseJSON método parseJSON de JQuery ->
var obj = jQuery.parseJSON(''{"name":"John"}'');
alert( obj.name === "John" );
getJSON se usa para obtener JSON desde un sitio remoto, no funcionará localmente (a menos que esté usando un servidor HTTP local)
Si tiene Python instalado en su máquina local (o no le importa instalar una), aquí hay una solución independiente del navegador para el problema de acceso al archivo JSON local que utilizo:
Transforme el archivo JSON en un JavaScript creando una función que devuelva los datos como objeto JavaScript. Luego puede cargarlo con la etiqueta <script> y llamar a la función para obtener los datos que desea.
Aquí viene el código de Python
import json
def json2js(jsonfilepath, functionname=''getData''):
"""function converting json file to javascript file: json_data -> json_data.js
:param jsonfilepath: path to json file
:param functionname: name of javascript function which will return the data
:return None
"""
# load json data
with open(jsonfilepath,''r'') as jsonfile:
data = json.load(jsonfile)
# write transformed javascript file
with open(jsonfilepath+''.js'', ''w'') as jsfile:
jsfile.write(''function ''+functionname+''(){return '')
jsfile.write(json.dumps(data))
jsfile.write('';}'')
if __name__ == ''__main__'':
from sys import argv
l = len(argv)
if l == 2:
json2js(argv[1])
elif l == 3:
json2js(argv[1], argv[2])
else:
raise ValueError(''Usage: python pathTo/json2js.py jsonfilepath [jsfunctionname]'')
Tenía la misma necesidad (para 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/
Un enfoque que me gusta usar es rellenar / envolver el json con un objeto literal, y luego guardar el archivo con una extensión de archivo .jsonp. Este método también deja inalterado el archivo json original (test.json), ya que trabajará con el nuevo archivo jsonp (test.jsonp). El nombre en el envoltorio puede ser cualquier cosa, pero debe ser el mismo nombre que la función de devolución de llamada que utiliza para procesar el jsonp. Usaré su test.json publicado como ejemplo para mostrar la adición del contenedor jsonp para el archivo ''test.jsonp''.
json_callback({"a" : "b", "c" : "d"});
A continuación, cree una variable reutilizable con alcance global en su script para mantener el JSON devuelto. Esto hará que los datos JSON devueltos estén disponibles para todas las demás funciones de su script en lugar de solo la función de devolución de llamada.
var myJSON;
Luego viene una función simple para recuperar su json mediante inyección de script. Tenga en cuenta que no podemos usar jQuery aquí para adjuntar el script al encabezado del documento, ya que IE no admite el método .append de jQuery. El método jQuery comentado en el siguiente código funcionará en otros navegadores que sí admiten el método .append. Se incluye como referencia para mostrar la diferencia.
function getLocalJSON(json_url){
var json_script = document.createElement(''script'');
json_script.type = ''text/javascript'';
json_script.src = json_url;
json_script.id = ''json_script'';
document.getElementsByTagName(''head'')[0].appendChild(json_script);
// $(''head'')[0].append(json_script); DOES NOT WORK in IE (.append method not supported)
}
La siguiente es una función de devolución de llamada breve y simple (con el mismo nombre que la envoltura jsonp) para obtener los datos de los resultados json en la variable global.
function json_callback(response){
myJSON = response; // Clone response JSON to myJSON object
$(''#json_script'').remove(); // Remove json_script from the document
}
Las funciones del script ahora pueden acceder a los datos json utilizando la notación de puntos. Como ejemplo:
console.log(myJSON.a); // Outputs ''b'' to console
console.log(myJSON.c); // Outputs ''d'' to console
Este método puede ser un poco diferente de lo que está acostumbrado a ver, pero tiene muchas ventajas. Primero, el mismo archivo jsonp se puede cargar localmente o desde un servidor usando las mismas funciones. Como beneficio adicional, jsonp ya está en un formato compatible con varios dominios y también se puede usar fácilmente con API de tipo REST.
Por supuesto, no hay funciones de manejo de errores, pero ¿por qué necesitaría una? Si no puede obtener los datos json con este método, entonces puede apostar a que tiene algunos problemas dentro del mismo json, y lo verificaría en un buen validador JSON.
ace.webgeeker.xyz
function loadJSON(callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open(''GET'', ''my_data.json'', true);
// Replace ''my_data'' with the path to your file
xobj.onreadystatechange = function() {
if (xobj.readyState === 4 && xobj.status === "200") {
// Required use of an anonymous callback
// as .open() will NOT return a value but simply returns undefined in asynchronous mode
callback(xobj.responseText);
}
};
xobj.send(null);
}
function init() {
loadJSON(function(response) {
// Parse JSON string into object
var actual_JSON = JSON.parse(response);
});
}
Versión ES6
const loadJSON = (callback) => {
let xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open(''GET'', ''my_data.json'', true);
// Replace ''my_data'' with the path to your file
xobj.onreadystatechange = () => {
if (xobj.readyState === 4 && xobj.status === "200") {
// Required use of an anonymous callback
// as .open() will NOT return a value but simply returns undefined in asynchronous mode
callback(xobj.responseText);
}
};
xobj.send(null);
}
const init = () => {
loadJSON((response) => {
// Parse JSON string into object
let actual_JSON = JSON.parse(response);
});
}
$.getJSON es asíncrono, así que debes hacer:
$.getJSON("test.json", function(json) {
console.log(json); // this will show the info it in firebug console
});
json_str = String.raw`[{"name": "Jeeva"}, {"name": "Kumar"}]`;
obj = JSON.parse(json_str);
console.log(obj[0]["name"]);
Hice esto para mi aplicación cordova, como creé un nuevo archivo javascript para JSON y pegué los datos JSON en String.raw luego los JSON.parse con JSON.parse
$.ajax({
url: "Scripts/testingJSON.json",
//force to handle it as text
dataType: "text",
success: function (dataTest) {
//data downloaded so we call parseJSON function
//and pass downloaded data
var json = $.parseJSON(dataTest);
//now json variable contains data in json format
//let''s display a few items
$.each(json, function (i, jsonObjectList) {
for (var index = 0; index < jsonObjectList.listValue_.length;index++) {
alert(jsonObjectList.listKey_[index][0] + " -- " + jsonObjectList.listValue_[index].description_);
}
});
}
});
function readTextFile(srcfile) {
try { //this is for IE
var fso = new ActiveXObject("Scripting.FileSystemObject");;
if (fso.FileExists(srcfile)) {
var fileReader = fso.OpenTextFile(srcfile, 1);
var line = fileReader.ReadLine();
var jsonOutput = JSON.parse(line);
}
} catch (e) {
}
}
readTextFile("C://Users//someuser//json.txt");
En primer lugar, lo que hice fue desde la pestaña de red, registrar el tráfico de red para el servicio y, desde el cuerpo de la respuesta, copiar y guardar el objeto json en un archivo local. Luego, llame a la función con el nombre del archivo local, debería poder ver el objeto json en jsonOutout arriba.