Chargement du fichier JSON local
j'essaie de charger un fichier JSON local mais ça ne marchera pas. Voici mon code JavaScript (en utilisant jQuery:
var json = $.getJSON("test.json");
var data = eval("(" +json.responseText + ")");
document.write(data["a"]);
le test.dossier json:
{"a" : "b", "c" : "d"}
rien n'est affiché et Firebug me dit que les données ne sont pas définies. Dans Firebug je peux voir json.responseText et il est bon et VALIDE, mais il est étrange quand je copie la ligne:
var data = eval("(" +json.responseText + ")");
dans la console de Firebug, ça marche et je peux accéder aux données.
Quelqu'un a une solution?
21 réponses
j'avais le même besoin (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.
plus sur la lecture des fichiers avec nodejs: http://docs.nodejitsu.com/articles/file-system/how-to-read-files-in-nodejs
exiger.js: http://requirejs.org /
si vous voulez laisser l'utilisateur sélectionner le fichier JSON local (n'importe où sur le système de fichiers), alors la solution suivante fonctionne.
utilise FileReader et JSON.parser (et no 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/en/tutorials/file/dndfiles /
si vous recherchez quelque chose de rapide et sale il suffit de charger les données dans la tête de votre document HTML.
"151930920 des données".jsvar DATA = {"a" : "b", "c" : "d"};
de l'index.html
<html>
<head>
<script src="data.js" ></script>
<script src="main.js" ></script>
</head>
...
</html>
principal.js
(function(){
console.log(DATA) // {"a" : "b", "c" : "d"}
})()
de manière 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 L'API Fetch. (Internet Explorer ne le fait pas, mais Edge le fait!)
source:
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);
});
}
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);
});
}Essayer de telle façon (mais aussi, veuillez noter que JavaScript n'ont pas accès au client de système de fichiers):
$.getJSON('test.json', function(data) {
console.log(data);
});
Récemment D3js est capable de gérer les locaux du fichier json.
C'est le problème https://github.com/mbostock/d3/issues/673
ceci est le patch inorder pour que D3 fonctionne avec les fichiers JSON locaux. https://github.com/mbostock/d3/pull/632
Je ne peux pas croire combien de fois cette question a été répondue sans comprendre et/ou aborder 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 à elle. 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 que j'ai fourni ci-dessus:
var json = JSON.parse($.getJSON({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false}).responseText);
Vous pouvez aussi utiliser $.ajax au lieu de $.getJSON écrit le code exactement de la même façon:
var json = JSON.parse($.ajax({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false}).responseText);
enfin, la dernière façon de faire ce est d'emballer $.ajax dans une fonction. Je ne peux pas m'en attribuer le mérite, mais je l'ai un peu modifié. 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 -- > charger json 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);
le test.JSON fichier 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"
}
je suis surpris que l'importation de es6 n'ait pas été mentionnée (utilisation avec de petits fichiers)
Ex: import test from './test.json'
webpack 2 < utilise le json-loader comme valeur par défaut pour les fichiers .json .
https://webpack.js.org/guides/migrating/#json-loader-is-not-required-anymore
Pour Dactylographié :
import test from 'json-loader!./test.json';
TS2307 (TS) ne peut pas trouver module 'JSON-loader!./banlieue.json'
pour que ça marche, j'ai dû déclarer le module en premier. J'espère que ça vous fera gagner quelques heures.
declare module "json-loader!*" {
let json: any;
export default json;
}
...
import test from 'json-loader!./test.json';
si j'ai essayé d'omettre loader de json-loader j'ai eu l'erreur suivante de 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
a trouvé ce thread en essayant (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 cela...
load_json("test2.html.js")
...et voici le <head> ...
<head>
<script type="text/javascript" src="test.html.js" class="json"></script>
</head>
en angle (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));
Espérons que cette aide.
$.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 - comme vous l'avez montré dans votre exmaple 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 - il ne fonctionnera pas localement (sauf si vous utilisez un serveur HTTP local)
json_str = String.raw`[{"name": "Jeeva"}, {"name": "Kumar"}]`;
obj = JSON.parse(json_str);
console.log(obj[0]["name"]); j'ai fait cela pour mon application cordova, comme j'ai créé un nouveau fichier javascript pour le JSON et collé les données du JSON dans String.raw puis le parse avec JSON.parse
Je n'ai trouvé aucune solution en utilisant la bibliothèque de fermeture de Google. Donc, juste pour compléter la liste pour les futurs vistors, voici comment vous chargez un JSON à partir d'un fichier local avec la bibliothèque de 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 j'aime utiliser est de garnir/envelopper le json d'un objet littéral, puis Enregistrer le fichier avec un .extension de fichier jsonp. Cette méthode laisse aussi votre fichier JSON original (test.json) non modifié, car vous allez travailler avec le nouveau fichier jsonp (test.jsonp) à la place. Le nom sur l'emballage peut être n'importe quoi, mais il doit être le même que le nom de la fonction de rappel que vous utilisez pour traiter le jsonp. Je vais utiliser votre test.JSON a publié comme exemple pour montrer l'ajout d'enveloppe jsonp pour le " 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 retourné. Cela rendra les données JSON retournées disponibles pour toutes les autres fonctions de votre script au lieu de seulement 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 du document, car IE ne le fait pas. soutenez le jQuery .méthode append. La méthode jQuery commentée dans le code ci-dessous fonctionnera sur d'autres navigateurs qui prennent en charge le .méthode append. Il est inclus à titre de 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)
}
Next est une fonction de rappel courte et simple (avec le même nom que le wrapper jsonp) pour obtenir les données des 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 de json sont maintenant accessibles par n'importe quelle fonction du script utilisation de 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 a de nombreux avantages. Tout d'abord, le même fichier jsonp peut être chargé localement ou à partir d'un serveur utilisant les mêmes fonctions. En prime, jsonp est déjà dans un format multi-domaines convivial et peut également être facilement utilisé avec les API REST type.
certes, il n'y a pas de fonctions de gestion des erreurs, mais pourquoi en auriez-vous besoin? Si vous ne parvenez pas pour obtenir les données json en utilisant cette méthode, alors vous pouvez à peu près parier que vous avez des problèmes dans le json lui-même, et je vérifierais sur un bon validateur JSON.
Vous pouvez mettre votre json dans un fichier javascript. Cela peut être chargé localement (même dans Chrome) en utilisant la fonction getScript() de jQuery.
carte-01.fichier js:
var json = '{"layers":6, "worldWidth":500, "worldHeight":400}'
principal.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 assignée dans le fichier js.
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 était, tout d'abord, de network tab, enregistrer le trafic réseau pour le service, et de response body, copier et enregistrer l'objet json dans un fichier local. Ensuite, appelez la fonction avec le nom du 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, '&').replace(/</g, '<').replace(/>/g, '>');
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>
si vous avez installé Python sur votre machine locale (ou vous n'avez pas d'objection à en installer une), voici une solution indépendante du navigateur pour le problème d'accès au fichier JSON local que j'utilise:
transforme 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 < script> et appeler la fonction pour obtenir les données que vous voulez.
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]')