Hvordan lese en ekstern lokal JSON-fil i JavaScript?

Jeg har lagret en JSON-fil på mitt lokale system og opprettet en JavaScript-fil for å lese JSON-filen og skrive ut dataene. Her er JSON-filen:

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

La oss si at dette er banen til JSON-filen: /Users/Documents/workspace/test.json.

Kan noen være så snill å hjelpe meg med å skrive et enkelt stykke kode for å lese JSON-filen og skrive ut dataene i JavaScript?

Svar #1

For å lese den eksterne lokale JSON-filen (data.json) ved hjelp av JavaScript, opprett først din data.json-fil:

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

Så,

  1. Nevn banen til JSON-filen i skriptkilden sammen med JavaScript-filen

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

  2. Hent objektet fra JSON-filen

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

Svar #2

Innlasting av en .json-fil fra harddisken er en asynkron operasjon, og derfor må det spesifiseres en tilbakeringingsfunksjon som skal utføres etter at filen er lastet inn.

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

Denne funksjonen fungerer også for å laste inn .html eller .txt-filer, ved å overstyre MIME-type-parameteren til "text/html", "text/plain" osv.

Svar #3

Du kan ikke gjøre et AJAX-kall til en lokal ressurs siden forespørselen gjøres ved hjelp av HTTP.

En løsning er å kjøre en lokal webserver, levere filen og gjøre AJAX-kallet til localhost.

Når det gjelder å hjelpe deg med å skrive kode for å lese JSON, bør du lese dokumentasjonen for jQuery.getJSON():

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

Svar #4

Når du bruker Node.js eller når du bruker require.js i nettleseren, kan du ganske enkelt gjøre:

let json = require('/Users/Documents/workspace/test.json');
console.log(json, 'the json obj');

Merk: filen lastes inn én gang, påfølgende kall vil bruke cachen.

Svar #5

Å bruke Fetch API er den enkleste løsningen:

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

Det fungerer perfekt i Firefox, men i Chrome må du tilpasse sikkerhetsinnstillingene.

Svar #6

  1. Først, opprett en json-fil. I dette eksemplet er filen min 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"}]
  1. Og her er koden min, altså node.js. Legg merke til 'utf8'-argumentet til readFileSync: dette gjør at den returnerer ikke en Buffer (selv om JSON.parse kan håndtere det), men en streng. Jeg oppretter en server for å se resultatet...

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());
  1. Når du vil lese detaljer om en bestemt ID, kan du nevne koden som..

 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");
	  
});
  1. Når du skrev inn url som localhost:3030/get/33 vil det gi detaljene knyttet til den id-en... og du kan også lese etter navn. Min json-fil har lignende navn, med denne koden kan du få detaljene til ett navn... og det skrev ikke ut alle de lignende navnene

 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");
	  
});
  1. Og hvis du vil lese detaljer om lignende navn, kan du bruke denne koden.

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");
	  
});
  1. Hvis du vil lese all informasjonen i filen, kan du bruke koden nedenfor.

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

 }

Svar #7

Du kan importere det som en ES6-modul;

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

Svar #8

Som mange har nevnt før, fungerer ikke dette ved bruk av et AJAX-kall. Men det finnes en måte å omgå det på. Ved å bruke input-elementet kan du velge filen din.

Den valgte filen (.json) må ha denne strukturen:

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

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

Da kan du lese filen ved å bruke JS med 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);
});

Svar #9

Veldig enkelt.
Gi JSON-filen din nytt navn til ".js" i stedet for ".json".

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

Så følg koden din som normalt.

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

Men bare for informasjon, innholdet i min json ser ut som utdraget nedenfor.

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

Svar #10

Avhengig av nettleseren din, kan du få tilgang til dine lokale filer. Men dette fungerer kanskje ikke for alle brukere av appen din.

For å gjøre dette, kan du prøve instruksjonene her: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Når filen din er lastet opp, kan du hente dataene ved å bruke:

var jsonData = JSON.parse(theTextContentOfMyFile);

Svar #11

Hvis du bruker lokale filer, hvorfor ikke bare pakke dataene som et js-objekt?

data.js

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

Ingen XMLHttpRequests, ingen parsing, bare bruk MyData.resource direkte

Svar #12

Du kan gjøre dette med fetch() ved hjelp av async await. Det er den nyeste og sikreste måten å hente data fra en URL på.

const url = "../asset/videoData.json";

const fetchJson = async () => {
  try {
    const data = await fetch(url);
    const response = await data.json();  
  } catch (error) {
    console.log(error);
  }
 };

Du kan også bruke dette for å hente data fra eksterne URL-er.

Svar #13

2024-løsning (virker i Chrome 123+)

JS-filen der du importerer JSON-filen, bør være et modul:

<script type="module" src="script.js"></script>

Deretter importerer du din json-fil inne i script.js:

import data from "./data.json" with { type: "json" };

Du kan sjekke at dataene er lastet med console.log(data)

Kilde

Relaterte artikler