Загрузка локального файла JSON - PullRequest
Новая
       70

Загрузка локального файла JSON

281 голосов
/ 08 сентября 2011

Я пытаюсь загрузить локальный файл JSON, но он не будет работать.Вот мой код JavaScript (с использованием jQuery: 

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

Файл test.json: 

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

Ничего не отображается, и Firebug сообщает мне, что данные не определены.json.responseText и это хорошо и правильно, но странно, когда я копирую строку: 

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

в консоли Firebug, она работает, и я могу получить доступ к данным.

У любого есть решение

Ответы [ 22 ]

263 голосов
/ 08 сентября 2011

$.getJSON является асинхронным, поэтому вы должны сделать: 

$.getJSON("test.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});
145 голосов
/ 05 августа 2013

У меня была такая же потребность (для тестирования моего приложения angularjs), и я нашел единственный способ использовать require.js: 

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

примечание: файл загружается один раз, дальнейшие вызовы будут использовать кеш.

Подробнее о чтении файлов с помощью nodejs: http://docs.nodejitsu.com/articles/file-system/how-to-read-files-in-nodejs

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

70 голосов
/ 30 января 2014

Если вы хотите позволить пользователю выбрать локальный файл json (в любом месте файловой системы), тогда работает следующее решение.

Использует FileReader и JSON.parser (и не использует 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>

Вот хорошее введение в FileReader: http://www.html5rocks.com/en/tutorials/file/dndfiles/

67 голосов
/ 01 июня 2015

Если вы ищете что-то быстрое и грязное, просто загрузите данные в заголовок вашего HTML-документа.

data.js 

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

index.html 

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

main.js 

(function(){
   console.log(DATA) // {"a" : "b", "c" : "d"}
})()
64 голосов
/ 16 февраля 2017

Более современным способом теперь можно использовать Fetch API : 

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

Все современные браузеры поддерживают Fetch API.(Internet Explorer не делает, но Edge делает!)

источник:

14 голосов
/ 19 сентября 2016

ace.webgeeker.xyz 

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

function init() {
    loadJSON(function(response) {
        // Parse JSON string into object
        var actual_JSON = JSON.parse(response);
    });
}

Версия ES6 

const loadJSON = (callback) => {
    let 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 = () => {
        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);
}

const init = () => {
    loadJSON((response) => {
        // Parse JSON string into object
        let actual_JSON = JSON.parse(response);
    });
}
10 голосов
/ 24 января 2017

Я не могу поверить, сколько раз на этот вопрос был дан ответ, не понимая и / или не решая проблему с действительным кодом оригинального плаката.Тем не менее, я сам новичок (всего 2 месяца программирования).Мой код работает отлично, но не стесняйтесь предлагать любые изменения в нем. Вот решение: 

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

Вот более короткий способ написания того же кода, который я предоставил выше: 

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

Вы также можете использовать $ .ajax вместо$ .getJSON, чтобы написать код точно так же: 

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

Наконец, последний способ сделать это - это обернуть $ .ajax в функцию.Я не могу взять кредит на этот, но я немного изменил его.Я протестировал его, и он работает и дает те же результаты, что и мой код выше.Я нашел это решение здесь -> загрузить json в переменную 

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

Файл test.json , который вы видите в моем коде выше, размещен на моем сервере исодержит тот же объект данных json, который он (исходный плакат) опубликовал.

{
    "a" : "b",
    "c" : "d"
}
8 голосов
/ 26 декабря 2017

Я удивлен, что импорт из es6 не был упомянут (использовать с небольшими файлами)

Пример: import test from './test.json'

webpack 2 <использует <code>json-loader по умолчанию для .json файлы.

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

для TypeScript : 

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

TS2307 (TS) Не удается найти модуль 'json-загрузчик! ./ suburbs.json '

Чтобы заставить его работать, мне сначала нужно было объявить модуль.Надеюсь, это сэкономит кому-то несколько часов. 

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

...

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

Если я попытался пропустить loader из json-loader, я получил следующую ошибку от webpack:

BREAKING CHANGE: больше не разрешается пропускать суффикс '-loader' при использовании загрузчиков.Вам нужно указать «json-loader» вместо «json», см. https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

6 голосов
/ 30 июня 2012

Недавно D3js может обрабатывать локальный файл json.

Это проблема https://github.com/mbostock/d3/issues/673

Это патч для D3 для работы с локальными файлами json. https://github.com/mbostock/d3/pull/632

6 голосов
/ 08 сентября 2011

Попробуйте использовать такой способ (но учтите, что JavaScript не имеет доступа к файловой системе клиента): 

$.getJSON('test.json', function(data) {
  console.log(data);
});
Страница:
...