Essayer de charger un fichier JSON local pour afficher des données dans une page HTML à l'aide de JQuery
Bonjour, j'essaie de charger un fichier JSON local en utilisant JQuery pour afficher des données, mais j'obtiens une erreur étrange. Puis-je savoir comment résoudre ce problème.
<html>
<head>
<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$.getJSON( "priorities.json" , function( result ){
alert(result.start.count);
});
});
</script></head>
</html>
Je viens d'alerter le nombre de données JSON. Mon fichier JSON se trouve dans le même répertoire que celui où se trouve ce fichier HTML et le format de chaîne JSON est présenté ci-dessous.
{
"start": {
"count": "5",
"title": "start",
"priorities": [
{
"txt": "Work"
},
{
"txt": "Time Sense"
},
{
"txt": "Dicipline"
},
{
"txt": "Confidence"
},
{
"txt": "CrossFunctional"
}
]
}
}
Le fichier JSON nomme les priorités.json et l'erreur est
Les priorités d'erreur de référence non détectées ne sont pas définies
Comme le dit l'API jQuery: "Chargez des données codées JSON à partir du serveur à l'aide d'une requête HTTP GET."
http://api.jquery.com/jQuery.getJSON/
Donc, vous ne pouvez pas charger un fichier local avec cette fonction. Mais en naviguant sur le Web, vous constaterez que charger un fichier à partir d'un système de fichiers est vraiment difficile en javascript, comme l'indique le fil suivant:
En raison de problèmes de sécurité (même politique d'origine), l'accès JavaScript aux fichiers locaux est limité si sans interaction de l'utilisateur.
Selon https://developer.mozilla.org/en-US/docs/Same-Origin_policy_for_file:_URIs :
Un fichier peut lire un autre fichier uniquement si le répertoire parent du fichier d'origine est un répertoire ancêtre du fichier cible.
Imaginez une situation où le javascript d'un site Web tente de voler vos fichiers n'importe où sur votre système sans que vous soyez au courant. Vous devez le déployer sur un serveur Web. Ou essayez de le charger avec une balise de script. Comme ça:
<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" language="javascript" src="priorities.json"></script>
<script type="text/javascript">
$(document).ready(function(e) {
alert(jsonObject.start.count);
});
</script>
Votre fichier priorités.json:
var jsonObject = {
"start": {
"count": "5",
"title": "start",
"priorities": [
{
"txt": "Work"
},
{
"txt": "Time Sense"
},
{
"txt": "Dicipline"
},
{
"txt": "Confidence"
},
{
"txt": "CrossFunctional"
}
]
}
}
Ou déclarez une fonction de rappel sur votre page et enveloppez-la comme une technique jsonp:
<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(e) {
});
function jsonCallback(jsonObject){
alert(jsonObject.start.count);
}
</script>
<script type="text/javascript" language="javascript" src="priorities.json"></script>
Votre fichier priorités.json:
jsonCallback({
"start": {
"count": "5",
"title": "start",
"priorities": [
{
"txt": "Work"
},
{
"txt": "Time Sense"
},
{
"txt": "Dicipline"
},
{
"txt": "Confidence"
},
{
"txt": "CrossFunctional"
}
]
}
})
L'utilisation de balises de script est une technique similaire à JSONP, mais avec cette approche, elle n'est pas si flexible. Je recommande de le déployer sur un serveur Web.
Avec l’interaction de l’utilisateur, javascript est autorisé à accéder aux fichiers. C'est le cas de File API . En utilisant fichier api, javascript peut accéder aux fichiers sélectionnés par l'utilisateur à partir de <input type="file"/> ou déposés du bureau vers le navigateur.
Vous pouvez simplement inclure un fichier Javascript dans votre code HTML qui déclare votre objet JSON en tant que variable. Vous pouvez ensuite accéder à vos données JSON à partir de votre étendue Javascript globale en utilisant data.employees, par exemple.
index.html:
<html>
<head>
</head>
<body>
<script src="data.js"></script>
</body>
</html>
data.js:
var data = {
"start": {
"count": "5",
"title": "start",
"priorities": [{
"txt": "Work"
}, {
"txt": "Time Sense"
}, {
"txt": "Dicipline"
}, {
"txt": "Confidence"
}, {
"txt": "CrossFunctional"
}]
}
}
app.js
$("button").click( function() {
$.getJSON( "article.json", function(obj) {
$.each(obj, function(key, value) {
$("ul").append("<li>"+value.name+"'s age is : "+value.age+"</li>");
});
});
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tax Calulator</title>
<script src="jquery-3.2.0.min.js" type="text/javascript"></script>
</head>
<body>
<ul></ul>
<button>Users</button>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
article.json
{
"a": {
"name": "Abra",
"age": 125,
"company": "Dabra"
},
"b": {
"name": "Tudak tudak",
"age": 228,
"company": "Dhidak dhidak"
}
}
server.js
var http = require('http');
var fs = require('fs');
function onRequest(request,response){
if(request.method == 'GET' && request.url == '/') {
response.writeHead(200,{"Content-Type":"text/html"});
fs.createReadStream("./index.html").pipe(response);
} else if(request.method == 'GET' && request.url == '/jquery-3.2.0.min.js') {
response.writeHead(200,{"Content-Type":"text/javascript"});
fs.createReadStream("./jquery-3.2.0.min.js").pipe(response);
} else if(request.method == 'GET' && request.url == '/app.js') {
response.writeHead(200,{"Content-Type":"text/javascript"});
fs.createReadStream("./app.js").pipe(response);
}
else if(request.method == 'GET' && request.url == '/article.json') {
response.writeHead(200,{"Content-Type":"text/json"});
fs.createReadStream("./article.json").pipe(response);
}
}
http.createServer(onRequest).listen(2341);
console.log("Server is running ....");
Server.js exécutera un serveur http à nœud simple dans votre section locale pour traiter les données.
Remarque n'oubliez pas une bibliothèque dd jQuery dans votre structure de dossiers et modifiez le numéro de version en conséquence dans server.js et index.html
Ceci est mon en cours d'exécution https://github.com/surya4/jquery-json .
Les exemples de visualisation de d3.js reproduits sur ma machine locale .. qui importent des données .JSON .. fonctionnent parfaitement sur le navigateur Mozilla Firefox; et sur Chrome j'obtiens l'erreur de restriction des origines croisées. C'est étrange de constater qu'il n'y a aucun problème d'importer un fichier javascript local, mais essayez de charger un JSON et le navigateur devient nerveux. Il devrait au moins y avoir un paramètre permettant à l'utilisateur de passer outre, la façon dont les fenêtres contextuelles sont bloquées, mais je vois une indication et le choix de les débloquer. Aucune raison d'être aussi orwellien à ce sujet. Les utilisateurs ne doivent pas être traités comme trop naïfs pour savoir ce qui leur convient le mieux.
Je suggère donc d'utiliser le navigateur Firefox si vous travaillez localement. Et j'espère que les gens ne paniqueront pas et commenceront à bombarder Mozilla pour imposer des restrictions d'origine croisée pour fichiers locaux.
J'essayerais de sauvegarder mon objet en tant que fichier .txt, puis de le récupérer comme ceci:
$.get('yourJsonFileAsString.txt', function(data) {
console.log( $.parseJSON( data ) );
});