javascript - Încărcarea unui fișier JSON local

Încerc să încarc un fișier JSON local, dar nu funcționează. Iată codul meu JavaScript (folosind jQuery):

var json = $.getJSON("test.json");
var data = eval("(" +json.responseText + ")");
document.write(data["a"]);

Fișierul test.json:

{"a" : "b", "c" : "d"}

Nu se afișează nimic și Firebug îmi spune că data nu este definit. În Firebug pot vedea json.responseText și este bun și valid, dar este ciudat când copiez linia:

 var data = eval("(" +json.responseText + ")");

În consola Firebug, funcționează și pot accesa datele.

Are cineva vreo soluție?

Răspuns #1

$.getJSON este asincron, așa că ar trebui să faci:

$.getJSON("test.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});

Răspunsul #2

Am avut aceeași nevoie (să testez aplicația mea angularjs), și singura modalitate pe care am găsit-o este să folosesc require.js:

var json = require('./data.json'); //(with path)

notă: fișierul este încărcat o singură dată, apelurile ulterioare vor folosi memoria cache.

Mai multe despre citirea fișierelor cu nodejs: http://docs.nodejitsu.com/articles/file-system/how-to-read-files-in-nodejs

require.js: http://requirejs.org/

Răspunsul #3

Într-un mod mai modern, acum poți folosi API-ul Fetch:

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

Toate browserele moderne suportă API-ul Fetch. (Internet Explorer nu îl suportă, dar Edge da!)

sau cu async/await

async function printJSON() {
    const response = await fetch("test.json");
    const json = await response.json();
    console.log(json);
}

sursă :

Folosind Fetch
Preluare în acțiune
Pot să folosesc...?
Cum să folosești Fetch cu async/await

Răspunsul #4

Dacă dorești să permiți utilizatorului să selecteze fișierul json local (oriunde pe sistemul de fișiere), atunci următoarea soluție funcționează.

Folosește FileReader și JSON.parser (și nu jquery).

<html>
<body>

<form id="jsonFile" name="jsonFile" enctype="multipart/form-data" method="post">

  <fieldset>
    <h2>Json File</h2>
     <input type='file' id='fileinput'>
     <input type='button' id='btnLoad' value='Load' onclick='loadFile();'>
  </fieldset>
</form>


<script type="text/javascript">

  function loadFile() {
    var input, file, fr;

    if (typeof window.FileReader !== 'function') {
      alert("The file API isn't supported on this browser yet.");
      return;
    }

    input = document.getElementById('fileinput');
    if (!input) {
      alert("Um, couldn't find the fileinput element.");
    }
    else if (!input.files) {
      alert("This browser doesn't seem to support the `files` property of file inputs.");
    }
    else if (!input.files[0]) {
      alert("Please select a file before clicking 'Load'");
    }
    else {
      file = input.files[0];
      fr = new FileReader();
      fr.onload = receivedText;
      fr.readAsText(file);
    }

    function receivedText(e) {
      let lines = e.target.result;
      var newArr = JSON.parse(lines); 
    }
  }
</script>

</body>
</html>

Iată o introducere bună despre FileReader: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Răspunsul #5

Dacă cauți ceva simplu, pur și simplu încarcă datele în head în HTML-ul tău:

data.js

var DATA = {"a" : "b", "c" : "d"};

index.html

<head>
   <script src="data.js" ></script>
   <script src="main.js" ></script>
</head>

main.js

(function(){
   console.log(DATA); // {"a" : "b", "c" : "d"}
})();

Totuși, dacă datele tale sunt mai mari decât dimensiunea heap-ului, încearcă un alt browser. Pentru a verifica dimensiunea, fă următoarele:

window.performance.memory.jsHeapSizeLimit / 1024 / 1024 / 1024 + " GBs"
// "4.046875 GBs"

Actualizare ES6:

În loc să folosești tagul <script> pentru a-ți încărca datele, le poți încărca direct în main.js folosind import assert

import data from './data.json' assert {type: 'json'};

Răspunsul #6

cum să folosești `XMLHttpRequest` pentru a încărca fișierul local `json`

versiunea ES5

// required use of an anonymous callback,
// as .open() will NOT return a value but simply returns undefined in asynchronous mode!

function loadJSON(callback) {
  var xObj = new XMLHttpRequest();
  xObj.overrideMimeType("application/json");
  xObj.open('GET', './data.json', true);
  // 1. replace './data.json' with the local path of your file
  xObj.onreadystatechange = function() {
      if (xObj.readyState === 4 && xObj.status === 200) {
          // 2. call your callback function
          callback(xObj.responseText);
      }
  };
  xObj.send(null);
}

function init() {
  loadJSON(function(response) {
    // 3. parse JSON string into JSON Object
    console.log('response =', response);
    var json = JSON.parse(response);
    console.log('your local JSON =', JSON.stringify(json, null, 4));
    // 4. render to your page
    const app = document.querySelector('#app');
    app.innerHTML = '<pre>' + JSON.stringify(json, null, 4) + '</pre>';
  });
}

init();

<section id="app">
   loading...
</section>

versiunea ES6

// required use of an anonymous callback,
// as .open() will NOT return a value but simply returns undefined in asynchronous mode!

const loadJSON = (callback) => {
  const xObj = new XMLHttpRequest();
  xObj.overrideMimeType("application/json");
  // 1. replace './data.json' with the local path of your file
  xObj.open('GET', './data.json', true);
  xObj.onreadystatechange = () => {
      if (xObj.readyState === 4 && xObj.status === 200) {
          // 2. call your callback function
          callback(xObj.responseText);
      }
  };
  xObj.send(null);
}

const init = () => {
  loadJSON((response) => {
      // 3. parse JSON string into JSON Object
      console.log('response =', response);
      const json = JSON.parse(response);
      console.log('your local JSON =', JSON.stringify(json, null, 4));
      // 4. render to your page
      const app = document.querySelector('#app');
      app.innerHTML = `<pre>${JSON.stringify(json, null, 4)}</pre>`;
  });
}

init();

<section id="app">
   loading...
</section>

demonstrație online

https://cdn.xgqfrms.xyz/ajax/XMLHttpRequest/index.html

Răspunsul #7

Adaugă la fișierul tău JSON de la început

var object1 = [

și la sfârșit

Salvează-l

Apoi încarcă-l cu JS pur ca

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

Și acum poți să-l folosești ca object1 - este deja încărcat!

Funcționează perfect în Chrome și fără niciun fel de biblioteci suplimentare

Răspunsul #8

Nu pot să cred de câte ori această întrebare a fost răspunsă fără a înțelege și/sau a aborda problema cu codul real al Autorului Inițial. Totuși, și eu sunt începător (doar 2 luni de programare). Codul meu funcționează perfect, dar simțiți-vă liber să sugerați orice modificări. Iată soluția:

//include the   'async':false   parameter or the object data won't get captured when loading
var json = $.getJSON({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false});  

//The next line of code will filter out all the unwanted data from the object.
json = JSON.parse(json.responseText); 

//You can now access the json variable's object data like this json.a and json.c
document.write(json.a);
console.log(json);

Iată o modalitate mai scurtă de a scrie același cod pe care l-am furnizat mai sus:

var json = JSON.parse($.getJSON({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false}).responseText);

De asemenea, puteți folosi $.ajax în loc de $.getJSON pentru a scrie codul exact în același mod:

var json = JSON.parse($.ajax({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false}).responseText);

În sfârșit, ultima metodă de a face acest lucru este să înfășurați $.ajax într-o funcție. Nu pot să iau meritul pentru aceasta, dar am modificat-o puțin. Am testat-o și funcționează și produce aceleași rezultate ca și codul meu de mai sus. Am găsit această soluție aici --> load json into variable

var json = function () {
    var jsonTemp = null;
    $.ajax({
        'async': false,
        'url': "http://spoonertuner.com/projects/test/test.json",
        'success': function (data) {
            jsonTemp = data;
        }
    });
    return jsonTemp;
}(); 

document.write(json.a);
console.log(json);

Fișierul test.json pe care îl vezi în codul meu de mai sus este găzduit pe serverul meu și conține același obiect de date json pe care el (autorul original al postării) l-a postat.

{
    "a" : "b",
    "c" : "d"
}

Răspunsul #9

Sunt surprins că importul din es6 nu a fost menționat (folosiți cu fișiere mici)

Ex: importă test din './test.json'

webpack 2< folosește json-loader implicit pentru fișierele .json.

https://webpack.js.org/guides/migrating/#json-loader-is-not-required-anymore

Pentru TypeScript:

import test from 'json-loader!./test.json';

TS2307 (TS) Nu se poate găsi modulul 'json-loader!./suburbs.json'

Ca să funcționeze, a trebuit să declar mai întâi modulul. Sper că asta va economisi câteva ore cuiva.

declare module "json-loader!*" {
  let json: any;
  export default json;
}

...

import test from 'json-loader!./test.json';

Dacă am încercat să omit loader din json-loader, am primit următoarea eroare de la webpack:

SCHIMBARE MAJORĂ: Nu mai este permis să omiteți sufixul '-loader' atunci când folosiți loader-e. Trebuie să specificați 'json-loader' în loc de 'json', vedeți https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed