javascript - estructura - json stringify

¿Hay algún estándar para incrustar JSON en HTML?

Question

Me gustaría incrustar JSON en HTML. La solución más elegante que he encontrado hace uso del script -tag y el mime media type application/json .

<script id="data" type="application/json">
{
"foo" : "bar"
}
</script> 

¿Es esta la forma estándar de incrustar JSON? Si no, ¿hay algún riesgo con la solución anterior?

Razones para usar JSON en línea (en lugar de un servicio JSON-P):

• Pequeñas cantidades de datos JSON
• Menos solicitudes HTTP
• Preferencia de inline-JSON a los datos en atributos HTML

[ACTUALIZACIÓN] Razón para incrustar json.

Tengo un widget de galería para un sitio web con un tráfico muy alto. La galería puede constar de 100 imágenes o más. Solo estoy mostrando una imagen a la vez y el resto de las imágenes se cargarán de forma perezosa. Sin embargo, la información (imagen src) de todas las imágenes se representará en el html en la carga de la página. Hay varias formas de representar la información de la imagen en el html. En lugar de usar JSON, también podría usar los atributos de datos html como se muestra a continuación:

<li class="image" data-src="image-path.jpg">
<!-- image tag will be created here using javascript -->
</li>

Resultará en:

<li class="image image-loaded" data-src="image-path.jpg">
<img src="image-path.jpg" />
</li>

La desventaja con la solución anterior es el margen de beneficio adicional. Preferiría usar JSON y un motor de plantillas de Javascript como doT.js

Answer 1

Razones para usar JSON en línea (en lugar de un servicio JSON-P)

Usted puede en línea JSON-P también. OK, solo llamas a ese método "script en línea", pero tiene las ventajas de :-)

Answer 2

Estoy respondiendo mi propia pregunta ya que he tenido que encontrar una solución. Mi solución se basa en lo que Bergi sugirió usar JSONP en línea. Es una solución mejor que encontrar una respuesta a mi pregunta real, ya que no se requiere un análisis JSON manual.

Los datos JSON (y HTML) se generan con las páginas del servidor Java (JSP).

Paso 1

Se crea un nombre de variable personalizado utilizando JSP. Se utilizará como la variable global javascript a la que se asignarán los datos json. El nombre se genera aleatoriamente para evitar conflictos de nombres en la misma página.

<c:set var="jsonpVarName">jsnpData<%= java.lang.Math.round(java.lang.Math.random() * 1000000) %></c:set> 

Paso 2 La etiqueta de script tiene un cssClassname para identificarlo y un atributo data-var , de modo que se pueda determinar el nombre de variable personalizado. ${ctrl.json} es JSP e imprime JSON. A diferencia de JSONP, que utiliza una función de devolución de llamada, se utiliza una variable global. Hasta ahora no he experimentado ningún inconveniente.

<script class="data" data-var="${jsonpVarName}" type="text/javascript">
window.${jsonpVarName} = ${ctrl.json};
</script>

Paso 3 Acceder a los datos (usando jQuery) es tan fácil como:

var data = window[$(''script.data'').data(''var'')];

Ejemplo con contexto

HTML

<div class="myWidget">
<button class="fetchData">Fetch Data</button>
<c:set var="jsonpVarName">jsnpData<%= java.lang.Math.round(java.lang.Math.random() * 1000000) %></c:set>
<script class="data" data-var="${jsonpVarName}" type="text/javascript">
window.${jsonpVarName} = ${ctrl.json};
</script>
</div> 

Javascript

$(''button.fetchData'', ''.myWidget'').click(function (e) {
var data = window[$(''script.data'', ''.myWidget'').data(''var'')];
});

Estoy usando JSONP en línea para cargar datos JSON que se requieren en la carga de la página. No es una gran cantidad de datos y es una solicitud HTTP menos.

Answer 3

Lo que sugieres es absolutamente correcto. Los atributos de type de la etiqueta de script deben ser un descriptor MIME válido. Según la sección 6 "Consideraciones de la IANA" oficiales de JSON RFC :

El tipo de medio MIME para texto JSON es application / json.
Tipo de nombre: aplicación
Nombre de subtipo: json

Entonces tu HTML es válido:

<script id="data" type="application/json">
{
"foo" : "bar"
}
</script> 

Y, no, no hay riesgos adicionales involucrados en hacer esto.

Answer 4

intente http://json2html.com/ que es una buena manera de transformar JSON a HTML.