Jak odczytać zewnętrzny lokalny plik JSON w JavaScript?

Zapisałem plik JSON w moim systemie lokalnym i utworzyłem plik JavaScript, aby odczytać plik JSON i wydrukować dane. Oto plik JSON:

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

Powiedzmy, że jest to ścieżka do pliku JSON: /Users/Documents/workspace/test.json .

Czy ktoś mógłby mi pomóc w napisaniu prostego fragmentu kodu, aby odczytać plik JSON i wydrukować dane w JavaScript?

Nie można wykonać wywołania AJAX do lokalnego zasobu, ponieważ żądanie jest wysyłane przy użyciu HTTP.

Obejściem tego problemu jest uruchomienie lokalnego serwera WWW, podanie pliku i wywołanie AJAX do localhost.

Jeśli chodzi o pomoc w pisaniu kodu do czytania JSON, powinieneś przeczytać dokumentację dla jQuery.getJSON():

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

Aby odczytać zewnętrzny lokalny plik JSON (data.json) za pomocą javascript, najpierw utwórz plik data.json:

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

1. Wymień ścieżkę pliku json w źródle skryptu wraz z plikiem javascript.

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

2. Pobierz obiekt z pliku json

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

Aby uzyskać więcej informacji, zobacz to odniesienie .

Ładowanie .jsonpliku z dysku twardego jest operacją asynchroniczną, dlatego należy określić funkcję wywołania zwrotnego, która ma zostać wykonana po załadowaniu pliku.

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

Funkcja ta działa również na ładowanie .htmllub .txtplików poprzez nadpisanie parametr typu MIME "text/html", "text/plain"etc.

Korzystając z Node.js lub używając przeglądarki wymaganej.js, możesz po prostu:

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

Uwaga: plik jest ładowany raz, kolejne wywołania wykorzystają pamięć podręczną.

1. Najpierw utwórz plik json. W tym przykładzie mój plik to 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. A oto mój kod, tj. Node.js. Zwróć uwagę na 'utf8'argument readFileSync: to powoduje, że nie zwraca Buffer(choć JSON.parsemoże to obsłużyć), ale ciąg znaków. Tworzę serwer, aby zobaczyć wynik ...

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. Jeśli chcesz przeczytać szczegółowe dane identyfikatora, możesz podać kod jako ...

 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. Gdy podasz adres URL localhost:3030/get/33, poda on szczegóły związane z tym identyfikatorem .... i czytasz także z nazwy. Mój plik json ma nazwy similar z tym kodem, możesz uzyskać szczegółowe informacje o jednej nazwie .... i nie wydrukował wszystkich nazw similar

 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. A jeśli chcesz przeczytać szczegóły nazwy simillar, możesz użyć tego kodu.

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. Jeśli chcesz przeczytać wszystkie informacje w pliku, skorzystaj z tego kodu poniżej.

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

 }
 

Korzystanie z interfejsu Fetch API jest najłatwiejszym rozwiązaniem:

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

Działa idealnie w przeglądarce Firefox, ale w przeglądarce Chrome musisz dostosować ustawienia zabezpieczeń.

Jak wiele osób wspomniało wcześniej, nie działa to przy użyciu połączenia AJAX. Jest jednak na to sposób. Za pomocą elementu wejściowego możesz wybrać swój plik.

Wybrany plik (.json) musi mieć następującą strukturę:

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

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

Następnie możesz odczytać plik za pomocą JS z 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);
});

W zależności od przeglądarki możesz uzyskać dostęp do lokalnych plików. Ale to może nie działać dla wszystkich użytkowników Twojej aplikacji.

Aby to zrobić, możesz wypróbować instrukcje tutaj: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Po załadowaniu pliku możesz odzyskać dane, używając:

var jsonData = JSON.parse(theTextContentOfMyFile);

Jeśli używasz plików lokalnych, dlaczego nie po prostu spakować dane jako obiekt js?

data.js

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

Bez XMLHttpRequests , bez parsowania, wystarczy użyć MyData.resourcebezpośrednio

Bardzo prosty.
Zmień nazwę pliku json na „.js” zamiast na „.json”.

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

Postępuj więc normalnie.

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

Jednak tylko dla informacji, zawartość mojego jsona wygląda jak wycinek poniżej.

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

Możesz go zaimportować jak moduł ES6;

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

Wystarczy użyć $ .getJSON, a następnie $ .each, aby iterować parę Klucz / wartość. Przykład treści dla pliku JSON i kodu funkcjonalnego:

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

Możesz użyć metody 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();

Możesz zobaczyć odpowiedź myObj za pomocą instrukcji console.log (skomentowane).

Jeśli znasz AngularJS, możesz użyć $ 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;
  };
}

Jeśli plik znajduje się w innym folderze, podaj pełną ścieżkę zamiast nazwy pliku.

Ponieważ masz aplikację internetową, możesz mieć klienta i serwer.

Jeśli masz tylko przeglądarkę i chcesz odczytać lokalny plik z javascript, który jest uruchomiony w przeglądarce, oznacza to, że masz tylko klienta. Ze względów bezpieczeństwa przeglądarka nie powinna umożliwiać wykonywania takich czynności.

Jednak, jak wyjaśnił powyżej Lauhub, wydaje się to działać:

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

Innym rozwiązaniem jest skonfigurowanie gdzieś na twoim komputerze serwera WWW (małego w Windowsie lub małpiego w Linuksie), a przy pomocy biblioteki XMLHttpRequest lub D3, zażądaj pliku z serwera i przeczytaj go. Serwer pobierze plik z lokalnego systemu plików i poda go tobie przez Internet.

Podobało mi się to, co Stano / Meetar skomentował powyżej. Używam go do odczytu plików .json. Rozszerzyłem ich przykłady za pomocą Promise. Oto plunker na to samo. 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); 
       });

Odczyt JSON może zostać przeniesiony do innej funkcji, dla DRY; ale przykład tutaj bardziej pokazuje, jak korzystać z obietnic.

Musisz utworzyć nową instancję XMLHttpRequest i załadować zawartość pliku json.

Ta wskazówka działa dla mnie ( 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);
 });

Jednym prostym obejściem jest umieszczenie pliku JSON na serwerze działającym lokalnie. w tym celu z terminala przejdź do folderu projektu i uruchom serwer lokalny na jakimś numerze portu, np. 8181

python -m SimpleHTTPServer 8181

Następnie przeglądanie do http: // localhost: 8181 / powinno wyświetlić wszystkie twoje pliki, w tym JSON. Pamiętaj, aby zainstalować Python, jeśli jeszcze go nie masz.

Jeśli możesz uruchomić lokalny serwer WWW (jak sugerował Chris P powyżej) i możesz użyć jQuery, możesz spróbować http://api.jquery.com/jQuery.getJSON/

Możesz użyć D3 do obsługi wywołania zwrotnego i załadować lokalny plik JSON data.jsonw następujący sposób:

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

Wziąłem doskonałą odpowiedź Stano i złożyłem ją w obietnicy. Może to być przydatne, jeśli nie masz opcji takiej jak węzeł lub paczka internetowa, na której można polegać, aby załadować plik json z systemu plików:

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

Możesz to tak nazwać:

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

Jeśli więc planujesz użyć „Apache Tomcat” do hostowania pliku JSON,

1> Po uruchomieniu serwera sprawdź, czy serwer Apache Tomcat jest uruchomiony, przechodząc do tego adresu URL: „localhost: 8080” -

2> Następnie przejdź do folderu „webapps” - „C: \ Program Files \ Apache Software Foundation \ Tomcat 8.5 \ webapps”. I utwórz folder projektu lub skopiuj folder projektu.

3> Wklej tam swój plik json.

4> I to wszystko. Gotowe! Wystarczy przejść do - „ http: // localhost: 8080 / $ nazwa_projektu $ / $ jsonFile_name $ .json”