¿Cómo puedo leer un JSON en la etiqueta de script de JavaScript?

82

Tengo una página generada dinámicamente donde quiero usar un JavaScript estático y pasarle una cadena JSON como parámetro. He visto este enfoque utilizado por Google (consulte el botón +1 de Google: ¿cómo lo hacen? ).

Pero, ¿cómo debo leer la cadena JSON 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>

En este JavaScript, me gustaría usar el argumento JSON {"org": 10, "items":["one","two"]}del documento HTML. No sé si es mejor hacerlo con jQuery o sin él.

$(function() {
    // read JSON

    alert("the json is:")
})
javascript json script-tag Jonas
fuente

Respuestas:

162

Cambiaría la declaración del script a esto:

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

Anote los campos de tipo e identificación. Después de esto

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

funcionará bien en todos los navegadores.

El type="application/json"es necesario para evitar que el navegador lo analice mientras se carga.

c-sonrisa
fuente
Bueno, quiero que la etiqueta de script apunte a un JavaScript, por lo que no es solo para JSON. El JSON es solo un argumento para el script.
Jonas
4
De acuerdo con las especificaciones de HTML5: dev.w3.org/html5/markup/script.html, el <script>elemento que ha definido SRC no debe contener nada más que nuevas líneas y / o comentarios. Consulte "Un elemento de secuencia de comandos con un atributo src debe contener solo:" en el enlace anterior. De lo contrario, los validadores de HTML se quejarán.
c-smile
12
@WoIIe Debido a que TS ya usa jQuery, verifique <script src="jquery-1.6.2.min.js"></script>allí.
c-smile
Me gusta el uso de jquery. Quiero decir, ¿cuántas fracciones más de milisegundo eliminará usando javascript vainilla (en este caso)?
Captain Hypertext
1
Preste atención a que esto no es seguro, permite XSS, codepen.io/anon/pen/xevgEM
felixmosh
13

Terminé con este código JavaScript para ser independiente de jQuery.

var json = document.getElementsByTagName('script');
var myObject = JSON.parse(json[json.length-1].textContent);
Jonas
fuente
44
¿Por qué no simplemente darle al script una identificación y agarrarlo document.getElementById? De esa manera, no es necesario que recuerde mantenerlo al final. Tampoco lo hará quien más cambie la página en el futuro.
George
2

Para leer JSON en <script id="myJSON">uso

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

También puede usar métodos para apuntar al script como 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>
Expandir fragmento

Zekrom_Vale
fuente
La <script id="myJSON">etiqueta también necesita el type="application/json"atributo.
Mikael Dúi Bolinder
1 
JSON.parse($('script[src="mysript.js"]').html());

o inventar algún otro método para identificar el guión.

Quizás en lugar de .html()lo que necesite .text(). No estoy seguro. Pruébelos ambos.

Emil Ivanov
fuente
Gracias, funcionó cuando cambié el json a{"org": 10, "items":["one","two"]}
Jonas
1
Este método es incorrecto. Si una <script>etiqueta tiene el src, NO DEBE tener ningún contenido.
Iharob Al Asimi