Wie lese ich eine externe lokale JSON-Datei in JavaScript?

Ich habe eine JSON-Datei in meinem lokalen System gespeichert und eine JavaScript-Datei erstellt, um die JSON-Datei zu lesen und Daten auszudrucken. Hier ist die JSON-Datei:

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

Angenommen, dies ist der Pfad der JSON-Datei : /Users/Documents/workspace/test.json.

Könnte mir bitte jemand helfen, einen einfachen Code zu schreiben, um die JSON-Datei zu lesen und die Daten in JavaScript zu drucken?

Sie können eine lokale Ressource nicht mit AJAX aufrufen, da die Anforderung über HTTP erfolgt.

Eine Problemumgehung besteht darin, einen lokalen Webserver auszuführen, die Datei bereitzustellen und den AJAX-Aufruf an localhost durchzuführen.

Um Ihnen beim Schreiben von Code zum Lesen von JSON zu helfen, sollten Sie die Dokumentation lesen für jQuery.getJSON():

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

Um die externe lokale JSON-Datei (data.json) mit Javascript zu lesen, erstellen Sie zunächst Ihre Datei data.json:

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

1. Erwähnen Sie den Pfad der JSON-Datei in der Skriptquelle zusammen mit der Javascript-Datei.

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

2. Holen Sie sich das Objekt aus der JSON-Datei

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

Weitere Informationen finden Sie in dieser Referenz .

Das Laden einer .jsonDatei von der Festplatte ist eine asynchrone Operation und muss daher eine Rückruffunktion angeben, die nach dem Laden der Datei ausgeführt werden soll.

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

Diese Funktion funktioniert auch zum Laden von a .htmloder .txtDateien, indem der Parameter mime type to usw. überschrieben "text/html"wird "text/plain".

Wenn in Node.js oder wenn require.js im Browser verwenden , können Sie einfach tun:

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

Beachten Sie: Die Datei wird einmal geladen, nachfolgende Aufrufe verwenden den Cache.

1. Erstellen Sie zunächst eine JSON-Datei. In diesem Beispiel lautet meine Datei 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. Und hier ist mein Code, dh node.js. Beachten Sie das 'utf8'Argument zu readFileSync: Dadurch wird nicht ein Buffer(obwohl JSON.parsedamit umgehen kann), sondern ein String zurückgegeben. Ich erstelle einen Server, um das Ergebnis zu sehen ...

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. Wenn Sie bestimmte ID-Details lesen möchten, können Sie den Code als ..

 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. Wenn Sie eine URL eingegeben localhost:3030/get/33haben, werden die Details zu dieser ID angezeigt ... und Sie lesen auch mit Namen. Meine JSON-Datei hat ähnliche Namen. Mit diesem Code können Sie Details zu einem Namen abrufen. Es wurden nicht alle ähnlichen Namen gedruckt

 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. Und wenn Sie ähnliche Namensdetails lesen möchten, können Sie diesen Code verwenden.

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. Wenn Sie alle Informationen in der Datei lesen möchten, verwenden Sie diesen Code unten.

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

 }
 

Die Verwendung der Fetch-API ist die einfachste Lösung:

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

Es funktioniert perfekt in Firefox, aber in Chrome müssen Sie die Sicherheitseinstellungen anpassen.

Wie bereits erwähnt, funktioniert dies mit einem AJAX-Aufruf nicht. Es gibt jedoch einen Weg, dies zu umgehen. Mit dem Eingabeelement können Sie Ihre Datei auswählen.

Die ausgewählte Datei (.json) muss folgende Struktur haben:

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

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

Dann können Sie die Datei mit JS mit FileReader () lesen:

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

Abhängig von Ihrem Browser können Sie auf Ihre lokalen Dateien zugreifen. Dies funktioniert jedoch möglicherweise nicht für alle Benutzer Ihrer App.

Zu diesem Zweck können Sie die Anweisungen hier ausprobieren: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Sobald Ihre Datei geladen ist, können Sie die Daten abrufen mit:

var jsonData = JSON.parse(theTextContentOfMyFile);

Wenn Sie lokale Dateien verwenden, packen Sie die Daten einfach als js-Objekt.

data.js

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

Keine XMLHttpRequests , keine Analyse, nur MyData.resourcedirekt verwenden

Sehr einfach.
Benennen Sie Ihre JSON-Datei in ".js" anstelle von ".json" um.

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

Folgen Sie also Ihrem Code normal.

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

Nur zur Information, der Inhalt meines json sieht aus wie der Snip unten.

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

Sie können es wie ein ES6-Modul importieren.

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

Verwenden Sie einfach $ .getJSON und dann $ .each, um das Paar Schlüssel / Wert zu iterieren. Inhaltsbeispiel für die JSON-Datei und den Funktionscode:

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

Sie können die XMLHttpRequest () -Methode verwenden:

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

Sie können die Antwort von myObj mithilfe der Anweisung console.log sehen (auskommentiert).

Wenn Sie AngularJS kennen, können Sie $ http verwenden:

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

Wenn Sie die Datei in einem anderen Ordner haben, geben Sie den vollständigen Pfad anstelle des Dateinamens an.

Da Sie eine Webanwendung haben, haben Sie möglicherweise einen Client und einen Server.

Wenn Sie nur Ihren Browser haben und eine lokale Datei aus einem Javascript lesen möchten, das in Ihrem Browser ausgeführt wird, bedeutet dies, dass Sie nur einen Client haben. Aus Sicherheitsgründen sollte der Browser dies nicht zulassen.

Wie Lauhub oben erklärt hat, scheint dies jedoch zu funktionieren:

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

Eine andere Lösung besteht darin, irgendwo auf Ihrem Computer einen Webserver einzurichten (winzig in Windows oder Monkey in Linux) und mit einer XMLHttpRequest- oder D3-Bibliothek die Datei vom Server anzufordern und zu lesen. Der Server ruft die Datei aus dem lokalen Dateisystem ab und stellt sie Ihnen über das Web zur Verfügung.

Mir hat gefallen, was Stano / Meetar oben kommentiert hat. Ich benutze es, um .json-Dateien zu lesen. Ich habe ihre Beispiele mit Promise erweitert. Hier ist der Plunker dafür. 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); 
       });

Das Lesen von JSON kann für DRY in eine andere Funktion verschoben werden. Das Beispiel hier zeigt jedoch eher, wie man Versprechen einsetzt.

Sie müssen eine neue XMLHttpRequest-Instanz erstellen und den Inhalt der JSON-Datei laden.

Dieser Tipp funktioniert für mich ( 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);
 });

Eine einfache Problemumgehung besteht darin, Ihre JSON-Datei auf einem lokal ausgeführten Server abzulegen. Gehen Sie dazu vom Terminal in Ihren Projektordner und starten Sie den lokalen Server an einer Portnummer, z. B. 8181

python -m SimpleHTTPServer 8181

Wenn Sie dann zu http: // localhost: 8181 / navigieren, sollten alle Ihre Dateien einschließlich des JSON angezeigt werden. Denken Sie daran, Python zu installieren, falls Sie dies noch nicht getan haben.

Wenn Sie einen lokalen Webserver ausführen könnten (wie oben von Chris P vorgeschlagen) und jQuery verwenden könnten, könnten Sie http://api.jquery.com/jQuery.getJSON/ ausprobieren.

Sie können D3 verwenden, um den Rückruf zu verarbeiten und die lokale JSON-Datei data.jsonwie folgt zu laden :

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

Ich nahm Stanos ausgezeichnete Antwort und wickelte sie in ein Versprechen ein. Dies kann nützlich sein, wenn Sie keine Option wie Node oder Webpack haben, auf die Sie zurückgreifen können, um eine JSON-Datei aus dem Dateisystem zu laden:

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

Sie können es so nennen:

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

Wenn Sie also planen, "Apache Tomcat" zum Hosten Ihrer JSON-Datei zu verwenden,

1> Überprüfen Sie nach dem Starten des Servers, ob Ihr Apache Tomcat betriebsbereit ist, indem Sie zu dieser URL gehen: "localhost: 8080" -

2> Wechseln Sie als Nächstes zum Ordner "webapps" - "C: \ Programme \ Apache Software Foundation \ Tomcat 8.5 \ webapps". Erstellen Sie einen Projektordner oder kopieren Sie Ihren Projektordner.

3> Fügen Sie dort Ihre JSON-Datei ein.

4> Und das war's. Du bist fertig! Gehen Sie einfach zu - " http: // localhost: 8080 / $ project_name $ / $ jsonFile_name $ .json"