Cargando archivo JSON local

322

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

javascript jquery json firebug local-files Patrick Browne
fuente
Cuando devuelve una JSONcadena, ya está recuperando un objeto javascript, no es necesario usarlo eval().
yoda
1
¿Cómo se llama un archivo json "local"? local en el navegador o el servidor?
seppo0010
2
No nos has dado suficientes detalles. El archivo test.jsonno especifica ninguna ruta, por lo que es un URI relativo, relativo a la ubicación de la página que accede a él. Entonces, como @ seppo0010 dice que será local para el servidor si la página está en un servidor remoto en algún lugar y será relativo a su computadora si la página está en su sistema de archivos local al que accede el file://protocolo.
hippietrail

Respuestas:

292

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

$.getJSON("test.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});
seppo0010
fuente
47
¿Realmente puedes acceder a un archivo local?
maasha
3
No, no puede ser un archivo, pero debe ser servido por el servidor web.
Kris Erickson
15
Absolutamente correcto. La seguridad de Chromes es mucho más estricta que Firefox u otros. Cargar cualquier cosa usando xhr, Josn, Xml, etc. está prácticamente bloqueado en Chrome con la excepción de una o dos cosas.
Shawty
1
Intenté esto, pero no tuve suerte. No hay error en la consola también :(
Govind Kailas
11
Recomiendo usar myjson.com para cargar su archivo local y acceder a él desde el navegador Chrome.
Programador químico el
167

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 la memoria caché.

Más 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/

Ehvince
fuente
44
Si está haciendo esto con broma, recuerde hacerlo jest.dontMock('./data.json');o el resultado estará vacío. Puede ser útil para alguien por ahí :)
Håvard Geithus
1
¿Cuál es el contexto de este código? ¿Qué hacer con json?
Drazen Bjelovuk
44
Proporcione un ejemplo completo: recibo un error:has not been loaded yet for context: _. Use require([])
shaijut
2
require no funciona en el navegador porque es el módulo node.js. si OP quiere cargarlo en el navegador, debe usar fetch es la solución correcta.
sniffingdoggo
1
Sí, require es para el nodo, pero requireJS también se puede usar en los navegadores: "RequireJS es un cargador de archivos y módulos de JavaScript. Está optimizado para su uso en el navegador, pero se puede usar en otros entornos de JavaScript, como Rhino y Node. "
Por Quested Aronsson
97

De una manera más moderna, ahora puede usar la API Fetch :

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

Todos los navegadores modernos son compatibles con Fetch API. (¡Internet Explorer no lo hace, pero Edge sí!)

fuente:

aloisdg se muda a codidact.com
fuente
1
Al usar la API Fetch, ¿todavía tiene prohibido acceder a los archivos locales, a menos que desactive una configuración de seguridad?
LarsH
3
@LarsH Aparentemente sí, lo intenté esta mañana y fetch api no puede leer un archivo json local con el archivo: // esquema. Este enfoque se ve muy limpio, pero no puede usarlo para archivos locales
keysl
1
@keysl OK, supongo que probablemente sea así por razones de seguridad. (Y tiene razón, quise decir "prohibido acceder a los archivos a través del file://esquema.) Pero es un enfoque limpio y agradable. He comenzado a usarlo gracias a esta respuesta.
LarsH
No puede acceder a los archivos locales con la API de recuperación
anton zlydenko
89

Si desea permitir que el usuario seleccione el archivo json local (en cualquier parte del sistema de archivos), la siguiente solución funciona.

Utiliza 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 sobre FileReader: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Trausti Kristjansson
fuente
44
La API FileReader no es compatible con IE 8 o 9, pero todos los demás navegadores están bien: caniuse.com/#search=filereader
northben
Funciona perfecto en Chrome, verá sus datos ennewArr
Belter
Esta respuesta es agradable y un poco diferente porque no usa jQuery.
DigitalDesignDj
78

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

Debo mencionar que su tamaño de almacenamiento dinámico (en Chrome) es de aproximadamente 4 GB, por lo que si sus datos son más grandes que eso, debe encontrar otro método. Si desea verificar otro navegador intente esto:

window.performance.memory.jsHeapSizeLimit / 1024 / 1024 / 1024 + " GBs"
// "4.046875 GBs"
jwerre
fuente
tienes razón en que AMD funcionaría, pero no creo que AMD sea la solución correcta aquí. lo más simple es usar $ .getJSON. gracias
Patrick Browne
77
@PatrickBrowne sí, getJSON es una buena solución, pero creo que en muchos casos te encontrarás con un problema de dominio cruzado (por ejemplo, cargando los datos de S3).
jwerre
Encontré que esta es la solución más simple para mí. El archivo JSON se ve casi igual, por lo que no hay desorden adicional (solo un "var xyz =" en la parte superior del archivo). Nadie quiere un gran archivo de datos en su código.
cslotty
Esto está mal en muchos niveles, no entiendo cómo tiene tantos votos, aquí explica más si alguien quiere ver codepen.io/KryptoniteDove/post/… "Muchos ejemplos evidenciarán que puede acceder a los datos con un función simple como la siguiente. De hecho, lo que esto no es cargar un documento JSON sino crear un objeto Javascript. Esta técnica no funcionará para archivos JSON verdaderos ".
lesolorzanov
1
Honestamente, esta es una gran solución si solo tiene algunos datos preestablecidos y desea publicar una página estática
Evan Pu
19

Versión ES5

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

xgqfrms
fuente
@Pier si utiliza un servidor de aplicaciones local como Tomcat o Xampp o Jboss. el trabajo de guión
Mirko Cianfarani
@MirkoCianfarani de hecho porque no está utilizando el file:///protocolo y el archivo ya no puede considerarse local.
Muelle
¡@xgqfrms Fetch API es increíble!
xgqfrms
2
//xobj.status es entero xobj.status === "200" debe ser xobj.status === 200
yausername
@yausername tienes razón, lo siento por ese tipo de estado de error y se ha corregido.
xgqfrms
14

No puedo creer cuántas veces se ha respondido esta pregunta sin comprender y / o abordar el problema con el código real del Cartel original. Dicho esto, soy un principiante (solo 2 meses de codificación). Mi código funciona perfectamente, pero siéntase libre de sugerir 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 hacerlo es envolver $ .ajax en una función. No puedo tomar el crédito por este, 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 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"
}
CucharaHonda
fuente
11

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

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

webpack 2 <usa el json-loadervalor predeterminado para los .jsonarchivos.

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 que funcione, primero tuve que declarar el módulo. Espero que esto ahorre algunas horas para alguien.

declare module "json-loader!*" {
  let json: any;
  export default json;
}

...

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

Si tratara de omitir loaderdesde json-loaderque tengo el siguiente error de webpack:

CAMBIO DE INTERRUPCIÓN: 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

Ogglas
fuente
1
Fácil y directo.
Our_Benefactors
No puede usar la declaración de importación es6 cuando la página web está cargada con el archivo: protocolo.
Onno van der Zee
6

Probar 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);
});
Samich
fuente
4

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>
TechSpud
fuente
2
Esto no parece muy reutilizable. Por ejemplo, si un servidor remoto sirve el archivo json, el tiempo de espera de 100 ms puede no ser suficiente para la carga. Y como el tiempo depende de la velocidad de conexión del cliente, deberá establecer un tiempo de espera muy largo para los clientes con conexión lenta. En resumen, setTimeout no debe usarse para esperar la carga de un recurso.
Kenny806
1
Kenny806: está destinado a resolver un problema específico: cargar recursos locales (para una página web no alojada), lo que significa que no es muy reutilizable. Existen miles de soluciones de carga de recursos para páginas alojadas en la web. Esta no es la solución, es una solución. Es realmente sencillo cambiar el tiempo de espera. Al eliminar el tiempo de espera, ¿estás sugiriendo que una espera infinita es aceptable?
TechSpud
2
No estoy sugiriendo una espera infinita, sugiero usar una técnica que le permita reaccionar a la carga del archivo tan pronto como termine. Mi problema con el tiempo de espera es que siempre debes esperar a que termine. Incluso si el archivo se hubiera cargado en 10 ms, aún esperaría 100 ms. Y sí, ajustar el tiempo de espera es fácil, pero lo que sugiere es cambiar el código cada vez que desee cargar un archivo diferente o cuando cambie el tamaño del archivo (para optimizar la espera). Tal solución está mal en mi humilde opinión y puede causar muchos dolores de cabeza en el futuro, especialmente cuando alguien más intenta usarla.
Kenny806
Cualquiera que use este script debe usarlo como base para sus propios scripts. Tiene derecho a su opinión sobre si este guión es incorrecto. ¿Por qué no sugerir una solución alternativa? Esto definitivamente no funcionará para todos los casos de uso. Funcionó para mí, cargando un archivo local desde una página html local. Compartí mi solución a esta pregunta, con la esperanza de que ayude a alguien más. ¿Estás intentando cargar un recurso local? ¿Por qué no pasar el valor de tiempo de espera como variable, en función del archivo que está cargando? Ajax en archivos locales es bastante limitado.
TechSpud
1
Puede que sea mejor usar onreadystatechange u onload y asignarles una función. script.onload = nombre de función;
Shane Best el
4

En TypeScript puede usar la importación para cargar archivos JSON locales. Por ejemplo, cargar un font.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 lanzamiento del mecanografiado: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html

teh.fonsi
fuente
Puede escribir con más detalles porque la respuesta es un poco poco comprensible.
Bay
3

En angular (o cualquier otro marco), puede cargar usando http get Lo uso de esta manera:

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

Espero que esto ayude.

rajkiran
fuente
3

Lo que hice fue editar un poco el archivo JSON.

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;

Luego,

import JsonObj from './myfile.js';

Supun Kavinda
fuente
3

Si está utilizando una matriz local para JSON, como mostró en su ejemplo en la pregunta (test.json), entonces puede usar el parseJSON()método de JQuery ->

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

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

Casa del pastor
fuente
2 
$.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_);
                      }
                 });


             }
  });
Karhan Vijay
fuente
1

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 su archivo json original (test.json) sin modificaciones, ya que en su lugar trabajará con el nuevo archivo jsonp (test.jsonp). El nombre en el contenedor 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 secuencia de comandos para contener el JSON devuelto. Esto hará que los datos JSON devueltos estén disponibles para 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 mediante inyección de script. Tenga en cuenta que no podemos usar jQuery aquí para agregar el script al encabezado del documento, ya que IE no es compatible con el método jQuery .append. El método jQuery comentado en el código a continuación funcionará en otros navegadores que admitan 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 contenedor jsonp) para obtener los datos de 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
}

Ahora se puede acceder a los datos json mediante 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 puede cargarse localmente o desde un servidor usando las mismas funciones. Como beneficio adicional, jsonp ya está en un formato amigable entre dominios 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.

Epifanía
fuente
1

Puedes poner tu json en un archivo javascript. Esto se puede cargar localmente (incluso en Chrome) utilizando la getScript()función de 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 se declara y se asigna en el archivo js.

Victor Stoddard
fuente
0

No he encontrado ninguna solución usando la biblioteca de cierre de Google. Entonces, solo para completar la lista para visitantes futuros, así es como carga un JSON desde un archivo local con la biblioteca Closure:

goog.net.XhrIo.send('../appData.json', function(evt) {
  var xhr = evt.target;
  var obj = xhr.getResponseJson(); //JSON parsed as Javascript object
  console.log(obj);
});
Kenny806
fuente
0 

json_str = String.raw`[{"name": "Jeeva"}, {"name": "Kumar"}]`;
obj = JSON.parse(json_str);

console.log(obj[0]["name"]);
Expandir fragmento

Hice esto para mi aplicación cordova, como creé un nuevo archivo javascript para el JSON y pegué los datos de JSON y String.rawluego los analicé conJSON.parse

Jeeva
fuente
Si es un archivo javascript, ¿por qué hacer un objeto así y no simplemente usar JavaScript Object Notation(JSON): obj = [{"name": "Jeeva"}, {"name": "Kumar"}]
Nuno André
Lo usé porque obtuve algunos datos json usando ajax, que vino como una cadena, así que lo uso JSON.parsepara convertir a un objeto JavaScript
Jeeva
0 
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 primero 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 arriba.

Feng Zhang
fuente
2
Explique su solución en lugar de simplemente pegar el código. Solo una solución que explique cómo resolvió el problema ayudará a la comunidad.
gmuraleekrishna
Nota: Requiere InternetExplorer
Sancarn
0

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, '&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>
Bishwas Mishra
fuente
-4

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

Transforme el archivo JSON en 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]')
sytrus
fuente