Hoe lees ik een extern lokaal JSON-bestand in JavaScript?

Ik heb een JSON-bestand in mijn lokale systeem opgeslagen en een JavaScript-bestand gemaakt om het JSON-bestand te lezen en gegevens af te drukken. Hier is het JSON-bestand:

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

Stel dat dit het pad is van het JSON-bestand: /Users/Documents/workspace/test.json.

Kan iemand me helpen een eenvoudig stukje code te schrijven om het JSON-bestand te lezen en de gegevens in JavaScript af te drukken?


Antwoord 1, autoriteit 100%

U kunt geen AJAX-aanroep doen naar een lokale bron omdat het verzoek wordt gedaan via HTTP.

Een tijdelijke oplossing is om een ​​lokale webserver te draaien, het bestand op te dienen en de AJAX-aanroep naar localhost te doen.

Om u te helpen code te schrijven om JSON te lezen, moet u de documentatie voor jQuery.getJSON() lezen:

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


Antwoord 2, autoriteit 94%

Als u het externe lokale JSON-bestand (data.json) wilt lezen met javascript, moet u eerst uw data.json-bestand maken:

data = '[{"name" : "Ashwin", "age" : "20"},{"name" : "Abhinandan", "age" : "20"}]';
  1. Vermeld het pad van het json-bestand in de scriptbron samen met het javascript-bestand.

    <script type="text/javascript" src="data.json"></script>
    <script type="text/javascript" src="javascrip.js"></script>
    
  2. Haal het object uit het json-bestand

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

Zie deze referentie voor meer informatie.


Antwoord 3, autoriteit 98%

Het laden van een .json bestand van de harde schijf is een asynchrone bewerking en daarom moet het een callback-functie specificeren die moet worden uitgevoerd nadat het bestand is geladen.

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

Deze functie werkt ook voor het laden van .html of .txt bestanden, door de parameter mime type te overschrijven naar "text/html" , "text/plain" enz.


Antwoord 4, autoriteit 50%

Wanneer in Node.js of bij gebruik van required.js in de browser, u kunt eenvoudig het volgende doen:

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

Let op: het bestand wordt één keer geladen, volgende oproepen gebruiken de cache.


Antwoord 5, autoriteit 34%

Het gebruik van de Fetch API is de gemakkelijkste oplossing:

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

Het werkt perfect in Firefox, maar in Chrome moet je de beveiligingsinstelling aanpassen.


Antwoord 6, autoriteit 32%

  1. Maak eerst een json-bestand. In dit voorbeeld is mijn bestand woorden.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"}]

Antwoord 7, autoriteit 19%

Je kunt het importeren als een ES6-module;

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

Antwoord 8, autoriteit 16%

Zoals veel mensen eerder al zeiden, werkt dit niet met een AJAX-oproep. Er is echter een manier om het te omzeilen. Met behulp van het invoerelement kunt u uw bestand selecteren.

Het geselecteerde bestand (.json) moet deze structuur hebben:

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

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

Vervolgens kunt u het bestand lezen met behulp van JS met 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);
});

Antwoord 9, autoriteit 14%

Heel eenvoudig.
Hernoem uw json-bestand naar “.js” in plaats van “.json”.

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

Volg je code dus normaal.

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

Ter informatie, de inhoud van mijn json ziet er echter uit als onderstaand fragment.

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

Antwoord 10, autoriteit 11%

Afhankelijk van uw browser heeft u mogelijk toegang tot uw lokale bestanden. Maar dit werkt mogelijk niet voor alle gebruikers van uw app.

Om dit te doen, kun je de instructies hier proberen: http://www .html5rocks.com/en/tutorials/file/dndfiles/

Zodra uw bestand is geladen, kunt u de gegevens ophalen met:

var jsonData = JSON.parse(theTextContentOfMyFile);

Antwoord 11, autoriteit 9%

Als u lokale bestanden gebruikt, waarom verpakt u de gegevens dan niet gewoon als een js-object?

data.js

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

Geen XMLHttpRequests, geen parsing, gebruik gewoon MyData.resource rechtstreeks


Antwoord 12, autoriteit 4%

Gebruik gewoon $.getJSON en vervolgens $.each om het paar Key /value te herhalen.
Inhoudsvoorbeeld voor het JSON-bestand en functionele code:

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

Antwoord 13, autoriteit 3%

U kunt de XMLHttpRequest()-methode gebruiken:

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

Je kunt de reactie van myObj zien met console.log statement(uitgecommentarieerd).

Als u AngularJS kent, kunt u $http:

. gebruiken

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

Als je het bestand in een andere map hebt staan, vermeld dan het volledige pad in plaats van de bestandsnaam.


Antwoord 14, autoriteit 2%

Omdat je een webapplicatie hebt, heb je misschien een client en een server.

Als u alleen uw browser heeft en u wilt een lokaal bestand lezen van een javascript dat in uw browser wordt uitgevoerd, betekent dit dat u alleen een client heeft. Om veiligheidsredenen zou de browser je zoiets niet moeten laten doen.

Echter, zoals lauhub hierboven heeft uitgelegd, lijkt dit te werken:

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

Een andere oplossing is om ergens in uw machine een webserver in te stellen (klein in Windows of Monkey in linux) en met een XMLHttpRequest- of D3-bibliotheek, het bestand op te vragen bij de server en het te lezen. De server haalt het bestand op van het lokale bestandssysteem en levert het aan u via het web.


Antwoord 15

Als je een lokale webserver zou kunnen gebruiken (zoals Chris P hierboven suggereerde), en als je zou kunnen gebruiken jQuery, je zou http://api.jquery.com/jQuery.getJSON/ kunnen proberen


Antwoord 16

Ik vond het leuk wat Stano/Meetar hierboven zei. Ik gebruik het om .json-bestanden te lezen.
Ik heb hun voorbeelden uitgebreid met Promise.
Hier is de plunker voor hetzelfde.
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); 
       });

Het lezen van JSON kan worden verplaatst naar een andere functie, voor DRY; maar het voorbeeld hier is meer om te laten zien hoe je beloften kunt gebruiken.


Antwoord 17

Je kunt d3.js gebruiken om JSON-bestanden te importeren. Bel gewoon d3 op je html-body:

<script src="https://d3js.org/d3.v5.min.js"></script>

Zet dan dit op je js-scripts:

  d3.json("test.json").then(function(data_json) {
         //do your stuff
  })

Antwoord 18

Alle bovengenoemde oplossingen werken alleen als u een lokale webserver op uw lokale host heeft. Als u dit wilt bereiken zonder een webserver, moet u mogelijk wat handmatige inspanning leveren door het JSON-bestand te uploaden met behulp van bestandsuploadbesturing. De browser biedt deze functionaliteit niet zonder een lokale server vanwege veiligheidsrisico’s.

Je kunt het geüploade bestand ook ontleden zonder een lokale webserver. Hier is de voorbeeldcode. Ik heb een vergelijkbaar probleem opgelost.

 <div id="content">
    <input type="file" name="inputfile" id="inputfile">
    <br>
    <h2>
        <pre id="output"></pre>
    </h2>
</div>
<script type="text/javascript">
    document.getElementById('inputfile')
        .addEventListener('change', function () {
            let fileReader = new FileReader();
            fileReader.onload = function () {
                let parsedJSON = JSON.parse(fileReader.result);
                console.log(parsedJSON);
                // your code to consume the json                    
            }
            fileReader.readAsText(this.files[0]);
        }) 
</script>

In mijn geval wil ik een lokaal JSON-bestand lezen en tonen in een html-bestand op mijn bureaublad, meer hoef ik niet te doen.

Opmerking: probeer het uploaden van bestanden niet te automatiseren met JavaScript, ook al is dat niet toegestaan ​​vanwege dezelfde beveiligingsbeperkingen die door browsers worden opgelegd.


Antwoord 19

U moet een nieuwe XMLHttpRequest-instantie maken en de inhoud van het json-bestand laden.

Deze tip werkt voor mij (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);
 });

Antwoord 20

Een eenvoudige oplossing is om uw JSON-bestand op een lokaal draaiende server te plaatsen. daarvoor ga je vanaf de terminal naar je projectmap en start je de lokale server op een poortnummer, bijvoorbeeld 8181

python -m SimpleHTTPServer 8181

Bladeren naar http://localhost:8181/ zou alle uw bestanden, inclusief de JSON. Vergeet niet om python te installeren als je dat nog niet hebt gedaan.


Antwoord 21

Het gebruik van jQuery en ajax werkt prima om het JSON-bestand te lezen en de gegevens te manipuleren

    $(document).ready(function () {
        $.ajax({
            url: 'country.json',
            type: 'GET',
            dataType: 'json',
            success: function (code, statut) {
                for (let i in code) {
                    console.log(i)
                           }
            }
        });
    });

Antwoord 22

U kunt D3 gebruiken om de callback af te handelen en het lokale JSON-bestand data.json als volgt te 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>

Antwoord 23

Ik heb het uitstekende antwoord van Stano’s aangenomen en in een belofte verpakt. Dit kan handig zijn als je geen optie zoals node of webpack hebt om op terug te vallen om een ​​json-bestand van het bestandssysteem te 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);
});

Je kunt het zo noemen:

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

Antwoord 24

Dus, als je van plan bent om met “Apache Tomcat” te gaan voor het hosten van je JSON-bestand,

1> Controleer na het opstarten van de server of uw Apache Tomcat actief is door naar deze url te gaan: “localhost:8080” –

voer hier de afbeeldingsbeschrijving in

2> Ga vervolgens naar de map “webapps” – “C:\Program Files\Apache Software Foundation\Tomcat 8.5\webapps”. En maak een projectmap aan of kopieer uw projectmap.

voer hier de afbeeldingsbeschrijving in

3> Plak je json-bestand daar.
voer hier de afbeeldingsbeschrijving in

4> En dat is het. Je bent klaar! Ga gewoon naar – “http://localhost:8080/$project_name$/$jsonFile_name$.json” voer hier de afbeeldingsbeschrijving in

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Other episodes