Chargement du fichier JSON local
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.responseText et 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?
$.getJSON est asynchrone, vous devez donc:
_$.getJSON("test.json", function(json) {
console.log(json); // this will show the info it in firebug console
});
_J'avais le même besoin (tester mon application angularjs), et le seul moyen que j'ai trouvé est d'utiliser require.js:
var json = require('./data.json'); //(with path)
remarque: le fichier est chargé une fois, les appels suivants 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/
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 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/
Si vous cherchez quelque chose de rapide et de sale, chargez simplement les données dans l'en-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"}
})()
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 Fetch API. (Internet Explorer ne le fait pas, mais Edge le fait!)
la 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);
});
}Je ne peux pas croire combien de fois cette question a été résolue 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 un moyen plus court d’écrire le même code que celui 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, le dernier moyen de faire cela est d'envelopper $ .ajax dans une fonction. Je ne peux pas prendre le crédit pour celui-ci, mais je l'ai légèrement modifié. 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 -> charge json dans 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 je vois dans mon code ci-dessus est hébergé sur mon serveur et contient le même objet de données Json que celui (l'affiche originale) a posté. .
{
"a" : "b",
"c" : "d"
}
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 le json-loader par défaut pour les fichiers .json.
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 que cela fonctionne, je devais d'abord déclarer le module. J'espère que cela économisera 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 loader de json-loader j'ai l'erreur suivante de webpack:
RUPTURE DE CHANGEMENT: 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
Récemment D3js est capable de gérer un fichier json local.
C'est le problème https://github.com/mbostock/d3/issues/67
C'est le patch en ordre pour que D3 fonctionne avec les fichiers json locaux. https://github.com/mbostock/d3/pull/632
Essayez de cette manière (mais notez également que JavaScript n'a pas accès au système de fichiers du client):
$.getJSON('test.json', function(data) {
console.log(data);
});
Vous avez 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 TypeScript, vous pouvez utiliser import 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
Dans angular (ou tout autre framework), vous pouvez charger en utilisant http get, je l'utilise comme ceci:
this.http.get(<path_to_your_json_file))
.success((data) => console.log(data));
J'espère que cela t'aides.
$.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 exemple dans la question (test.json), vous pouvez utiliser la méthode parseJSON de JQuery ->
var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );
getJSON est utilisé pour obtenir le code JSON à partir d'un site distant. Il ne fonctionnera pas localement (sauf si vous utilisez un serveur HTTP local).
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 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);
});
Ce que j'ai fait a été l'édition du fichier JSON un peu.
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';
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, '&').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>
Vous pouvez mettre votre json dans un fichier javascript. Cela peut être chargé localement (même dans Chrome) à l'aide de la fonction getScript() 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);
});
sortie:
world width: 500
Notez que la variable json est déclarée et assignée 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 si j'avais créé un nouveau fichier javascript pour le JSON et collé les données JSON dans String.raw puis analysé le avec JSON.parse
Une approche que j’aime utiliser consiste à tamponner/emballer le JSON avec un littéral d’objet, puis à enregistrer le fichier avec une extension de fichier .jsonp. Cette méthode laisse également votre fichier json original (test.json) inchangé, car vous utiliserez plutôt le nouveau fichier jsonp (test.jsonp). Le nom sur l'emballage peut être n'importe quoi, mais il doit avoir le même nom que la fonction de rappel que vous utilisez pour traiter le jsonp. Je vais utiliser votre test.json posté à titre d'exemple pour montrer l'ajout d'encapsuleur jsonp pour le fichier 'test.jsonp'.
json_callback({"a" : "b", "c" : "d"});
Créez ensuite une variable réutilisable à portée globale dans votre script pour contenir le code JSON renvoyé. Cela rendra les données JSON renvoyées disponibles pour toutes les autres fonctions de votre script, au lieu de simplement la fonction de rappel.
var myJSON;
Vient ensuite une fonction simple permettant de 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 les autres navigateurs prenant en charge la 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)
}
Suivant est une fonction de rappel courte et simple (portant 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 à n’importe quelle fonction du script à l’aide 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 celle 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 utilisant les mêmes fonctions. De plus, jsonp est déjà dans un format convivial inter-domaines et peut également être facilement utilisé avec les API de type REST.
Certes, il n’existe aucune fonction de traitement des erreurs, mais pourquoi en auriez-vous besoin? Si vous ne parvenez pas à obtenir les données JSON à l'aide de cette méthode, vous pouvez parier que vous rencontrez des problèmes au sein du json lui-même et je le vérifierais sur un bon validateur JSON.
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, c’est d’abord dans l’onglet Réseau, enregistrer le trafic réseau du service, puis dans le corps de la réponse, copier et enregistrer l’objet JSON dans un fichier local. Ensuite, appelez la fonction avec le nom du fichier local, vous devriez pouvoir voir l'objet json dans jsonOutout ci-dessus.