Come leggere un file JSON locale esterno in JavaScript?

Ho salvato un file JSON nel mio sistema locale e creato un file JavaScript per leggere il file JSON e stampare i dati. Ecco il file JSON:

{"resource":"A","literals":["B","C","D"]}

Diciamo che questo è il percorso del file JSON: /Users/Documents/workspace/test.json.

Qualcuno potrebbe aiutarmi a scrivere un semplice codice per leggere il file JSON e stampare i dati in JavaScript?

Non è possibile effettuare una chiamata AJAX a una risorsa locale poiché la richiesta viene effettuata tramite HTTP.

Una soluzione alternativa consiste nell'eseguire un server Web locale, servire il file ed effettuare la chiamata AJAX a localhost.

Per aiutarti a scrivere codice per leggere JSON, dovresti leggere la documentazione per jQuery.getJSON():

http://api.jquery.com/jQuery.getJSON/

Per leggere il file JSON locale esterno (data.json) utilizzando javascript, creare innanzitutto il file data.json:

data = '[{"name" : "Ashwin", "age" : "20"},{"name" : "Abhinandan", "age" : "20"}]';

1. Indica il percorso del file json nell'origine dello script insieme al file javascript.

   <script type="text/javascript" src="data.json"></script>
   <script type="text/javascript" src="javascrip.js"></script>

2. Ottieni l'oggetto dal file json

   var mydata = JSON.parse(data);
   alert(mydata[0].name);
   alert(mydata[0].age);
   alert(mydata[1].name);
   alert(mydata[1].age);

Per ulteriori informazioni, consultare questo riferimento .

Il caricamento di un .jsonfile dal disco fisso è un'operazione asincrona e pertanto deve specificare una funzione di callback da eseguire dopo il caricamento del file.

function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}

//usage:
readTextFile("/Users/Documents/workspace/test.json", function(text){
    var data = JSON.parse(text);
    console.log(data);
});

Questa funzione funziona anche per caricare un file .htmlo .txt, sovrascrivendo il parametro mime type su "text/html", "text/plain"ecc.

Quando si è in Node.js o quando si utilizza request.js nel browser , è possibile fare semplicemente:

let json = require('/Users/Documents/workspace/test.json');

Nota: il file viene caricato una volta, le chiamate successive utilizzeranno la cache.

1. Innanzitutto, crea un file json. In questo esempio il mio file è words.json

[{"name":"ay","id":"533"},
{"name":"kiy","id":"33"},
{"name":"iy","id":"33"},
{"name":"iy","id":"3"},
{"name":"kiy","id":"35"},
{"name":"kiy","id":"34"}]

2. Ed ecco il mio codice, ad esempio, node.js. Nota l' 'utf8'argomento a readFileSync: questo lo fa restituire non un Buffer(sebbene JSON.parsepossa gestirlo), ma una stringa. Sto creando un server per vedere il risultato ...

var fs=require('fs');
var data=fs.readFileSync('words.json', 'utf8');
var words=JSON.parse(data);
var bodyparser=require('body-parser');
console.log(words);
var express=require('express');

var app=express();

var server=app.listen(3030,listening);

function listening(){
console.log("listening..");
}
app.use(express.static('website'));
app.use(bodyparser.urlencoded({extended:false}));
app.use(bodyparser.json());

3. Quando vuoi leggere particolari dettagli ID puoi menzionare il codice come ..

 app.get('/get/:id',function(req,res){
	
var i;
		 
 for(i=0;i<words.length;++i)
 {
 if(words[i].id==req.params.id){
 res.send(words[i]);
 }
}
console.log("success");
	  
});

4. Quando hai inserito l'URL in localhost:3030/get/33quanto fornirà i dettagli relativi a quell'ID .... e leggi anche per nome. Il mio file json ha nomi simili con questo codice è possibile ottenere i dettagli di un nome .... e non ha stampato tutti i nomi simili

 app.get('/get/:name',function(req,res){
	
var i;
		 
 for(i=0;i<words.length;++i)
 {
 if(words[i].id==req.params.name){
 res.send(words[i]);
 }
}
console.log("success");
	  
});

5. E se vuoi leggere i dettagli del nome simile, puoi usare questo codice.

app.get('/get/name/:name',function(req,res){
word = words.filter(function(val){
  return val.name === req.params.name;
});
res.send(word);
			 
 console.log("success");
	  
});

6. Se vuoi leggere tutte le informazioni nel file, usa questo codice qui sotto.

app.get('/all',sendAll);
 
 function sendAll(request,response){
 response.send(words);

 }
 

L'utilizzo dell'API Fetch è la soluzione più semplice:

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

Funziona perfettamente in Firefox, ma in Chrome devi personalizzare le impostazioni di sicurezza.

Come molte persone menzionate prima, questo non funziona usando una chiamata AJAX. Tuttavia, c'è un modo per aggirare. Utilizzando l'elemento di input, è possibile selezionare il file.

Il file selezionato (.json) deve avere questa struttura:

[
    {"key": "value"},
    {"key2": "value2"},
    ...
    {"keyn": "valuen"},
]

<input type="file" id="get_the_file">

Quindi puoi leggere il file usando JS con FileReader ():

document.getElementById("get_the_file").addEventListener("change", function() {
  var file_to_read = document.getElementById("get_the_file").files[0];
  var fileread = new FileReader();
  fileread.onload = function(e) {
    var content = e.target.result;
    // console.log(content);
    var intern = JSON.parse(content); // Array of Objects.
    console.log(intern); // You can index every object
  };
  fileread.readAsText(file_to_read);
});

A seconda del browser, è possibile accedere ai file locali. Ma questo potrebbe non funzionare per tutti gli utenti della tua app.

Per fare ciò, puoi provare le istruzioni da qui: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Una volta caricato il file, è possibile recuperare i dati utilizzando:

var jsonData = JSON.parse(theTextContentOfMyFile);

Se stai usando file locali, perché non impacchettare i dati come un oggetto js?

data.js

MyData = { resource:"A",literals:["B","C","D"]}

Nessun XMLHttpRequests , nessuna analisi, basta usare MyData.resourcedirettamente

Molto semplice.
Rinomina il tuo file json in ".js" anziché ".json".

<script type="text/javascript" src="my_json.js"></script>

Quindi segui normalmente il tuo codice.

<script type="text/javascript">
var obj = JSON.parse(contacts);

Tuttavia, solo per informazione, il contenuto del mio JSON sembra il taglio qui sotto.

contacts='[{"name":"bla bla", "email":bla bla, "address":"bla bla"}]';

Puoi importarlo come il modulo ES6;

import data from "/Users/Documents/workspace/test.json"

Basta usare $ .getJSON e poi $ .each per ripetere la coppia chiave / valore. Esempio di contenuto per il file JSON e il codice funzionale:

    {
        {
            "key": "INFO",
            "value": "This is an example."
        }
    }

    var url = "file.json";         
    $.getJSON(url, function (data) {
        $.each(data, function (key, model) {
            if (model.key == "INFO") {
                console.log(model.value)
            }
        })
    });

È possibile utilizzare il metodo XMLHttpRequest ():

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText);
        //console.log("Json parsed data is: " + JSON.stringify(myObj));
       }
    };
xmlhttp.open("GET", "your_file_name.json", true);
xmlhttp.send();

Puoi vedere la risposta di myObj usando l'istruzione console.log (commentata).

Se conosci AngularJS, puoi usare $ http:

MyController.$inject = ['myService'];
function MyController(myService){

var promise = myService.getJsonFileContents();

  promise.then(function (response) {
    var results = response.data;
    console.log("The JSON response is: " + JSON.stringify(results));
})
  .catch(function (error) {
    console.log("Something went wrong.");
  });
}

myService.$inject = ['$http'];
function myService($http){

var service = this;

  service.getJsonFileContents = function () {
    var response = $http({
      method: "GET",
      url: ("your_file_name.json")
    });

    return response;
  };
}

Se il file è presente in una cartella diversa, indicare il percorso completo anziché il nome file.

Dato che hai un'applicazione web, potresti avere un client e un server.

Se hai solo il tuo browser e vuoi leggere un file locale da un javascript in esecuzione nel tuo browser, ciò significa che hai solo un client. Per motivi di sicurezza, il browser non dovrebbe lasciarti fare.

Tuttavia, come spiegato in precedenza lauhub, questo sembra funzionare:

http://www.html5rocks.com/en/tutorials/file/dndfiles/

Un'altra soluzione è quella di installare da qualche parte nel tuo computer un server web (piccolo in Windows o Monkey in Linux) e con una libreria XMLHttpRequest o D3, richiedere il file dal server e leggerlo. Il server recupererà il file dal filesystem locale e te lo servirà attraverso il web.

Mi è piaciuto quello che Stano / Meetar ha commentato sopra. Lo uso per leggere file .json. Ho ampliato i loro esempi usando Promise. Ecco il plunker per lo stesso. https://plnkr.co/edit/PaNhe1XizWZ7C0r3ZVQx?p=preview

function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}

//usage:
// readTextFile("DATA.json", function(text){
//     var data = JSON.parse(text);
//     console.log(data); 
// });


var task1 = function (){
  return new Promise (function(resolve, reject){
    readTextFile("DATA.json", function(text){
    var data = JSON.parse(text);
    console.log('task1 called');
    console.log(data);
    resolve('task1 came back');
    }); 
  });
};

var task2 = function (){
  return new Promise (function(resolve, reject){
    readTextFile("DATA2.json", function(text){
    var data2 = JSON.parse(text);
    console.log('task2 called');
    console.log(data2);
    resolve('task2 came back');
    });
  });
}

Promise.race([task1(), task2()])
       .then(function(fromResolve){
          console.log(fromResolve); 
       });

La lettura di JSON può essere spostata in un'altra funzione, per DRY; ma l'esempio qui è più di mostrare come usare le promesse.

È necessario creare una nuova istanza XMLHttpRequest e caricare il contenuto del file json.

Questo suggerimento funziona per me ( https://codepen.io/KryptoniteDove/post/load-json-file-locally-using-pure-javascript ):

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

 loadJSON(function(response) {
    // Parse JSON string into object
    var actual_JSON = JSON.parse(response);
 });

Una soluzione semplice è quella di inserire il file JSON all'interno di un server locale. dal terminale vai alla cartella del tuo progetto e avvia il server locale su un numero di porta, ad es. 8181

python -m SimpleHTTPServer 8181

Quindi navigare su http: // localhost: 8181 / dovrebbe visualizzare tutti i tuoi file incluso JSON. Ricorda di installare Python se non l'hai già fatto.

Se potessi eseguire un server Web locale (come suggerito da Chris P in precedenza) e se potessi utilizzare jQuery, puoi provare http://api.jquery.com/jQuery.getJSON/

È possibile utilizzare D3 per gestire il callback e caricare il file JSON locale data.json, come segue:

<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>

<script>
  d3.json("data.json", function(error, data) {
    if (error)
      throw error;
    console.log(data);
  });
</script>

Ho preso l' eccellente risposta di Stano e l'ho avvolta in una promessa. Questo potrebbe essere utile se non hai un'opzione come node o webpack su cui ripiegare per caricare un file json dal file system:

// wrapped XMLHttpRequest in a promise
const readFileP = (file, options = {method:'get'}) => 
  new Promise((resolve, reject) => {
    let request = new XMLHttpRequest();
    request.onload = resolve;
    request.onerror = reject;
    request.overrideMimeType("application/json");
    request.open(options.method, file, true);
    request.onreadystatechange = () => {
        if (request.readyState === 4 && request.status === "200") {
            resolve(request.responseText);
        }
    };
    request.send(null);
});

Puoi chiamarlo così:

readFileP('<path to file>')
    .then(d => {
      '<do something with the response data in d.srcElement.response>'
    });

Pertanto, se hai intenzione di utilizzare "Apache Tomcat" per l'hosting del tuo file JSON,

1> Dopo aver avviato il server, verifica che Apache Tomcat sia attivo e funzionante andando a questo url: "localhost: 8080" -

2> Quindi, vai alla cartella "webapps" - "C: \ Programmi \ Apache Software Foundation \ Tomcat 8.5 \ webapps". E crea una cartella di progetto o copia la cartella di progetto.

3> Incolla il tuo file json laggiù.

4> E questo è tutto. Hai fatto! Vai a - " http: // localhost: 8080 / $ nome_progetto $ / $ jsonNome_file $ .json"