323

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

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

Файл test.json:

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

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

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

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

У кого-нибудь есть решение?

javascript jquery json firebug local-files Патрик Браун
источник

Когда вы возвращаете JSONстроку, вы уже получаете объект javascript, его не нужно использовать eval().

Йода

1

Что вы называете "локальным" файлом JSON? локально в браузере или на сервере?

seppo0010

2

Вы не дали нам достаточно деталей. В файле test.jsonне указан путь, поэтому он является относительным URI относительно местоположения страницы, к которой он обращается. Например, @ seppo0010 говорит, что он будет локальным для сервера, если страница находится где-то на удаленном сервере, и будет относительным по отношению к вашему компьютеру, если страница находится в локальной файловой системе, доступ к которой осуществляется по file://протоколу.

Hippietrail

293

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

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

seppo0010
источник

47

Вам действительно разрешен доступ к локальному файлу?

Мааша

3

Нет, это не может быть файл, но должен обслуживаться веб-сервером.

Крис Эриксон

15

Совершенно верно. Безопасность Chromes намного более жесткая, чем Firefox или другие. Загрузка чего-либо с использованием xhr, Josn, Xml и т. Д. Практически полностью закрыта в Chrome, за исключением одной или двух вещей.

Shawty

1

Я попробовал это, но не повезло. В консоли также нет ошибок :(

Говинд Кайлас,

11

Я рекомендую использовать myjson.com для загрузки локального файла и доступа к нему из браузера Chrome.

Химический Программист

167

У меня была такая же потребность (для тестирования моего приложения 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/

Ehvince
источник

4

Если вы делаете это с шуткой, то не забудьте сделать, jest.dontMock('./data.json');иначе результат будет пустым. Может быть полезным для кого-то там :)

Håvard Geithus

1

Каков контекст этого кода? Что ты делаешь с json?

Дражен Беловук

4

Пожалуйста, предоставьте полный пример: я получаю сообщение об ошибке:has not been loaded yet for context: _. Use require([])

shaijut

2

require не работает в браузере, потому что это модуль node.js. если OP хочет загрузить его в браузер, следует использовать fetch - это правильное решение.

sniffingdoggo

1

Да, require это для узла, но requireJS можно использовать и в браузерах: «RequireJS - это загрузчик файлов и модулей JavaScript. Он оптимизирован для использования в браузерах, но может использоваться в других средах JavaScript, таких как Rhino и Node. "

За Квестед Аронссон

97

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

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

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

источник:

aloisdg переходит на codidact.com
источник

1

При использовании Fetch API вам по-прежнему запрещен доступ к локальным файлам, если вы не отключили параметр безопасности?

LarsH

3

@LarsH Видимо да, я попробовал это сегодня утром и получить api не может прочитать локальный файл json со схемой file: //. Этот подход выглядит так чисто, но вы не можете использовать его для локальных файлов

keysl

1

@keysl Хорошо, наверное, так должно быть по соображениям безопасности. (И вы правы, я имел в виду «запрещенный доступ к файлам по file://схеме». Но это хороший чистый подход. Я начал использовать его благодаря этому ответу.

LarsH

Вы не можете получить доступ к локальным файлам с помощью API получения

Антон Злыденко

89

Если вы хотите позволить пользователю выбрать локальный файл 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/

Траусти Кристьянссон
источник

4

API FileReader не поддерживается в IE 8 или 9, но все остальные браузеры в порядке: caniuse.com/#search=filereader

northben

Он отлично работает в Chrome, вы увидите ваши данные вnewArr

Belter

Этот ответ хорош и немного отличается, потому что он не использует jQuery.

DigitalDesignDj

78

Если вы ищете что-то быстрое и грязное, просто загрузите данные в заголовок вашего 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"}
})();

Я должен отметить, что ваш размер кучи (в Chrome) составляет около 4 ГБ, поэтому, если ваши данные больше, чем вы, вы должны найти другой метод. Если вы хотите проверить другой браузер, попробуйте это:

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

jwerre
источник

вы правы в том, что AMD будет работать, но я не думаю, что AMD является правильным решением здесь. самое простое - использовать $ .getJSON. спасибо

Патрик Браун

7

@PatrickBrowne да, getJSON - хорошее решение, но я думаю, что во многих случаях вы столкнетесь с междоменной проблемой (например, загрузка данных из S3).

jwerre

Я нашел это самое простое решение для меня. Файл JSON выглядит почти так же, поэтому нет лишних помех (только «var xyz =» в самом верху файла). Никто не хочет большой файл данных в своем коде.

cslotty

Это неправильно на многих уровнях, я не понимаю, почему у него так много голосов, здесь объясняется больше, если кто-то хочет увидеть codepen.io/KryptoniteDove/post/… «Многие примеры свидетельствуют о том, что вы можете получить доступ к данным с помощью простая функция, такая как приведенная ниже. Фактически, это не загрузка документа JSON, а создание объекта Javascript. Этот метод не будет работать для настоящих файлов JSON. "

lesolorzanov

1

честно говоря, это отличное решение, если у вас есть только некоторые предварительно сохраненные данные и вы хотите разместить статическую страницу

Эван Пу

19

Версия ES5

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

Развернуть фрагмент

xgqfrms
источник

@Pier, если вы используете локальный Сервер приложений, такой как Tomcat или Xampp или Jboss. Сценарий работы

Мирко

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

Пирс

@xgqfrms Fetch API потрясающий!

xgqfrms

2

//xobj.status - целое число xobj.status === "200" должно быть xobj.status === 200

имя_пользователя

@yausername вы правы, извините за этот тип состояния ошибки, и это было исправлено.

xgqfrms

14

Я не могу поверить, сколько раз на этот вопрос был дан ответ, не понимая и / или не решая проблему с действительным кодом оригинального плаката. Тем не менее, я сам начинающий (всего 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"
}

SpoonHonda
источник

11

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

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

webpack 2 <использует файлы по 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-loader! ./ 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.

Ogglas
источник

1

легко и просто.

Our_Benefactors

Вы не можете использовать оператор импорта es6, когда веб-страница загружена с протоколом file :.

Онно ван дер Зее

6

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

$.getJSON('test.json', function(data) {
  console.log(data);
});

Samich
источник

6

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

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

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

нс-1м
источник

4

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

Пол Х

4

Нашел этот поток при попытке (безуспешно) загрузить локальный файл json. Это решение сработало для меня ...

function load_json(src) {
  var head = document.getElementsByTagName('head')[0];

  //use class, as we can't reference by id
  var element = head.getElementsByClassName("json")[0];

  try {
    element.parentNode.removeChild(element);
  } catch (e) {
    //
  }

  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = src;
  script.className = "json";
  script.async = false;
  head.appendChild(script);

  //call the postload function after a slight delay to allow the json to load
  window.setTimeout(postloadfunction, 100)
}

... и используется так ...

load_json("test2.html.js")

... и это <head>...

<head>
  <script type="text/javascript" src="test.html.js" class="json"></script>
</head>

TechSpud
источник

2

Это не кажется многоразовым. Например, если файл json обслуживается удаленным сервером, тайм-аут 100 мс может оказаться недостаточным для загрузки. И поскольку время зависит от скорости соединения клиента, вам придется установить очень длительное время ожидания для клиентов с медленным соединением. Короче говоря, setTimeout не должен использоваться для ожидания загрузки ресурса.

Kenny806

1

Kenny806 - Он предназначен для решения конкретной проблемы - загрузки локальных ресурсов (для не размещенной веб-страницы), так что это означает, что он не очень многократно используется. Существуют тысячи решений для загрузки ресурсов для веб-страниц. Это не решение, это решение. Изменить время ожидания очень просто. Удаляя время ожидания, вы предполагаете, что бесконечное ожидание приемлемо?

TechSpud

2

Я не предлагаю бесконечное ожидание, я предлагаю использовать технику, которая позволяет вам реагировать на загрузку файла, как только он закончится. Моя проблема с тайм-аутом заключается в том, что вам всегда нужно ждать, пока оно не закончится Даже если файл загрузится за 10 мс, вы все равно будете ждать 100 мс. И да, настроить время ожидания легко, но вы предлагаете менять код каждый раз, когда вы хотите загрузить другой файл или когда размер файла изменяется (для оптимизации ожидания). Такое решение ИМХО неверно и может вызвать много головных болей в будущем, особенно когда кто-то пытается его использовать.

Kenny806

Любой, кто использует этот скрипт, должен использовать его в качестве основы для своих собственных скриптов. Вы имеете право на свое мнение о том, является ли этот сценарий неправильным. Почему бы не предложить альтернативное решение? Это определенно не будет работать для всех случаев использования. У меня это сработало, загрузив локальный файл с локальной html-страницы. Я поделился своим решением по этому вопросу, в надежде, что это поможет кому-то еще. Вы пытаетесь загрузить локальный ресурс? Почему бы не передать значение времени ожидания как переменную, основанную на загружаемом файле? Ajax для локальных файлов довольно ограничен.

TechSpud

1

Вам может быть лучше использовать onreadystatechange или onload и дать им функцию. script.onload = имя функции;

Шейн Бест

4

В TypeScript вы можете использовать импорт для загрузки локальных файлов JSON. Например загрузка font.json:

import * as fontJson from '../../public/fonts/font_name.json';

Для этого требуется флаг tsconfig --resolveJsonModule:

// tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "resolveJsonModule": true,
        "esModuleInterop": true
    }
}

Для получения дополнительной информации см. Примечания к выпуску машинописного текста: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html.

teh.fonsi
источник

Можно написать с более подробной информацией, потому что ответ немного неясен.

Залив

3

В angular (или любой другой платформе) вы можете загрузить с помощью http, я использую что-то вроде этого:

this.http.get(<path_to_your_json_file))
 .success((data) => console.log(data));

Надеюсь это поможет.

Раджкиран
источник

3

Я немного отредактировал файл JSON.

myfile.json => myfile.js

В файле JSON (сделайте его переменной JS)

{name: "Whatever"} => var x = {name: "Whatever"}

В конце,

export default x;

Затем,

import JsonObj from './myfile.js';

Супун Кавинда
источник

3

Если вы используете локальный массив для JSON - как вы показали в своем примере в вопросе (test.json), то вы можете использовать parseJSON()метод JQuery ->

var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );

getJSON() используется для получения JSON с удаленного сайта - он не будет работать локально (если вы не используете локальный HTTP-сервер)

дом пастора
источник

2

$.ajax({
       url: "Scripts/testingJSON.json",
           //force to handle it as text
       dataType: "text",
            success: function (dataTest) {

                //data downloaded so we call parseJSON function 
                //and pass downloaded data
                var json = $.parseJSON(dataTest);
                //now json variable contains data in json format
                //let's display a few items
                $.each(json, function (i, jsonObjectList) {
                for (var index = 0; index < jsonObjectList.listValue_.length;index++) {
                      alert(jsonObjectList.listKey_[index][0] + " -- " + jsonObjectList.listValue_[index].description_);
                      }
                 });


             }
  });

Кархан Виджай
источник

1

Подход, который мне нравится использовать, состоит в том, чтобы дополнить / обернуть json объектным литералом, а затем сохранить файл с расширением .jsonp. Этот метод также оставляет исходный файл json (test.json) без изменений, поскольку вместо этого вы будете работать с новым файлом jsonp (test.jsonp). Имя в оболочке может быть любым, но оно должно совпадать с именем функции обратного вызова, которую вы используете для обработки jsonp. Я буду использовать ваш test.json, опубликованный в качестве примера, чтобы показать добавление jsonp-оболочки для файла 'test.jsonp'.

json_callback({"a" : "b", "c" : "d"});

Затем создайте в скрипте повторно используемую переменную с глобальной областью действия для хранения возвращенного JSON. Это сделает возвращенные данные JSON доступными для всех других функций в вашем скрипте, а не только для функции обратного вызова.

var myJSON;

Далее идет простая функция для получения вашего JSON путем инъекции скрипта. Обратите внимание, что мы не можем использовать jQuery здесь, чтобы добавить скрипт к заголовку документа, так как IE не поддерживает метод jQuery .append. Метод jQuery, закомментированный в приведенном ниже коде, будет работать в других браузерах, которые поддерживают метод .append. Он включен в качестве ссылки, чтобы показать разницу.

function getLocalJSON(json_url){
    var json_script  = document.createElement('script');
    json_script.type = 'text/javascript';
    json_script.src  = json_url;
    json_script.id   = 'json_script';
    document.getElementsByTagName('head')[0].appendChild(json_script);
    // $('head')[0].append(json_script); DOES NOT WORK in IE (.append method not supported)
}

Далее следует короткая и простая функция обратного вызова (с тем же именем, что и у оболочки jsonp), чтобы получить данные результатов json в глобальную переменную.

function json_callback(response){
    myJSON = response;            // Clone response JSON to myJSON object
    $('#json_script').remove();   // Remove json_script from the document
}

Теперь к данным json могут обращаться любые функции скрипта, используя точечную запись. Например:

console.log(myJSON.a); // Outputs 'b' to console
console.log(myJSON.c); // Outputs 'd' to console

Этот метод может немного отличаться от того, что вы привыкли видеть, но имеет много преимуществ. Во-первых, один и тот же файл jsonp можно загрузить локально или с сервера, используя те же функции. В качестве бонуса, jsonp уже в междоменном дружественном формате и может также легко использоваться с API типа REST.

Конечно, нет никаких функций обработки ошибок, но зачем она вам нужна? Если вы не можете получить данные json с помощью этого метода, то можете поспорить, что у вас есть некоторые проблемы в самом json, и я бы проверил это на хорошем валидаторе JSON.

Богоявление
источник

1

Вы можете поместить свой JSON в файл JavaScript. Это можно загрузить локально (даже в Chrome) с помощью getScript()функции jQuery .

файл map-01.js:

var json = '{"layers":6, "worldWidth":500, "worldHeight":400}'

main.js

$.getScript('map-01.js')
    .done(function (script, textStatus) {
        var map = JSON.parse(json); //json is declared in the js file
        console.log("world width: " + map.worldWidth);
        drawMap(map);
    })
    .fail(function (jqxhr, settings, exception) {
        console.log("error loading map: " + exception);
    });

вывод:

world width: 500

Обратите внимание, что переменная json объявлена и назначена в файле js.

Виктор Стоддард
источник

0

Я не нашел никакого решения, используя библиотеку Google Closure. Итак, чтобы завершить список будущих висторов, вот как вы загружаете JSON из локального файла с помощью библиотеки Closure:

goog.net.XhrIo.send('../appData.json', function(evt) {
  var xhr = evt.target;
  var obj = xhr.getResponseJson(); //JSON parsed as Javascript object
  console.log(obj);
});

Kenny806
источник

0

json_str = String.raw`[{"name": "Jeeva"}, {"name": "Kumar"}]`;
obj = JSON.parse(json_str);

console.log(obj[0]["name"]);

Развернуть фрагмент

Я сделал это для своего приложения Cordova, как будто я создал новый файл Javascript для JSON и вставил в него данные JSON, а String.rawзатем проанализировал их с помощьюJSON.parse

Jeeva
источник

Если это файл javascript, почему объект так и не просто использует JavaScript Object Notation(JSON): obj = [{"name": "Jeeva"}, {"name": "Kumar"}]

Нуно Андре

Я использовал его, потому что я получил некоторые данные JSON, используя ajax, который пришел в виде строки, поэтому я использую JSON.parseдля преобразования в объект JavaScript

Jeeva

0

function readTextFile(srcfile) {
        try { //this is for IE
            var fso = new ActiveXObject("Scripting.FileSystemObject");;
            if (fso.FileExists(srcfile)) {
                var fileReader = fso.OpenTextFile(srcfile, 1);
                var line = fileReader.ReadLine();
                var jsonOutput = JSON.parse(line); 
            }

        } catch (e) {

        }
}

readTextFile("C:\\Users\\someuser\\json.txt");

Прежде всего я сделал на вкладке сеть запись сетевого трафика для службы, а в теле ответа скопировал и сохранил объект json в локальном файле. Затем вызовите функцию с локальным именем файла, вы должны увидеть объект json в jsonOutout выше.

Фэн Чжан
источник

2

Пожалуйста, объясните свое решение, а не просто вставьте код. Только решение, объясняющее, как это решило проблему, поможет сообществу.

gmuraleekrishna

Примечание: требуется InternetExplorer

Sancarn

0

Что сработало для меня следующее:

Входные данные:

http://ip_address//some_folder_name//render_output.html?relative/path/to/json/fie.json

Код Javascript:

<html>
<head>

<style>
pre {}
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
</style>

<script>
function output(inp) {
    document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}

function gethtmlcontents(){
    path = window.location.search.substr(1)
    var rawFile = new XMLHttpRequest();
    var my_file = rawFile.open("GET", path, true)  // Synchronous File Read
    //alert('Starting to read text')
    rawFile.onreadystatechange = function ()
    {
        //alert("I am here");
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                //alert(allText)
                var json_format = JSON.stringify(JSON.parse(allText), null, 8)
                //output(json_format)
                output(syntaxHighlight(json_format));
            }
        }
    }
    rawFile.send(null);
}

function syntaxHighlight(json) {
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}

gethtmlcontents();
</script>
</head>
<body>
</body>
</html>

Бишвас Мишра
источник

-4

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

Преобразуйте файл JSON в JavaScript, создав функцию, которая возвращает данные в виде объекта JavaScript. Затем вы можете загрузить его тегом <script> и вызвать функцию, чтобы получить нужные данные.

Здесь идет код Python

import json


def json2js(jsonfilepath, functionname='getData'):
    """function converting json file to javascript file: json_data -> json_data.js
    :param jsonfilepath: path to json file
    :param functionname: name of javascript function which will return the data
    :return None
    """
    # load json data
    with open(jsonfilepath,'r') as jsonfile:
        data = json.load(jsonfile)
    # write transformed javascript file
    with open(jsonfilepath+'.js', 'w') as jsfile:
        jsfile.write('function '+functionname+'(){return ')
        jsfile.write(json.dumps(data))
        jsfile.write(';}')

if __name__ == '__main__':
    from sys import argv
    l = len(argv)
    if l == 2:
        json2js(argv[1])
    elif l == 3:
        json2js(argv[1], argv[2])
    else:
        raise ValueError('Usage: python pathTo/json2js.py jsonfilepath [jsfunctionname]')

Sytrus
источник

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

Ответы:

Версия ES5

Версия ES6