Carregando arquivo JSON local

322

Estou tentando carregar um arquivo JSON local, mas ele não funcionará. Aqui está o meu código JavaScript (usando jQuery:

var json = $.getJSON("test.json");
var data = eval("(" +json.responseText + ")");
document.write(data["a"]);

O arquivo test.json:

{"a" : "b", "c" : "d"}

Nada é exibido e o Firebug informa que os dados são indefinidos. No Firebug eu posso ver json.responseTexte é bom e válido, mas é estranho quando copio a linha:

 var data = eval("(" +json.responseText + ")");

no console do Firebug, ele funciona e eu posso acessar dados.

Alguém tem uma solução?

javascript jquery json firebug local-files Patrick Browne
fonte
Quando você retorna uma JSONstring, você já está recuperando um objeto javascript, não precisa usar eval().
usar o seguinte comando
1
Como você chama um arquivo json "local"? local no navegador ou no servidor?
seppo0010
2
Você não nos deu detalhes suficientes. O arquivo test.jsonnão especifica nenhum caminho, portanto, é um URI relativo, relativo ao local da página que o acessa. Assim como @ seppo0010 diz que será local para o servidor se a página estiver em um servidor remoto em algum lugar e será relativo ao seu computador se a página estiver em seu sistema de arquivos local acessado pelo file://protocolo.
Hippietrail 23/10/12

Respostas:

292

$.getJSON é assíncrono, então você deve fazer:

$.getJSON("test.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});
seppo0010
fonte
47
Você realmente tem permissão para acessar um arquivo local?
maasha
3
Não, não pode ser um arquivo, mas deve ser atendido pelo servidor da web.
Kris Erickson
15
Absolutamente correto. A segurança do Chromes é muito mais rígida que o Firefox ou outros. Carregar qualquer coisa usando xhr, Josn, Xml, etc, está praticamente bloqueado no Chrome, com exceção de uma ou duas coisas.
shawty
1
Eu tentei isso, mas sem sorte. Não há nenhum erro no console também :(
Govind Kailas
11
Eu recomendo usar myjson.com para fazer upload de seu arquivo local e acessá-lo no navegador chrome.
Programador químico
167

Eu tinha a mesma necessidade (para testar meu aplicativo angularjs) e a única maneira que encontrei é usar o require.js:

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

nota: o arquivo é carregado uma vez, outras chamadas usarão o cache.

Mais sobre como ler arquivos com o nodejs: http://docs.nodejitsu.com/articles/file-system/how-to-read-files-in-nodejs

require.js: http://requirejs.org/

Ehvince
fonte
4
Se você estiver fazendo isso com brincadeira, lembre-se de fazer jest.dontMock('./data.json');ou o resultado está vazio. Pode ser útil para alguém lá fora :)
Håvard Geithus
1
Qual é o contexto desse código? Com o que você faz json?
Drazen Bjelovuk
4
Por favor, forneça o exemplo completo: Estou recebendo erro:has not been loaded yet for context: _. Use require([])
shaijut
2
require não está funcionando no navegador porque é o módulo node.js. se o OP quiser carregá-lo no navegador, deve usar a busca é a solução certa.
sniffingdoggo
1
Sim, o require é para o nó, mas o requireJS também pode ser usado nos navegadores: "O RequireJS é um carregador de arquivos e módulos JavaScript. Ele é otimizado para uso no navegador, mas pode ser usado em outros ambientes JavaScript, como Rhino e Node. "
Por Queston Aronsson 14/01
97

De uma maneira mais moderna, agora você pode usar a API de busca :

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

Todos os navegadores modernos oferecem suporte à API de busca. (O Internet Explorer não, mas o Edge sim!)

fonte:

aloisdg movendo-se para codidact.com
fonte
1
Ao usar a API de busca, você ainda está proibido de acessar arquivos locais, a menos que desative uma configuração de segurança?
LarsH 14/05
3
@LarsH Aparentemente sim, eu tentei esta manhã e a api da busca não consegue ler um arquivo json local com o esquema file: //. Esta abordagem parece tão limpo, mas você não pode usá-lo para arquivos locais
keysl
1
@keysl OK, acho que provavelmente deve ser assim por razões de segurança. (E você está certo, eu quis dizer "proibido de acessar arquivos por meio do file://esquema.) Mas é uma abordagem agradável, limpo que eu comecei a usá-lo graças a esta resposta..
Larsh
Você não pode acessar arquivos locais com a API de busca
anton zlydenko 26/03
89

Se você deseja permitir que o usuário selecione o arquivo json local (em qualquer lugar do sistema de arquivos), a solução a seguir funciona.

Ele usa usa FileReader e JSON.parser (e não 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>

Aqui está uma boa introdução ao FileReader: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Trausti Kristjansson
fonte
4
A API FileReader não é suportada no IE 8 ou 9, mas todos os outros navegadores estão OK: caniuse.com/#search=filereader
northben
Funciona perfeitamente no Chrome, você verá seus dados emnewArr
Belter
Esta resposta é boa e um pouco diferente porque não está usando jQuery.
precisa
78

Se você está procurando algo rápido e sujo, basta carregar os dados no cabeçalho do seu 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"}
})();

Devo mencionar que o tamanho do seu heap (no Chrome) é de cerca de 4 GB, portanto, se seus dados forem maiores que isso, você deverá encontrar outro método. Se você quiser verificar outro navegador, tente o seguinte:

window.performance.memory.jsHeapSizeLimit / 1024 / 1024 / 1024 + " GBs"
// "4.046875 GBs"
jwerre
fonte
você está certo de que a AMD funcionaria, mas eu não acho que a AMD seja a solução certa aqui. o mais simples é usar $ .getJSON. graças
Patrick Browne
7
@PatrickBrowne sim, o getJSON é uma boa solução, mas acho que em muitos casos você encontrará um problema entre domínios (carregando os dados do S3, por exemplo).
jwerre
Eu achei que essa era a solução mais simples para mim. O arquivo JSON parece quase o mesmo, portanto, não há confusão extra (apenas uma "var xyz =" na parte superior do arquivo). Ninguém quer um arquivo de grande volume de dados em seu código.
precisa saber é o seguinte
Isso está errado em muitos níveis, eu não entendo como ele tem tantos votos, aqui explica mais se alguém quiser ver codepen.io/KryptoniteDove/post/… "Muitos exemplos demonstram que você pode acessar os dados com um função simples, como a abaixo. Na verdade, o que na verdade não está carregando um documento JSON, mas criando um objeto Javascript. Essa técnica não funcionará para arquivos JSON verdadeiros. "
31718 lesolorzanov
1
honestamente esta é uma ótima solução se você só tem alguns dados pré-enlatados e u quer servir uma página estática
Evan Pu
19

Versão 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);
    });
}

Versão 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 snippet

xgqfrms
fonte
@Pier se você usar um servidor de aplicativos local como Tomcat ou Xampp ou Jboss. o trabalho de script
Mirko Cianfarani
@MirkoCianfarani, de fato, porque você não está usando o file:///protocolo e o arquivo não pode mais ser considerado local.
Pier
A API de busca do @xgqfrms é incrível!
Xgqfrms
2
//xobj.status é um número inteiro xobj.status === "200" deve ser xobj.status === 200
yausername 22/18/18
@yausername você está certo, desculpe-me por esse tipo de estado de erro e ele foi corrigido.
xgqfrms
14

Não consigo acreditar quantas vezes essa pergunta foi respondida sem entender e / ou resolver o problema com o código real do pôster original. Dito isto, eu também sou iniciante (apenas 2 meses de codificação). Meu código funciona perfeitamente, mas fique à vontade para sugerir alterações. Aqui está a solução: 

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

Aqui está uma maneira mais curta de escrever o mesmo código que forneci acima:

var json = JSON.parse($.getJSON({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false}).responseText);

Você também pode usar $ .ajax em vez de $ .getJSON para escrever o código exatamente da mesma maneira:

var json = JSON.parse($.ajax({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false}).responseText);

Finalmente, a última maneira de fazer isso é agrupar $ .ajax em uma função. Não posso receber crédito por este, mas o modifiquei um pouco. Eu testei e funciona e produz os mesmos resultados que o meu código acima. Encontrei esta solução aqui -> carregar json na variável

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

O arquivo test.json que você vê no meu código acima está hospedado no meu servidor e contém o mesmo objeto de dados json que ele (o pôster original) postou.

{
    "a" : "b",
    "c" : "d"
}
SpoonHonda
fonte
11

Estou surpreso que a importação do es6 não tenha sido mencionada (use com arquivos pequenos)

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

O webpack 2 <usa o json-loaderpadrão para .jsonarquivos.

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

Para TypeScript :

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

TS2307 (TS) Não foi possível encontrar o módulo 'json-loader! ./ suburbs.json'

Para fazê-lo funcionar, tive que declarar o módulo primeiro. Espero que isso economize algumas horas para alguém.

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

...

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

Se eu tentasse omitir loadera partir json-loaderEu tenho o seguinte erro de webpack:

BREAKING CHANGE: Não é mais permitido omitir o sufixo 'loader' ao usar carregadores. Você precisa especificar 'json-loader' em vez de 'json', consulte https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

Ogglas
fonte
1
fácil e direto.
Our_Benefactors
Você não pode usar a instrução de importação es6 quando a página da web é carregada com o arquivo: protocolo.
Onno van der Zee
6

Try é assim (mas também observe que o JavaScript não tem acesso ao sistema de arquivos do cliente):

$.getJSON('test.json', function(data) {
  console.log(data);
});
Samich
fonte
4

Encontrei este encadeamento ao tentar (sem êxito) carregar um arquivo json local. Esta solução funcionou para mim ...

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

... e é usado assim ...

load_json("test2.html.js")

... e este é o <head>...

<head>
  <script type="text/javascript" src="test.html.js" class="json"></script>
</head>
TechSpud
fonte
2
Isso não parece muito reutilizável. Por exemplo, se o arquivo json for servido por um servidor remoto, o tempo limite de 100 ms poderá não ser suficiente para carregar. E como o tempo depende da velocidade de conexão do cliente, você teria que definir um tempo limite muito longo para clientes com conexão lenta. Em resumo, setTimeout não deve ser usado para aguardar o carregamento de um recurso.
Kenny806
1
Kenny806 - Destina-se a resolver um problema específico - carregar recursos locais (para uma página da Web não hospedada), o que significa que não é muito reutilizável. Existem milhares de soluções de carregamento de recursos para páginas hospedadas na web. Esta não é a solução, é uma solução. É realmente simples alterar o tempo limite. Ao remover o tempo limite, você está sugerindo que uma espera infinita é aceitável?
TechSpud
2
Não estou sugerindo uma espera infinita, estou sugerindo o uso de uma técnica que permita que você reaja ao carregamento do arquivo assim que terminar. Meu problema com o tempo limite é que você sempre precisa esperar o término. Mesmo se o arquivo tivesse carregado em 10 ms, você ainda esperaria 100 ms. E sim, é fácil ajustar o tempo limite, mas o que você está sugerindo é alterar o código toda vez que você deseja carregar um arquivo diferente ou quando o tamanho do arquivo é alterado (para otimizar a espera). Essa solução está errada no IMHO e pode causar muitas dores de cabeça no futuro, principalmente quando alguém tentar usá-la.
Kenny806
Qualquer pessoa que use esse script deve usá-lo como base para seus próprios scripts. Você tem direito a sua opinião sobre se esse script está errado. Por que não sugerir uma solução alternativa? Definitivamente, isso não funcionará para todos os casos de uso. Funcionou para mim, carregando um arquivo local a partir de uma página html local. Compartilhei minha solução sobre essa questão, na esperança de que isso ajudasse outra pessoa. Você está tentando carregar um recurso local? Por que não passar o valor do tempo limite como uma variável, com base no arquivo que você está carregando? O Ajax nos arquivos locais é bastante limitado.
TechSpud
1
Pode ser melhor usar onreadystatechange ou onload e atribuir-lhes uma função. script.onload = nome da função;
Shane Best
4

No TypeScript, você pode usar a importação para carregar arquivos JSON locais. Por exemplo, carregando um font.json:

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

Isso requer um sinalizador tsconfig --resolveJsonModule:

// tsconfig.json

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

Para obter mais informações, consulte as notas de versão do datilografado: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html

teh.fonsi
fonte
Pode escrever com mais detalhes, porque a resposta é um pouco pouco compreensível.
Bay
3

No angular (ou em qualquer outra estrutura), você pode carregar usando http get, eu uso algo assim:

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

Espero que isto ajude.

rajkiran
fonte
3

O que eu fiz foi editar um pouco o arquivo JSON.

myfile.json => myfile.js

No arquivo JSON, (torne-o uma variável JS)

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

No fim,

export default x;

Então,

import JsonObj from './myfile.js';

Supun Kavinda
fonte
3

Se você estiver usando uma matriz local para JSON - como você mostrou no seu exemplo na pergunta (test.json), será possível o parseJSON()método JQuery ->

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

getJSON() é usado para obter JSON de um site remoto - não funcionará localmente (a menos que você esteja usando um servidor HTTP local)

Manse
fonte
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
fonte
1

Uma abordagem que eu gosto de usar é preencher / envolver o json com um literal de objeto e salvar o arquivo com uma extensão de arquivo .jsonp. Esse método também mantém o arquivo json original (test.json) inalterado, pois você estará trabalhando com o novo arquivo jsonp (test.jsonp). O nome no wrapper pode ser qualquer coisa, mas precisa ser o mesmo nome da função de retorno de chamada usada para processar o jsonp. Usarei seu test.json postado como um exemplo para mostrar a adição do wrapper jsonp para o arquivo 'test.jsonp'.

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

Em seguida, crie uma variável reutilizável com escopo global em seu script para manter o JSON retornado. Isso tornará os dados JSON retornados disponíveis para todas as outras funções em seu script, em vez de apenas a função de retorno de chamada.

var myJSON;

Em seguida, vem uma função simples para recuperar seu json por injeção de script. Observe que não podemos usar o jQuery aqui para anexar o script ao cabeçalho do documento, pois o IE não suporta o método .append do jQuery. O método jQuery comentado no código abaixo funcionará em outros navegadores que suportam o método .append. Está incluído como referência para mostrar a diferença.

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

A seguir, é apresentada uma função de retorno de chamada curta e simples (com o mesmo nome do wrapper jsonp) para obter os dados dos resultados do json na variável global.

function json_callback(response){
    myJSON = response;            // Clone response JSON to myJSON object
    $('#json_script').remove();   // Remove json_script from the document
}

Os dados json agora podem ser acessados ​​por qualquer função do script usando a notação de ponto. Como um exemplo:

console.log(myJSON.a); // Outputs 'b' to console
console.log(myJSON.c); // Outputs 'd' to console

Esse método pode ser um pouco diferente do que você está acostumado a ver, mas tem muitas vantagens. Primeiro, o mesmo arquivo jsonp pode ser carregado localmente ou em um servidor usando as mesmas funções. Como um bônus, o jsonp já está em um formato compatível com vários domínios e também pode ser facilmente usado com APIs do tipo REST.

Concedido, não há funções de tratamento de erros, mas por que você precisaria de uma? Se você não conseguir obter os dados do json usando esse método, pode apostar que tem alguns problemas no próprio json, e eu verificaria isso em um bom validador JSON.

Epifania
fonte
1

Você pode colocar seu json em um arquivo javascript. Isso pode ser carregado localmente (mesmo no Chrome) usando a getScript()função do jQuery .

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

resultado:

world width: 500

Observe que a variável json é declarada e designada no arquivo js.

Victor Stoddard
fonte
0

Não encontrei nenhuma solução usando a biblioteca Closure do Google. Portanto, apenas para completar a lista de futuros visitantes, veja como você carrega um JSON a partir do arquivo local com a 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
fonte
0 

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

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

Fiz isso no meu aplicativo cordova, como se eu tivesse criado um novo arquivo javascript para o JSON e colado os dados do JSON para String.rawdepois analisá-lo comJSON.parse

Jeeva
fonte
Se for um arquivo de javascript, por que um objeto assim e não simplesmente usando JavaScript Object Notation(JSON): obj = [{"name": "Jeeva"}, {"name": "Kumar"}]
Nuno André
Usei-o beause I foi buscar alguns dados JSON usando Ajax, que veio como corda, então eu uso JSON.parsepara converter para um 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");

O que fiz foi, em primeiro lugar, na guia rede, registrar o tráfego de rede para o serviço e, no corpo da resposta, copiar e salvar o objeto json em um arquivo local. Em seguida, chame a função com o nome do arquivo local; você poderá ver o objeto json no jsonOutout acima.

Feng Zhang
fonte
2
Por favor, explique sua solução em vez de apenas colar o código. Somente uma solução explicando como ele resolveu o problema ajudará a comunidade.
gmuraleekrishna
Nota: Requer InternetExplorer
Sancarn
0

O que funcionou para mim é o seguinte:

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
fonte
-4

Se você possui o Python instalado em sua máquina local (ou não se importa de instalar uma), aqui está uma solução independente do navegador para o problema local de acesso a arquivos JSON que eu uso:

Transforme o arquivo JSON em JavaScript criando uma função que retorna os dados como objeto JavaScript. Em seguida, você pode carregá-lo com a tag <script> e chamar a função para obter os dados desejados.

Aí vem o código 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
fonte