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

[{"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” –

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.

3> Plak je json-bestand daar.

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