web-dev-qa-db-fra.com

Comment puis-je lire un JSON dans le script-tag à partir de JavaScript?

J'ai une page générée dynamiquement où je veux utiliser un JavaScript statique et lui transmettre une chaîne JSON en tant que paramètre. J'ai vu cette approche utilisée par Google (voir Bouton +1 de Google: comment font-ils? ).

Mais comment devrais-je lire la chaîne JSON à partir de JavaScript?

<html>
  <head>
    <script src="jquery-1.6.2.min.js"></script>
    <script src="myscript.js">{"org": 10, "items":["one","two"]}</script>
  </head>
  <body>
    Hello
  </body>
</html>

Dans ce code, j’aimerais utiliser l’argument JSON {"org": 10, "items":["one","two"]} du document HTML. Je ne sais pas s'il vaut mieux le faire avec jQuery ou sans.

$(function() {
    // read JSON

    alert("the json is:")
})
javascriptjsonscript-tag
69
Jonas

Je changerais la déclaration du script en ceci:

<script id="data" type="application/json">{"org": 10, "items":["one","two"]}</script>

Type de note et champs d'identification. Après ça

var data = JSON.parse(document.getElementById('data').innerHTML);

fonctionnera parfaitement dans tous les navigateurs.

Le type="application/json" est nécessaire pour empêcher le navigateur de l’analyser lors du chargement.

134
c-smile

J'ai fini avec ce code JavaScript pour être indépendant de jQuery.

var json = document.getElementsByTagName('script');
var myObject = JSON.parse(json[json.length-1].textContent);
13
Jonas

Pour lire JSON dans <script id="myJSON"> utilisation

var manifest= document.getElementById('myJSON').innerHTML; //sets manifest to the text in #myJSON
manifest= JSON.parse(manifest) //Converts text into JSON

Vous pouvez également utiliser des méthodes pour pointer sur le script tel que document.scripts[0]

    //var manifest= JSON.parse(document.getElementById('myJSON').innerHTML); /*Shortend of 2&3*/
var manifest= document.getElementById('myJSON').innerHTML; //Gets text in #myJSON
manifest= JSON.parse(manifest) //Converts it into JSON
document.getElementById('test').innerHTML= manifest.name+ '<br/>'+ manifest.otherOptions; //Displays it
console.log('manifest')
console.log(manifest);
<head>
<script type="application/json" id="myJSON">
  {"name":"Web Starter Kit", "otherOptions":"directly here"}
</script>
</head>
<body>
<p id="test"></p>
</body>
2
Zekrom_Vale
JSON.parse($('script[src="mysript.js"]').html());

ou inventer une autre méthode pour identifier le script.

Peut-être qu'au lieu de .html(), vous pourriez avoir besoin de .text(). Pas certain. Essayez les deux.

1
Emil Ivanov