Wie liest man eine externe lokale JSON-Datei in JavaScript?

Question

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

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

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

Könnte mir bitte jemand helfen, ein einfaches Stück Code zu schreiben, um die JSON-Datei zu lesen und die Daten in JavaScript auszugeben?

Answer 1

1. Zuerst erstellen Sie eine JSON-Datei. In diesem Beispiel ist 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 i.e,node.js. Beachten Sie das 'utf8' Argument für readFileSync: Dadurch wird nicht ein Buffer zurückgegeben (obwohl JSON.parse damit umgehen kann), sondern ein String. 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 wie folgt angeben...

   app.get('/get/:id',function(req,res){

   var i;

   for(i=0;i

`4. Wenn Sie die URL alslocalhost:3030/get/33` eingeben, werden die Details zu dieser ID angezeigt....und Sie können auch nach Name lesen. Meine JSON-Datei hat ähnliche Namen, mit diesem Code können Sie Details zu einem Namen erhalten....und er druckte nicht alle ähnlichen Namen aus

 app.get('/get/:name',function(req,res){

var i;

 for(i=0;i

`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 den folgenden Code.

   app.get('/all',sendAll);

   function sendAll(request,response){ response.send(words);

   }` ``

Answer 2

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

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

Answer 3

Wie bereits von vielen erwähnt, funktioniert dies nicht mit einem AJAX-Aufruf. Es gibt jedoch einen Weg daran vorbei. 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"},
]

Dann können Sie die Datei mit JS und 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); // Sie können jedes Objekt indexieren
  };
  fileread.readAsText(file_to_read);
});

Answer 4

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

Also folgen Sie Ihrem Code normal weiter.

var obj = JSON.parse(contacts);
</code></pre>

<p>Allerdings nur zur Information, der Inhalt meiner JSON sieht wie unten aus.</p>

<pre><code>contacts='[{"name":"bla bla", "email":bla bla, "address":"bla bla"}]';
</code></pre></x-turndown>

Answer 5

Je nach Browser können Sie möglicherweise auf Ihre lokalen Dateien zugreifen. Dies funktioniert jedoch möglicherweise nicht für alle Benutzer Ihrer App.

Um dies zu tun, 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);