Chargement fichier JSON locale

StackOverflow https://stackoverflow.com/questions/7346563

Question

Je suis en train de charger un fichier JSON local, mais il 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. En Firebug je peux voir json.responseText et il est bon et valable, mais il 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 at-il une solution?

Était-ce utile?

La solution

$.getJSON est asynchrone de sorte que vous devez faire: 

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

Autres conseils

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

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

Note:. Le fichier est chargé une fois, d'autres appels utiliseront le cache

En savoir plus sur la lecture des fichiers avec nodejs: http : //docs.nodejitsu.com/articles/file-system/how-to-read-files-in-nodejs

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

Si vous voulez laisser l'utilisateur de sélectionner le fichier JSON local (partout sur le système de fichiers), les travaux de solution suivante.

Il utilise des utilisations FileReader et JSON.parser (et non 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 intro sur FileReader: http://www.html5rocks.com / fr / tutorials / fichier / dndfiles /

D'une façon plus moderne, vous pouvez maintenant utiliser le Fetch API : 

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

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

source:

Si vous cherchez quelque chose rapide et sale il suffit de charger 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"}
})()

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 Version 

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

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 débutant (seulement 2 mois de codage). Mon code fonctionne parfaitement, mais ne 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 façon plus courte d'écrire le même code I 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 le faire est d'envelopper .ajax $ dans une fonction. Je ne peux pas prendre le crédit pour celui-ci, mais je ne le modifier un peu. Je l'ai testé et il fonctionne et produit les mêmes résultats que mon code ci-dessus. J'ai trouvé cette solution ici -> JSON de charge dans la 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);

test.json fichier 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 d'origine) avait affiché. 

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

Je suis surpris de l'importation ES6 n'a pas été mentionné (utilisation avec de petits fichiers)

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

webpack 2 json-loader par défaut pour les fichiers .json.

https://webpack.js.org / guides / migrante / # JSON-loader-est-pas-besoin-plus

tapuscrit : 

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

TS2307 (TS) peut-il pas trouver le module 'JSON-chargeur! ./ suburbs.json'

Pour le faire fonctionner, je devais déclarer le premier module. J'espère que cela permettra d'économiser quelques heures pour quelqu'un. 

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

...

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

Si j'ai essayé de loader omettent de json-loader j'ai eu l'erreur suivante de webpack:

RUPTURE CHANGE: Il est plus autorisé à omettre le suffixe « -loader » lors de l'utilisation des chargeurs. Vous devez spécifier « JSON-loader » au lieu de « JSON », voir https://webpack.js.org/guides / migrante / # chargeautomatic-nom-module-extension retiré

Essayez est de telle manière (mais note également que JavaScript ne s'il vous plaît ne pas avoir accès au système de fichiers client): 

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

Récemment D3js est capable de gérer le fichier JSON local.

Ceci est la question https://github.com/mbostock/d3/issues/673

Ceci est le patch afinde pour D3 à travailler avec des fichiers JSON locaux. https://github.com/mbostock/d3/pull/632

trouvé ce fil lorsque vous essayez (sans succès) 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>

Dans tapuscrit vous pouvez utiliser l'importation pour charger des fichiers JSON locaux. Par exemple le chargement d'un font.json: 

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

Cela nécessite un drapeau TSconfig --resolveJsonModule: 

// tsconfig.json

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

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

Dans (cadre ou tout autre) angulaire, 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));

Hope this helps. 

$.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_);
                      }
                 });


             }
  });

Si vous utilisez un tableau local pour JSON - que vous montriez dans votre exmaple dans la question (test.json), alors vous pouvez est la méthode parseJSON de JQuery -> 

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

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

Je n'ai pas trouvé de solution en utilisant la bibliothèque de fermeture de Google. Il suffit donc de compléter la liste des futurs vistors, voici comment vous chargez un fichier JSON local avec bibliothèque Fermeture: 

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

Une approche que je tiens à utiliser est de pad / envelopper le JSON avec un littéral d'objet, puis enregistrez le fichier avec une extension de fichier .jsonp. Cette méthode laisse aussi votre fichier JSON d'origine (test.json) non modifié, comme vous allez travailler avec le nouveau fichier jsonp (de test.jsonp) à la place. Le nom sur l'emballage peut être quelque chose, mais il ne doit pas être le même nom que la fonction de rappel que vous utilisez pour traiter le jsonp. Je vais utiliser votre test.json affiché comme exemple pour montrer l'ajout d'emballage jsonp pour le fichier « test.jsonp ». 

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

Ensuite, créer une variable réutilisable avec une portée globale dans votre script pour maintenir le JSON retourné. Cela rendra les données JSON retour disponibles à toutes les autres fonctions dans votre script au lieu de simplement la fonction de rappel. 

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 à la tête de document, IE ne supporte pas la méthode de jQuery. La méthode jQuery a commenté dans le code ci-dessous fonctionnera sur d'autres navigateurs qui ne supportent 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)
}

Ensuite est une fonction de rappel courte et simple (avec le même nom que l'emballage jsonp) pour obtenir les résultats JSON données 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 peuvent désormais accéder à toutes les fonctions du script en utilisant la notation par points. A titre d'exemple: 

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

Cette méthode peut être un autre bit de ce que vous êtes habitué à 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 inter-domaines et peut également être facilement utilisé avec API de type REST.

Certes, il n'y a pas des fonctions de gestion des erreurs, mais pourquoi auriez-vous besoin d'un? Si vous ne parvenez pas à obtenir les données JSON en utilisant cette méthode, vous pouvez à peu près parie que vous avez des problèmes au sein du JSON lui-même, et je voudrais vérifier sur une bonne JSON validateur.

Vous pouvez mettre votre JSON dans un fichier javascript. Cela peut être chargé au niveau local (même dans Chrome) en utilisant la fonction getScript() jQuery.

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

sortie: 

world width: 500

Notez que la variable JSON est déclarée et attribué dans le fichier js. 

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

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

Je l'ai fait pour mon application cordova, comme je l'ai créé un nouveau fichier javascript pour le JSON et les données JSON collé dans String.raw analyser ensuite avec JSON.parse 

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 du corps de la réponse, copier et sauvegarder l'objet JSON dans un fichier local. Ensuite, appelez la fonction avec le nom de fichier local, vous devriez être en mesure de voir l'objet JSON dans jsonOutout ci-dessus.

Ce qui a fonctionné pour moi est le suivant:

Entrée: 

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>

Ce que j'ai éditait le peu de JSON.

myfile.json => myfile.js

Dans le fichier JSON, (faire une variable JS)

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

A la fin,

export default x;

Alors,

import JsonObj from './myfile.js';

Si vous avez Python installé sur votre machine locale (ou ne vous dérange pas d'installer un), voici une solution de navigateur indépendant pour le problème de l'accès aux fichiers JSON locale que j'utilise:

transformer le fichier JSON en JavaScript en créant une fonction qui renvoie les données comme objet JavaScript. Ensuite, vous pouvez le charger avec la balise

scroll top