322

Я намагаюся завантажити локальний файл 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, вона працює, і я можу отримати доступ до даних.

У когось є рішення?

— Патрік Браун
джерело

Коли ви повертаєте JSONрядок, ви вже отримуєте об'єкт javascript, не потрібно використовувати eval().

— йода

1

Як ви називаєте "локальний" файл json? локальний у браузері чи сервері?

— seppo0010

2

Ви не дали нам достатньо деталей. У файлі test.jsonне вказано жодного шляху, тому він є відносним URI відносно розташування сторінки, що має до нього доступ. Так, як @ seppo0010 каже, що він буде локальним для сервера, якщо сторінка десь знаходиться на віддаленому сервері, і буде відносно вашого комп'ютера, якщо сторінка знаходиться у вашій локальній файловій системі, до якої звертається file://протокол.

— hippietrail

292

$.getJSON є асинхронним, тому вам слід зробити:

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

— seppo0010
джерело

47

Чи дійсно вам доступний локальний файл?

— maasha

3

Ні, це не може бути файлом, але він повинен обслуговуватися веб-сервером.

— Кріс Еріксон

15

Абсолютно правильно. Захищеність хромів значно жорсткіша, ніж Firefox чи інші. Завантаження чого-небудь за допомогою xhr, Josn, Xml тощо майже все заблоковано в Chrome, за винятком однієї чи двох речей.

— shawty

1

Я спробував це, але не пощастило. Немає помилок і в консолі :(

— Govind Kailas

11

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

— Хімічний програміст

167

У мене була така ж потреба (протестувати додаток angularjs), і єдиний знайдений спосіб - це використовувати Requ.js:

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

Примітка: файл завантажується один раз, для подальших викликів буде використаний кеш.

Детальніше про читання файлів з nodejs: http://docs.nodejitsu.com/articles/file-system/how-to-read-files-in-nodejs

Requ.js: http://requirejs.org/

— Переконайтесь
джерело

4

Якщо ви робите це з жарту, тоді пам’ятайте, що робити, jest.dontMock('./data.json');інакше результат порожній. Може бути корисним для когось там :)

— Håvard Geithus

1

Який контекст цього коду? Що ти робиш json?

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

4

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

— shaijut

2

need не працює в браузері, оскільки це модуль node.js. якщо ОП хоче завантажити його у браузері, слід скористатися результатом - правильне рішення.

— sniffingdoggo

1

Так, вимога призначена для вузла, але RequJS може використовуватися і в браузерах: "RequireJS - це завантажувач файлів і модулів JavaScript. Він оптимізований для використання в браузері, але він може використовуватися в інших середовищах JavaScript, таких як Rhino і Node. "

— Запитаний Аронсон

95

Більш сучасним способом тепер ви можете використовувати API Fetch :

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

Усі сучасні браузери підтримують Fetch API. (Internet Explorer ні, але Edge робить!)

джерело:

— aloisdg переходить на codidact.com
джерело

1

Користуючись API Fetch, вам все ж заборонено доступ до локальних файлів, якщо ви не відключили налаштування безпеки?

— LarsH

3

@LarsH Мабуть, так, я спробував це сьогодні вранці, і завантаження api не в змозі прочитати локальний файл json з файлом: // схема. Цей підхід виглядає настільки чистим, але ви не можете використовувати його для локальних файлів

— keysl

1

@keysl Гаразд, мабуть, мабуть, саме так з міркувань безпеки. (І ви маєте рацію, я мав на увазі "заборонений доступ до файлів через file://схему.) Але це приємний чистий підхід. Я почав використовувати його завдяки цій відповіді.

— LarsH

Ви не можете отримати доступ до локальних файлів за допомогою API для отримання

— anton zlydenko

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/

— Trausti Kristjansson
джерело

4

FileReader API не підтримує в IE 8 або 9, але всі інші браузери OK: 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

@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

— Оглас
джерело

1

легко і прямо.

— Our_Benefactors

Ви не можете використовувати оператор імпорту es6, коли веб-сторінка завантажена файлом: Protocol.

— Onno van der Zee

6

Спробуйте таким чином (але також врахуйте, що JavaScript не має доступу до файлової системи клієнта):

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

— Самич
джерело

6

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

Це питання https://github.com/mbostock/d3/isissue/673

Це порядок виправлення для D3 для роботи з локальними файлами json. https://github.com/mbostock/d3/pull/632

— нс-1м
джерело

4

ця відповідь значно покращиться на прикладі того, як використовувати D3 для читання файлів json.

— Пол H

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 - Мається на увазі вирішити конкретну проблему - завантаження локальних ресурсів (для не розміщеної веб-сторінки), так що це означає, що це не дуже багаторазово. Є 1000 рішень для завантаження ресурсів для веб-сторінок. Це не рішення, це рішення. Змінити час очікування дуже просто. Знімаючи тайм-аут, ви припускаєте, що нескінченне очікування є прийнятним?

— TechSpud

2

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

— Kenny806

Кожен, хто використовує цей скрипт, повинен використовувати його як основу для власних сценаріїв. Ви маєте право на свою думку щодо того, чи не є цей сценарій неправильним. Чому б не запропонувати альтернативне рішення? Це точно не працюватиме для всіх випадків використання. Це працювало для мене, завантажуючи локальний файл із локальної сторінки html. Я поділився своїм вирішенням цього питання, сподіваючись, що це допоможе комусь іншому. Ви намагаєтеся завантажити локальний ресурс? Чому б не передати значення тайм-ауту у вигляді змінної на основі файлу, який ви завантажуєте? Ajax для локальних файлів досить обмежений.

— TechSpud

1

Можливо, вам буде краще скористатися тимчасовою зміною або завантаженням та наданням їм функції. 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

— тех.фонси
джерело

Може писати з детальнішою інформацією, оскільки відповідь трохи незрозуміла.

— Бей

3

У кутовій (або будь-якій іншій рамці) ви можете завантажити за допомогою http get I use it like like this:

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

Сподіваюсь, це допомагає.

— rajkiran
джерело

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)

— Manse
джерело

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) за допомогою jQuery'sgetScript() функції .

Файл 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. Отже, просто для заповнення списку майбутніх відвідувачів, ось як ви завантажуєте JSON з локального файлу в бібліотеку закриття:

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

— Кенні806
джерело

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"}]

— Nuno André

Я використовував це, тому що я отримав деякі дані 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>

— Bishwas Mishra
джерело

-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]')

— ситрус
джерело

Завантаження локального файлу JSON

Версія ES5

Версія ES6