Caricamento file JSON locale

322

Sto provando a caricare un file JSON locale ma non funzionerà. Ecco il mio codice JavaScript (usando jQuery:

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

Il file test.json:

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

Non viene visualizzato nulla e Firebug mi dice che i dati non sono definiti. In Firebug posso vedere json.responseTexted è buono e valido, ma è strano quando copio la riga:

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

nella console di Firebug funziona e posso accedere ai dati.

Qualcuno ha una soluzione?

javascript  jquery  json  firebug  local-files 
— Patrick Browne
fonte
Quando restituisci una JSONstringa, stai già recuperando un oggetto JavaScript, non è necessario utilizzarlo eval().
— yoda,
1
Come si chiama un file json "locale"? locale sul browser o sul server?
— seppo0010
2
Non ci hai fornito abbastanza dettagli. Il file test.jsonnon specifica alcun percorso, quindi è quindi un URI relativo, relativo alla posizione della pagina che vi accede. Quindi come @ seppo0010 dice che sarà locale al server se la pagina si trova su un server remoto da qualche parte e sarà relativa al tuo computer se la pagina è nel tuo filesystem locale accessibile dal file://protocollo.
— hippietrail,

Risposte:

292

$.getJSON è asincrono, quindi dovresti fare:

$.getJSON("test.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});
— seppo0010
fonte
47
Hai davvero il permesso di accedere a un file locale?
— Maasha,
3
No, non può essere un file ma deve essere servito dal web server.
— Kris Erickson,
15
Assolutamente corretto. La sicurezza di Chromes è molto più rigorosa di Firefox o di altri. Caricare qualsiasi cosa usando xhr, Josn, Xml ecc. È praticamente tutto bloccato in Chrome ad eccezione di una o due cose.
— shawty
1
Ci ho provato, ma senza fortuna. Nessun errore anche nella console :(
— Govind Kailas,
11
Consiglio di utilizzare myjson.com per caricare il tuo file locale e accedervi dal browser Chrome.
— Programmatore chimico
167

Avevo la stessa necessità (per testare la mia app angularjs) e l'unico modo che ho trovato è usare Require.js:

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

nota: il file viene caricato una volta, altre chiamate utilizzeranno la cache.

Altre informazioni sulla lettura dei file con nodejs: http://docs.nodejitsu.com/articles/file-system/how-to-read-files-in-nodejs

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

— Ehvince
fonte
4
Se lo stai facendo con jest, ricordati di fare jest.dontMock('./data.json');altrimenti il ​​risultato è vuoto. Potrebbe essere utile per qualcuno là fuori :)
— Håvard Geithus,
1
Qual è il contesto di questo codice? Che cosa fai json?
— Drazen Bjelovuk,
4
Si prega di fornire un esempio completo: sto ricevendo un errore:has not been loaded yet for context: _. Use require([])
— shaijut,
2
Requisito non funziona sul browser perché è il modulo node.js. se OP vuole caricarlo nel browser, dovrebbe usare fetch è la soluzione giusta.
— sniffingdoggo
1
Sì, request è per il nodo, ma requestJS può essere utilizzato anche nei browser: "RequireJS è un file JavaScript e un caricatore di moduli. È ottimizzato per l'uso nel browser, ma può essere utilizzato in altri ambienti JavaScript, come Rhino e Node. "
— Per Quested Aronsson il
97

In un modo più moderno, ora puoi utilizzare l' API Fetch :

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

Tutti i browser moderni supportano l'API Fetch. (Internet Explorer no, ma Edge lo fa!)

fonte:

— aloisdg si trasferisce su codidact.com
fonte
1
Quando si utilizza l'API Fetch, è ancora vietato accedere ai file locali, a meno che non si disabiliti un'impostazione di sicurezza?
— LarsH,
3
@LarsH Apparentemente sì, l'ho provato stamattina e recuperare api non è in grado di leggere un file json locale con file: // schema. Questo approccio sembra così pulito ma non puoi usarlo per i file locali
— keysl
1
@keysl OK, immagino che probabilmente debba essere così per motivi di sicurezza. (E hai ragione, volevo dire "vietato accedere ai file tramite lo file://schema.) Ma è un approccio semplice e pulito. Ho iniziato a usarlo grazie a questa risposta.
— LarsH,
Non è possibile accedere ai file locali con l'API di recupero
— anton zlydenko il
89

Se si desidera consentire all'utente di selezionare il file json locale (in qualsiasi punto del file system), la seguente soluzione funziona.

Utilizza utilizza FileReader e JSON.parser (e non 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>

Ecco una buona introduzione su FileReader: http://www.html5rocks.com/en/tutorials/file/dndfiles/

— Trausti Kristjansson
fonte
4
L'API FileReader non è supportata in IE 8 o 9, ma tutti gli altri browser sono OK: caniuse.com/#search=filereader
— northben
Funziona perfettamente in Chrome, vedrai i tuoi dati innewArr
— Belter
Questa risposta è carina e un po 'diversa perché non utilizza jQuery.
— DigitalDesignDj
78

Se stai cercando qualcosa di veloce e sporco, carica i dati nella testa del tuo 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"}
})();

Dovrei menzionare che la dimensione del tuo heap (in Chrome) è di circa 4 GB, quindi se i tuoi dati sono più grandi di quello dovresti trovare un altro metodo. Se vuoi controllare un altro browser, prova questo:

window.performance.memory.jsHeapSizeLimit / 1024 / 1024 / 1024 + " GBs"
// "4.046875 GBs"
— jwerre
fonte
hai ragione che AMD funzionerebbe ma non credo che AMD sia la soluzione giusta qui. il più semplice è usare $ .getJSON. grazie
— Patrick Browne il
7
@PatrickBrowne sì, getJSON è una buona soluzione ma penso che in molti casi ti imbatterai in un problema tra domini (ad esempio caricando i dati da S3).
— Jwerre,
Ho trovato questa per me la soluzione più semplice. Il file JSON sembra quasi lo stesso, quindi nessun ingombro aggiuntivo (solo un "var xyz =" nella parte superiore del file). Nessuno vuole un file di big data nel proprio codice.
— cslotty,
Questo è sbagliato in molti livelli, non capisco come abbia così tanti voti, qui spiega di più se qualcuno vuole vedere codepen.io/KryptoniteDove/post/… "Molti esempi dimostreranno che puoi accedere ai dati con un funzione semplice come quella qui sotto. In realtà, ciò che in realtà non sta caricando un documento JSON ma creando un oggetto Javascript. Questa tecnica non funzionerà con file JSON veri. "
— lesolorzanov,
1
onestamente, questa è un'ottima soluzione se hai solo dei dati preconfezionati e vuoi servire una pagina statica
— Evan Pu
19

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

Versione 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);
    });
}
Espandi frammento

— xgqfrms
fonte
@Pier se si utilizza un server delle applicazioni locale come Tomcat o Xampp o Jboss. la sceneggiatura
— Mirko Cianfarani
@MirkoCianfarani infatti perché non si utilizza il file:///protocollo e il file non può più essere considerato locale.
— Pier
L'API Fetch di @xgqfrms è fantastica!
— xgqfrms,
2
//xobj.status è intero xobj.status === "200" dovrebbe essere xobj.status === 200
— yausername
@yausername hai ragione, mi dispiace per quel tipo di stato di errore ed è stato corretto.
— xgqfrms,
14

Non riesco a credere quante volte a questa domanda sia stata data risposta senza comprendere e / o affrontare il problema con il codice effettivo del Poster originale. Detto questo, sono io stesso un principiante (solo 2 mesi di programmazione). Il mio codice funziona perfettamente, ma sentiti libero di suggerire eventuali modifiche. Ecco la soluzione: 

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

Ecco un modo più breve di scrivere lo stesso codice che ho fornito sopra:

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

Puoi anche usare $ .ajax invece di $ .getJSON per scrivere il codice esattamente nello stesso modo:

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

Infine, l'ultimo modo per farlo è avvolgere $ .ajax in una funzione. Non posso prendermi il merito per questo, ma l'ho modificato un po '. L'ho provato e funziona e produce gli stessi risultati del mio codice sopra. Ho trovato questa soluzione qui -> carica json in variabile

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

Il file test.json che vedi nel mio codice sopra è ospitato sul mio server e contiene lo stesso oggetto json data che lui (il poster originale) aveva pubblicato.

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

Sono sorpreso che l'importazione da es6 non sia stata menzionata (utilizzare con file di piccole dimensioni)

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

webpack 2 <utilizza json-loadercome predefinito per i .jsonfile.

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

Per TypeScript :

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

TS2307 (TS) Impossibile trovare il modulo 'json-loader! ./ suburbs.json'

Per farlo funzionare ho dovuto prima dichiarare il modulo. Spero che questo salverà qualche ora per qualcuno.

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

...

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

Se provassi a omettere loaderda json-loaderho ricevuto il seguente errore da webpack:

MODIFICA DI ROTTURA: Non è più consentito omettere il suffisso '-loader' quando si usano i caricatori. Devi specificare 'json-loader' invece di 'json', vedi https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

— Ogglas
fonte
1
facile e diretto.
— Our_Benefactors
Non è possibile utilizzare l'istruzione import es6 quando la pagina Web è caricata con il file: protocollo.
— Onno van der Zee,
6

Prova è così (ma tieni presente che JavaScript non ha accesso al file system client):

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

Trovato questo thread durante il tentativo (non riuscito) di caricare un file json locale. Questa soluzione ha funzionato per me ...

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

... ed è usato così ...

load_json("test2.html.js")

... e questo è il <head>...

<head>
  <script type="text/javascript" src="test.html.js" class="json"></script>
</head>
— TechSpud
fonte
2
Questo non sembra molto riutilizzabile. Ad esempio, se il file json è servito da un server remoto, il timeout di 100ms potrebbe non essere sufficiente per il caricamento. E poiché il tempo dipende dalla velocità di connessione del client, è necessario impostare un timeout molto lungo per i client con connessione lenta. In breve, setTimeout non deve essere utilizzato per attendere il caricamento di una risorsa.
— Kenny806,
1
Kenny806 - Ha lo scopo di risolvere un problema specifico: il caricamento di risorse locali (per una pagina Web non ospitata), quindi ciò significa che non è molto riutilizzabile. Esistono migliaia di soluzioni per il caricamento delle risorse per le pagine ospitate sul Web. Questa non è la soluzione, è una soluzione. È davvero semplice cambiare il timeout. Rimuovendo il timeout, stai suggerendo che un'attesa infinita è accettabile?
— TechSpud,
2
Non sto suggerendo un'attesa infinita, sto suggerendo di usare una tecnica che ti permetta di reagire al caricamento del file non appena è finito. Il mio problema con il timeout è che devi sempre aspettare che finisca. Anche se il file si sarebbe caricato in 10 ms, si aspetterebbe comunque 100 ms. E sì, regolare il timeout è facile, ma ciò che stai suggerendo è cambiare il codice ogni volta che vuoi caricare un file diverso o quando il file siize cambia (per ottimizzare l'attesa). Tale soluzione è errata per IMHO e può causare molti mal di testa in futuro, specialmente quando qualcun altro cerca di usarla.
— Kenny806,
Chiunque usi questo script dovrebbe usarlo come base per i propri script. Hai diritto alla tua opinione sul fatto che questo script sia sbagliato. Perché non suggerire una soluzione alternativa? Questo sicuramente non funzionerà per tutti i casi d'uso. Ha funzionato per me, caricando un file locale da una pagina html locale. Ho condiviso la mia soluzione su questa domanda, nella speranza che potesse aiutare qualcun altro. Stai cercando di caricare una risorsa locale? Perché non passare il valore di timeout come variabile, in base al file che stai caricando? Ajax sui file locali è piuttosto limitato.
— TechSpud,
1
Potresti stare meglio usando onreadystatechange o onload e dando loro una funzione. script.onload = nome funzione;
— Shane Best
4

In TypeScript è possibile utilizzare l'importazione per caricare file JSON locali. Ad esempio il caricamento di un font.json:

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

Ciò richiede un flag tsconfig --resolveJsonModule:

// tsconfig.json

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

Per ulteriori informazioni, consultare le note di rilascio di dattiloscritto: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html

— teh.fonsi
fonte
Può scrivere con maggiori dettagli perché la risposta è un po 'poco chiara e comprensibile.
— Baia,
3

In angolare (o qualsiasi altro framework), puoi caricare usando http get lo uso in questo modo:

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

Spero che questo ti aiuti.

— rajkiran
fonte
3

Quello che ho fatto è stato modificare un po 'il file JSON.

myfile.json => myfile.js

Nel file JSON, (rendilo una variabile JS)

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

Alla fine,

export default x;

Poi,

import JsonObj from './myfile.js';

— Supun Kavinda
fonte
3

Se si utilizza un array locale per JSON, come mostrato nell'esempio nella domanda (test.json), è possibile utilizzare il parseJSON()metodo di JQuery ->

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

getJSON() viene utilizzato per ottenere JSON da un sito remoto - non funzionerà localmente (a meno che non si stia utilizzando un server HTTP locale)

— casa parrocchiale
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

Un approccio che mi piace usare è quello di riempire / avvolgere il json con un oggetto letterale, quindi salvare il file con un'estensione .jsonp. Questo metodo inoltre lascia inalterato il file json originale (test.json), in quanto lavorerai con il nuovo file jsonp (test.jsonp). Il nome sul wrapper può essere qualsiasi, ma deve essere lo stesso nome della funzione di callback che usi per elaborare il jsonp. Userò il tuo test.json pubblicato come esempio per mostrare l'aggiunta del wrapper jsonp per il file 'test.jsonp'.

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

Successivamente, crea una variabile riutilizzabile con ambito globale nello script per contenere il JSON restituito. Ciò renderà i dati JSON restituiti disponibili per tutte le altre funzioni nello script anziché solo per la funzione di callback.

var myJSON;

Poi arriva una semplice funzione per recuperare il tuo JSON mediante l'iniezione di script. Si noti che non è possibile utilizzare jQuery qui per aggiungere lo script all'intestazione del documento, poiché IE non supporta il metodo .append jQuery. Il metodo jQuery commentato nel codice seguente funzionerà su altri browser che supportano il metodo .append. È incluso come riferimento per mostrare la differenza.

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 prossima è una funzione di callback breve e semplice (con lo stesso nome del wrapper jsonp) per ottenere i dati dei risultati json nella variabile globale.

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

I dati json sono ora accessibili da qualsiasi funzione dello script usando la notazione a punti. Come esempio:

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

Questo metodo può essere leggermente diverso da quello a cui sei abituato a vedere, ma presenta molti vantaggi. Innanzitutto, lo stesso file jsonp può essere caricato localmente o da un server utilizzando le stesse funzioni. Come bonus, jsonp è già in un formato compatibile tra domini e può anche essere facilmente utilizzato con le API di tipo REST.

Certo, non ci sono funzioni di gestione degli errori, ma perché dovresti averne bisogno? Se non riesci a ottenere i dati JSON usando questo metodo, puoi praticamente scommettere che hai dei problemi con il JSON stesso e lo controllerei su un buon validatore JSON.

— Epifania
fonte
1

Puoi mettere il tuo json in un file javascript. Questo può essere caricato localmente (anche in Chrome) usando jQuerygetScript() funzione .

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

produzione:

world width: 500

Si noti che la variabile json è dichiarata e assegnata nel file js.

— Victor Stoddard
fonte
0

Non ho trovato alcuna soluzione utilizzando la libreria di chiusura di Google. Quindi, solo per completare l'elenco per i futuri visitatori, ecco come caricare un file JSON dal file locale con la libreria di chiusura:

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"]);
Espandi frammento

L'ho fatto per la mia app Cordova, come se avessi creato un nuovo file javascript per JSON e incollato i dati JSON per String.rawpoi analizzarli conJSON.parse

— Jeeva
fonte
Se si tratta di un file JavaScript perché fare un oggetto così e non semplicemente usando JavaScript Object Notation(JSON): obj = [{"name": "Jeeva"}, {"name": "Kumar"}]
— Nuno André
L'ho usato perché ho recuperato alcuni dati json usando ajax, che è venuto come stringa, quindi uso JSON.parseper convertire in un oggetto 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");

Quello che ho fatto è stato, innanzitutto, dalla scheda di rete, registrare il traffico di rete per il servizio e dal corpo della risposta, copiare e salvare l'oggetto json in un file locale. Quindi chiama la funzione con il nome del file locale, dovresti essere in grado di vedere l'oggetto json in jsonOutout sopra.

— Feng Zhang
fonte
2
Spiega la tua soluzione invece di incollare semplicemente il codice. Solo una soluzione che spieghi come ha risolto il problema aiuterà la comunità.
— gmuraleekrishna,
Nota: richiede InternetExplorer
— Sancarn il
0

Ciò che ha funzionato per me è il seguente:

Ingresso: 

http://ip_address//some_folder_name//render_output.html?relative/path/to/json/fie.json

Codice 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 hai installato Python sul tuo computer locale (o non ti dispiace installarne uno), ecco una soluzione indipendente dal browser per il problema di accesso ai file JSON locale che utilizzo:

Trasforma il file JSON in JavaScript creando una funzione che restituisce i dati come oggetto JavaScript. Quindi puoi caricarlo con il tag <script> e chiamare la funzione per ottenere i dati desiderati.

Ecco che arriva il codice 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
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.