Cargando el archivo JSON local

StackOverflow https://stackoverflow.com/questions/7346563

Pregunta

Estoy tratando de 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?

¿Fue útil?

Solución

$.getJSON es asíncrono, por lo que debes hacer:

$.getJSON("test.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});

Otros consejos

Tenía la misma necesidad (para probar mi aplicación AngularJS), y la única forma en que encontré es usar requerir.js:

var json = require('./data.json'); //(with path)

Nota: El archivo se carga una vez, las llamadas adicionales usarán el caché.

Más sobre leer archivos con NodeJS: http://docs.nodejitsu.com/articles/file-system/how-to-read-files-in-nodejs

requirir.js: http://requirejs.org/

Si desea dejar que el usuario seleccione el archivo JSON local (en cualquier lugar del sistema de archivos), entonces 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 en FileReader: http://www.html5rocks.com/en/tutorials/file/dndfiles/

De una manera más moderna, ahora puedes usar el Buscar una API:

fetch("test.json")
  .then(response => response.json())
  .then(json => console.log(json));

Todos los navegadores modernos admiten la API de Fetch. (Internet Explorer no, pero Edge sí!)

fuente:

Si está buscando algo rápido y sucio, simplemente cargue los datos en la cabeza 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"}
})()

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);
    });
}

No puedo creer cuántas veces se ha respondido esta pregunta sin comprender y/o abordar el problema con el código real del póster original. Dicho esto, soy un principiante (solo 2 meses de codificación). Mi código funciona perfectamente, pero no dude en sugerirle cualquier cambio. 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 hacer esto es envolver $ .AJAX en una función. No puedo tomar el crédito por este, pero lo modificé 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);

los test.json El archivo que ve 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"
}

Me sorprende que la importación de ES6 no se haya mencionado (use con archivos pequeños)

Ex: import test from './test.json'

webpack 2 <usa el json-loader Como predeterminado para .json archivos.

https://webpack.js.org/guides/migrating/#json-loader-is-not-required- anymore

Para Mecanografiado:

import test from 'json-loader!./test.json';

TS2307 (TS) no puede encontrar el módulo 'JSON-Loader! ./ Suburbs.json'

Para que funcionara, tuve que declarar el módulo primero. 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 loader de json-loader Recibí el siguiente error de webpack:

Cambio de ruptura: ya no se le permite omitir el sufijo '-cargador' al usar cargadores. Debe especificar 'json-loader' en lugar de 'json', ver https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-med

Prueba es así (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);
});

Recientemente D3JS es capaz de manejar el archivo JSON local.

Este es el problemahttps://github.com/mbostock/d3/issues/673

Este es el parche en orden para que D3 funcione con archivos JSON locales.https://github.com/mbostock/d3/pull/632

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>

En TypeScript puede usar importar para cargar archivos JSON locales. Por ejemplo, cargando una fuente.json:

import * as fontJson from '../../public/fonts/font_name.json';

Esto requiere una bandera tsconfig - -resolvejsonmodule:

// tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "resolveJsonModule": true,
        "esModuleInterop": true
    }
}

Para obtener más información, consulte las notas de versión de TypeScript: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html

En Angular (o en cualquier otro marco), puede cargar usando HTTP Get I Lo uso de algo así:

this.http.get(<path_to_your_json_file))
 .success((data) => console.log(data));

Espero que esto ayude.

$.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_);
                      }
                 });


             }
  });

Si está utilizando una matriz local para JSON, como mostró en su Exmaple en la pregunta (Test.json), entonces puede ser el parseJSON Método de jQuery ->

  var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );

getJSON se utiliza para obtener JSON de un sitio remoto: no funcionará localmente (a menos que esté utilizando un servidor HTTP local)

No he encontrado ninguna solución utilizando la biblioteca de cierre de Google. Entonces, para completar la lista para futuros visitantes, así es como carga un JSON del 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);
});

Un enfoque que me gusta es usar/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 su archivo JSON original (test.json) sin alterar, ya que trabajará con el archivo nuevo 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é tu Test.json publicado como ejemplo para mostrar la adición de Wrapper JSONP para el archivo 'test.jsonp'.

json_callback({"a" : "b", "c" : "d"});

A continuación, cree una variable reutilizable con el alcance global en su script para mantener el JSON devuelto. Esto pondrá a disposición los datos JSON devueltos a todas las demás funciones en 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 por inyección de script. Tenga en cuenta que no podemos usar jQuery aquí para agregar el script al cabezal del documento, ya que IE no admite el método jQuery .append. El método jQuery comentado en el código a continuación funcionará en otros navegadores que 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)
}

Lo siguiente es una función de devolución de llamada corta y simple (con el mismo nombre que el Wrapper JSONP) para obtener los datos de resultados de 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
}

Ahora se puede acceder a los datos JSON por cualquier función del script 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 utilizando las mismas funciones. Como beneficio adicional, JSONP ya está en un formato de dominio cruzado y también se puede usar fácilmente con API de tipo REST.

De acuerdo, no hay funciones de manejo de errores, pero ¿por qué necesitarías una? Si no puede obtener los datos JSON utilizando este método, puede apostar que tiene algunos problemas dentro del JSON en sí, y lo comprobaría en un buen validador JSON.

Puede poner su JSON en un archivo JavaScript. Esto se puede cargar localmente (incluso en Chrome) usando JQuery's getScript() función.

MAP-01.JS ARCHIVO:

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);
    });

producción:

world width: 500

Observe que la variable JSON se declara y asigna en el archivo JS.

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 de JavaScript para el JSON y pegé los datos JSON en String.raw luego analizarlo con JSON.parse

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");

Lo que hice fue, en primer lugar, desde la pestaña de red, registrar el tráfico de red para el servicio, y desde el cuerpo de 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 anterior.

Lo que funcionó para mí es lo siguiente:

Aporte: 

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, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    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>

Lo que hice fue editar el archivo JSON pequeño.

myfile.json => myfile.js

En el archivo JSON, (conviértalo en una variable JS)

{name: "Whatever"} => var x = {name: "Whatever"}

Al final,

export default x;

Después,

import JsonObj from './myfile.js';

Si tiene Python instalado en su máquina local (o no le importa instalar una), aquí hay una solución alternativa independiente del navegador para el problema local de acceso a archivos JSON que uso:

Transforme el archivo JSON en un JavaScript creando una función que devuelva los datos como objeto JavaScript. Entonces puedes cargarlo conu003Cscript> tag and call the function to get the data you want.

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]')
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top