Chargement du fichier JSON local

322

J'essaie de charger un fichier JSON local mais cela ne fonctionnera pas. Voici mon code JavaScript (en utilisant jQuery:

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

Le fichier test.json:

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

Rien ne s'affiche et Firebug me dit que les données ne sont pas définies. Dans Firebug je peux voir json.responseTextet c'est bon et valide, mais c'est étrange quand je copie la ligne:

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

dans la console de Firebug, cela fonctionne et je peux accéder aux données.

Quelqu'un a une solution?

javascript jquery json firebug local-files Patrick Browne
la source
Lorsque vous retournez une JSONchaîne, vous récupérez déjà un objet javascript, pas besoin de l'utiliser eval().
yoda
1
Comment appelez-vous un fichier json "local"? local sur le navigateur ou le serveur?
seppo0010
2
Vous ne nous avez pas donné suffisamment de détails. Le fichier test.jsonne spécifie aucun chemin, il s'agit donc d'un URI relatif, relatif à l'emplacement de la page y accédant. Ainsi, comme @ seppo0010 dit qu'elle sera locale au serveur si la page se trouve sur un serveur distant quelque part et qu'elle sera relative à votre ordinateur si la page se trouve dans votre système de fichiers local accessible par le file://protocole.
hippietrail

Réponses:

292

$.getJSON est asynchrone, vous devez donc faire:

$.getJSON("test.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});
seppo0010
la source
47
Êtes-vous vraiment autorisé à accéder à un fichier local?
maasha
3
Non, il ne peut pas être fichier mais doit être servi par le serveur web.
Kris Erickson
15
Absolument correct. La sécurité de Chromes est beaucoup plus stricte que Firefox ou autres. Charger quoi que ce soit à l'aide de xhr, Josn, Xml, etc. est à peu près tout verrouillé dans Chrome, à l'exception d'une ou deux choses.
shawty
1
J'ai essayé ça, mais pas de chance. Aucune erreur dans la console également :(
Govind Kailas
11
Je recommande d'utiliser myjson.com pour télécharger votre fichier local et y accéder à partir du navigateur Chrome.
Programmeur de produits chimiques le
167

J'avais le même besoin (pour tester mon application angularjs), et la seule façon que j'ai trouvée est d'utiliser require.js:

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

remarque: le fichier est chargé une fois, les appels ultérieurs utiliseront le cache.

Plus d'informations sur la lecture de fichiers avec nodejs: http://docs.nodejitsu.com/articles/file-system/how-to-read-files-in-nodejs

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

Ehvince
la source
4
Si vous faites cela avec plaisanterie, n'oubliez pas de le faire, jest.dontMock('./data.json');sinon le résultat est vide. Cela pourrait être utile pour quelqu'un là-bas :)
Håvard Geithus
1
Quel est le contexte de ce code? Que faites-vous json?
Drazen Bjelovuk
4
Veuillez fournir un exemple complet: je reçois une erreur:has not been loaded yet for context: _. Use require([])
shaijut
2
require ne fonctionne pas sur le navigateur car il s'agit du module node.js. si OP veut le charger dans le navigateur, utiliser fetch est la bonne solution.
sniffingdoggo
1
Oui, require est pour le nœud, mais requireJS peut également être utilisé dans les navigateurs: "RequireJS est un chargeur de fichiers et de modules JavaScript. Il est optimisé pour une utilisation dans le navigateur, mais il peut être utilisé dans d'autres environnements JavaScript, comme Rhino et Node. "
Per Quested Aronsson
97

De manière plus moderne, vous pouvez désormais utiliser l' API Fetch :

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

Tous les navigateurs modernes prennent en charge l'API Fetch. (Internet Explorer ne le fait pas, mais Edge le fait!)

la source:

aloisdg passe à codidact.com
la source
1
Lorsque vous utilisez l'API Fetch, vous est-il toujours interdit d'accéder aux fichiers locaux, sauf si vous désactivez un paramètre de sécurité?
LarsH
3
@LarsH Apparemment oui, je l'ai essayé ce matin et fetch api ne peut pas lire un fichier json local avec le schéma file: //. Cette approche a l'air si propre mais vous ne pouvez pas l'utiliser pour les fichiers locaux
keysl
1
@keysl OK, je suppose que c'est probablement le cas pour des raisons de sécurité. (Et vous avez raison, je voulais dire "interdit d'accéder aux fichiers via le file://schéma.) Mais c'est une belle approche propre. J'ai commencé à l'utiliser grâce à cette réponse.
LarsH
Vous ne pouvez pas accéder aux fichiers locaux avec l'API fetch
anton zlydenko
89

Si vous souhaitez laisser l'utilisateur sélectionner le fichier json local (n'importe où sur le système de fichiers), la solution suivante fonctionne.

Il utilise utilise FileReader et JSON.parser (et pas de 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>

Voici une bonne introduction sur FileReader: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Trausti Kristjansson
la source
4
L'API FileReader n'est pas prise en charge dans IE 8 ou 9, mais tous les autres navigateurs sont OK: caniuse.com/#search=filereader
northben
Cela fonctionne parfaitement dans Chrome, vous verrez vos données dansnewArr
Belter
Cette réponse est agréable et un peu différente car elle n'utilise pas jQuery.
DigitalDesignDj
78

Si vous cherchez quelque chose de rapide et de sale, chargez simplement les données dans la tête de votre document 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"}
})();

Je dois mentionner que votre taille de tas (dans Chrome) est d'environ 4 Go, donc si vos données sont plus grandes que cela, vous devriez trouver une autre méthode. Si vous voulez vérifier un autre navigateur, essayez ceci:

window.performance.memory.jsHeapSizeLimit / 1024 / 1024 / 1024 + " GBs"
// "4.046875 GBs"
jwerre
la source
vous avez raison de penser qu'AMD fonctionnerait, mais je ne pense pas qu'AMD soit la bonne solution ici. le plus simple est d'utiliser $ .getJSON. merci
Patrick Browne
7
@PatrickBrowne oui, getJSON est une bonne solution mais je pense que dans de nombreux cas, vous allez rencontrer un problème inter-domaines (chargement des données depuis S3 par exemple).
jwerre
J'ai trouvé que c'était la solution la plus simple pour moi. Le fichier JSON est presque identique, donc pas d'encombrement supplémentaire (seulement un "var xyz =" tout en haut du fichier). Personne ne veut un fichier Big Data dans son code.
cslotty
C'est faux à plusieurs niveaux, je ne comprends pas comment il a autant de votes, ici il explique plus si quelqu'un veut voir codepen.io/KryptoniteDove/post/… "De nombreux exemples prouvent que vous pouvez accéder aux données avec un fonction simple comme celle ci-dessous. En fait, ce n'est pas réellement charger un document JSON mais créer un objet Javascript. Cette technique ne fonctionnera pas pour les vrais fichiers JSON. "
lesolorzanov
1
Honnêtement, c'est une excellente solution si vous avez juste des données prédéfinies et que vous souhaitez diffuser une page statique
Evan Pu
19

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

Version 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);
    });
}
Développer l'extrait

xgqfrms
la source
@Pier si vous utilisez un serveur d'applications local comme Tomcat ou Xampp ou Jboss. le travail de script
Mirko Cianfarani
@MirkoCianfarani en effet car vous n'utilisez pas le file:///protocole et le fichier ne peut plus être considéré comme local.
Pier
@xgqfrms Fetch API est génial!
xgqfrms
2
//xobj.status est un entier xobj.status === "200" devrait être xobj.status === 200
yausername
@yausername vous avez raison, je suis désolé pour ce type d'état d'erreur, et il a été corrigé.
xgqfrms
14

Je ne peux pas croire combien de fois cette question a été répondue sans comprendre et / ou résoudre le problème avec le code réel de l'affiche originale. Cela dit, je suis moi-même un débutant (seulement 2 mois de codage). Mon code fonctionne parfaitement, mais n'hésitez pas à suggérer des modifications. Voici la solution: 

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

Voici une manière plus courte d'écrire le même code que j'ai fourni ci-dessus:

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

Vous pouvez également utiliser $ .ajax au lieu de $ .getJSON pour écrire le code exactement de la même manière:

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

Enfin, la dernière façon de procéder consiste à encapsuler $ .ajax dans une fonction. Je ne peux pas prendre le crédit pour celui-ci, mais je l'ai modifié un peu. Je l'ai testé et cela fonctionne et produit les mêmes résultats que mon code ci-dessus. J'ai trouvé cette solution ici -> charger json dans une 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);

Le fichier test.json que vous voyez dans mon code ci-dessus est hébergé sur mon serveur et contient le même objet de données json qu'il (l'affiche originale) avait posté.

{
    "a" : "b",
    "c" : "d"
}
SpoonHonda
la source
11

Je suis surpris que l'importation depuis es6 n'ait pas été mentionnée (utilisation avec de petits fichiers)

Ex: import test from './test.json'

webpack 2 <utilise la json-loadervaleur par défaut pour les .jsonfichiers.

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

Pour TypeScript :

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

TS2307 (TS) Impossible de trouver le module 'json-loader! ./ suburbs.json'

Pour le faire fonctionner, je devais d'abord déclarer le module. J'espère que cela fera gagner quelques heures à quelqu'un.

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

...

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

Si j'ai essayé d'omettre loaderde, json-loaderj'ai obtenu l'erreur suivante webpack:

BREAKING CHANGE: Il n'est plus permis d'omettre le suffixe «-loader» lors de l'utilisation de chargeurs. Vous devez spécifier «json-loader» au lieu de «json», voir https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

Ogglas
la source
1
facile et simple.
Our_Benefactors
Vous ne pouvez pas utiliser l'instruction d'importation es6 lorsque la page Web est chargée avec le protocole file:.
Onno van der Zee
6

Essayez de cette façon (mais veuillez également noter que JavaScript n'a pas accès au système de fichiers client):

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

Trouvé ce fil lors de la tentative (infructueuse) de charger un fichier json local. Cette solution a fonctionné pour moi ...

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

... et est utilisé comme ça ...

load_json("test2.html.js")

... et c'est le <head>...

<head>
  <script type="text/javascript" src="test.html.js" class="json"></script>
</head>
TechSpud
la source
2
Cela ne semble pas très réutilisable. Par exemple, si le fichier json est servi par un serveur distant, un délai d'expiration de 100 ms peut ne pas être suffisant pour le chargement. Et comme le temps dépend de la vitesse de connexion du client, vous devrez définir un délai très long pour les clients avec une connexion lente. En bref, setTimeout ne doit pas être utilisé pour attendre le chargement d'une ressource.
Kenny806
1
Kenny806 - Il est destiné à résoudre un problème spécifique - le chargement de ressources locales (pour une page Web non hébergée), ce qui signifie que ce n'est pas très réutilisable. Il existe des milliers de solutions de chargement de ressources pour les pages hébergées sur le Web. Ce n'est pas la solution, c'est une solution. Il est très simple de modifier le délai d'expiration. En supprimant le délai d'attente, suggérez-vous qu'une attente infinie est acceptable?
TechSpud
2
Je ne suggère pas une attente infinie, je suggère d'utiliser une technique qui vous permet de réagir au chargement du fichier dès qu'il est terminé. Mon problème avec le timeout est que vous devez toujours attendre qu'il se termine. Même si le fichier s'était chargé en 10 ms, vous attendriez toujours 100 ms. Et oui, l'ajustement du délai d'attente est facile, mais ce que vous proposez est de changer le code chaque fois que vous souhaitez charger un fichier différent ou lorsque la taille du fichier change (pour optimiser l'attente). Une telle solution est à mon humble avis erronée et peut causer beaucoup de maux de tête à l'avenir, en particulier lorsque quelqu'un d'autre essaie de l'utiliser.
Kenny806
Toute personne utilisant ce script doit l'utiliser comme base pour ses propres scripts. Vous avez le droit de savoir si ce script est incorrect. Pourquoi ne pas proposer une solution alternative? Cela ne fonctionnera certainement pas pour tous les cas d'utilisation. Cela a fonctionné pour moi, en chargeant un fichier local à partir d'une page html locale. J'ai partagé ma solution sur cette question, dans l'espoir que cela aiderait quelqu'un d'autre. Essayez-vous de charger une ressource locale? Pourquoi ne pas transmettre la valeur du délai d'expiration en tant que variable, en fonction du fichier que vous chargez? Ajax sur les fichiers locaux est assez limité.
TechSpud
1
Il vaut mieux utiliser onreadystatechange ou onload et leur donner une fonction. script.onload = nom_fonction;
Shane Best
4

Dans TypeScript, vous pouvez utiliser l'importation pour charger des fichiers JSON locaux. Par exemple, charger un font.json:

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

Cela nécessite un indicateur tsconfig --resolveJsonModule:

// tsconfig.json

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

Pour plus d'informations, consultez les notes de publication de typescript: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html

teh.fonsi
la source
Peut écrire avec plus de détails car la réponse est un peu difficile à comprendre.
Bay
3

Dans angular (ou tout autre framework), vous pouvez charger en utilisant http get je l'utilise quelque chose comme ceci:

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

J'espère que cela t'aides.

rajkiran
la source
3

Ce que j'ai fait, c'est éditer un peu le fichier JSON.

myfile.json => myfile.js

Dans le fichier JSON, (en faire une variable JS)

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

À la fin,

export default x;

Ensuite,

import JsonObj from './myfile.js';

Supun Kavinda
la source
3

Si vous utilisez un tableau local pour JSON - comme vous l'avez montré dans votre exemple dans la question (test.json), alors vous pouvez est la parseJSON()méthode de JQuery ->

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

getJSON() est utilisé pour obtenir JSON à partir d'un site distant - cela ne fonctionnera pas localement (sauf si vous utilisez un serveur HTTP local)

Presbytère
la source
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_);
                      }
                 });


             }
  });
Karhan Vijay
la source
1

Une approche que j'aime utiliser est de remplir / envelopper le json avec un littéral objet, puis d'enregistrer le fichier avec une extension de fichier .jsonp. Cette méthode laisse également votre fichier json d'origine (test.json) inchangé, car vous allez plutôt travailler avec le nouveau fichier jsonp (test.jsonp). Le nom sur l'encapsuleur peut être n'importe quoi, mais il doit être le même nom que la fonction de rappel que vous utilisez pour traiter le jsonp. Je vais utiliser votre test.json publié comme exemple pour montrer l'ajout de wrapper jsonp pour le fichier 'test.jsonp'.

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

Ensuite, créez une variable réutilisable avec une portée globale dans votre script pour contenir le JSON renvoyé. Cela rendra les données JSON renvoyées disponibles pour toutes les autres fonctions de votre script au lieu de la fonction de rappel uniquement.

var myJSON;

Vient ensuite une fonction simple pour récupérer votre json par injection de script. Notez que nous ne pouvons pas utiliser jQuery ici pour ajouter le script à l'en-tête du document, car IE ne prend pas en charge la méthode jQuery .append. La méthode jQuery commentée dans le code ci-dessous fonctionnera sur d'autres navigateurs qui prennent en charge la méthode .append. Il est inclus comme référence pour montrer la différence.

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

Vient ensuite une fonction de rappel courte et simple (avec le même nom que l'encapsuleur jsonp) pour obtenir les données de résultats json dans la variable globale.

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

Les données json sont désormais accessibles par toutes les fonctions du script en utilisant la notation par points. Par exemple:

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

Cette méthode peut être un peu différente de ce que vous avez l'habitude de voir, mais présente de nombreux avantages. Tout d'abord, le même fichier jsonp peut être chargé localement ou à partir d'un serveur en utilisant les mêmes fonctions. En prime, jsonp est déjà dans un format compatible avec plusieurs domaines et peut également être facilement utilisé avec les API de type REST.

Certes, il n'y a pas de fonctions de gestion des erreurs, mais pourquoi en auriez-vous besoin? Si vous ne parvenez pas à obtenir les données json en utilisant cette méthode, alors vous pouvez à peu près parier que vous avez des problèmes avec le json lui-même, et je le vérifierais sur un bon validateur JSON.

Épiphanie
la source
1

Vous pouvez mettre votre json dans un fichier javascript. Cela peut être chargé localement (même dans Chrome) en utilisant la getScript()fonction de jQuery .

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

production:

world width: 500

Notez que la variable json est déclarée et affectée dans le fichier js.

Victor Stoddard
la source
0

Je n'ai trouvé aucune solution en utilisant la bibliothèque Google Closure. Donc, juste pour compléter la liste des futurs visiteurs, voici comment charger un JSON à partir d'un fichier local avec la bibliothèque 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
la source
0 

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

console.log(obj[0]["name"]);
Développer l'extrait

J'ai fait cela pour mon application cordova, comme si j'avais créé un nouveau fichier javascript pour le JSON et collé les données JSON String.rawpuis les analyser avecJSON.parse

Jeeva
la source
Si c'est un fichier javascript pourquoi faire un objet donc et pas simplement en utilisant JavaScript Object Notation(JSON): obj = [{"name": "Jeeva"}, {"name": "Kumar"}]
Nuno André
Je l'ai utilisé parce que j'ai récupéré des données json en utilisant ajax, qui est venu sous forme de chaîne, donc je l'utilise JSON.parsepour convertir en un objet 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");

Ce que j'ai fait, tout d'abord, à partir de l'onglet réseau, enregistrer le trafic réseau pour le service, et à partir du corps de réponse, copier et enregistrer l'objet json dans un fichier local. Appelez ensuite la fonction avec le nom du fichier local, vous devriez pouvoir voir l'objet json dans jsonOutout ci-dessus.

Feng Zhang
la source
2
Veuillez expliquer votre solution au lieu de simplement coller le code. Seule une solution expliquant comment elle a résolu le problème aidera la communauté.
gmuraleekrishna
Remarque: Nécessite InternetExplorer
Sancarn
0

Ce qui a fonctionné pour moi est le suivant:

Contribution: 

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

Code 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
la source
-4

Si vous avez Python installé sur votre machine locale (ou si cela ne vous dérange pas d'en installer un), voici une solution de contournement indépendante du navigateur pour le problème d'accès au fichier JSON local que j'utilise:

Transformez le fichier JSON en JavaScript en créant une fonction qui renvoie les données en tant qu'objet JavaScript. Ensuite, vous pouvez le charger avec la balise <script> et appeler la fonction pour obtenir les données que vous souhaitez.

Voici le code 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
la source