Caricamento del file JSON locale

Sto cercando di 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"} 

Nulla viene visualizzato e Firebug mi dice che i dati non sono definiti. In Firebug posso vedere json.responseText ed è buono e valido, ma è strano quando copio la linea:

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

nella console di Firebug, funziona e posso accedere ai dati.

Qualcuno ha una soluzione?

$.getJSON è asincrono quindi dovresti fare:

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

Ho avuto lo stesso bisogno (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, ulteriori chiamate utilizzeranno la cache.

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

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

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

Usa utilizza FileReader e JSON.parser (e nessun jquery).

   

Json File

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

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

      ...  

main.js

 (function(){ console.log(DATA) // {"a" : "b", "c" : "d"} })() 

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 di recupero. (Internet Explorer no, ma Edge lo fa!)

fonte:

  • Utilizzando Fetch

  • Fetch in Action

  • Posso usare…?

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

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

Recentemente D3js è in grado di gestire file json locali.

Questo è il problema https://github.com/mbostock/d3/issues/673

Questa è la patch inorder per D3 per lavorare con i file json locali. https://github.com/mbostock/d3/pull/632

Non posso credere a quante volte questa domanda ha avuto risposta senza capire e / o affrontare il problema con il codice reale del Poster originale. Detto questo, sono anch’io un principiante (solo 2 mesi di programmazione). Il mio codice funziona perfettamente, ma sentiti libero di suggerire eventuali modifiche ad esso. 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 allo stesso modo:

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

Infine, l’ultimo modo per farlo è quello di avvolgere $ .ajax in una funzione. Non posso prendermi il merito di 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 -> caricare 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 object di dati json che lui (il poster originale) aveva pubblicato.

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

Sono sorpreso dell’importazione da es6 non è stato menzionato (utilizzare con file di piccole dimensioni)

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

webpack 2 json-loader come predefinito per i file .json .

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

Per TypeScript :

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

TS2307 (TS) Imansible trovare il modulo ‘json-loader! ./ suburbs.json’

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

 declare module "json-loader!*" { let json: any; export default json; } ... import test from 'json-loader!./test.json'; 

Se ho provato ad omettere il loader da json-loader ho ricevuto il seguente errore dal webpack :

BREAKING CHANGE: 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

Prova in questo modo (ma tieni anche presente che JavaScript non ha accesso al file system del client):

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

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

… e viene usato così …

 load_json("test2.html.js") 

… e questo è il

    

In angular (o qualsiasi altro framework), è ansible caricare utilizzando http get lo uso qualcosa del genere:

 this.http.get( console.log(data)); 

Spero che questo ti aiuti.

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

Se stai usando un array locale per JSON – come hai mostrato nella tua exmaple nella domanda (test.json), allora puoi parseJSON metodo parseJSON di JQuery ->

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

getJSON è usato per ottenere JSON da un sito remoto – non funzionerà localmente (a meno che tu non stia utilizzando un server HTTP locale)

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

Non ho trovato alcuna soluzione utilizzando la libreria di Google Closure. Quindi, per completare l’elenco per i futuri vistori, ecco come si carica un JSON dal file locale con la libreria 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); }); 

Un approccio che mi piace usare è di pad / wrap con un object letterale, quindi salvare il file con estensione .jsonp. Questo metodo lascia inalterato anche il file json originale (test.json), poiché si lavorerà invece con il nuovo file jsonp (test.jsonp). Il nome sul wrapper può essere qualsiasi cosa, ma deve essere lo stesso nome della funzione di callback che si usa 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"}); 

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

 var myJSON; 

Successivamente viene una semplice funzione per recuperare il tuo json per iniezione di script. Nota che non possiamo usare jQuery qui per aggiungere lo script al capo del documento, dato che IE non supporta il metodo 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 } 

È ora ansible accedere ai dati JSON da qualsiasi funzione dello script utilizzando la notazione dot. Come esempio:

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

Questo metodo potrebbe essere un po ‘diverso da quello che sei abituato a vedere, ma ha 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 cross-domain friendly e può anche essere facilmente utilizzato con le API di tipo REST.

Certo, non ci sono funzioni di gestione degli errori, ma perché ne avresti bisogno? Se non riesci a ottenere i dati JSON con questo metodo, puoi scommettere che hai qualche problema all’interno del json stesso, e lo controllerei su un buon validatore JSON.

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

map-01.js file:

 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.

 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, prima di tutto, dalla scheda di rete, registrare il traffico di rete per il servizio e dal corpo della risposta, copiare e salvare l’object JSON in un file locale. Quindi chiama la funzione con il nome del file locale, dovresti essere in grado di vedere l’object json in jsonOutout sopra.

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:

         

Se hai Python installato sul tuo computer locale (o non ti dispiace installarne uno), ecco una soluzione alternativa indipendente dal browser per il problema di accesso ai file JSON locale che utilizzo:

Trasforma il file JSON in un JavaScript creando una funzione che restituisce i dati come object JavaScript. Quindi puoi caricarlo con il tag

Ecco 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 transformsd 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]')