Ponga los datos JSON en la input de formulario html oculta?

Estoy construyendo una aplicación web rica que usa muchos datos. Cuando lo estoy construyendo, descubrí que me repetía una y otra vez.

Este es el problema. Necesito poner la lógica de la aplicación oculta en los elementos html para representar los datos que está viendo el cliente.

Esta es una solución que encontré hace un time:

<a href="bla" data-itemId="1" .... more data. 

Hay dos problemas con este método.

  1. No puedo representar matrices.
  2. Es feo.

Busqué una solución pero no encontré nada. También fui a Facebook, abrí Firebug, y encontré esto:

 {"actor":"19034719952","target_fbid":"454811929952","target_profile_id":"19034719952","type_id":"7","source":"1","assoc_obj_id":"","source_app_id":"","extra_story_params":[],"content_timestamp":"1324385453","check_hash":"9eabc3553e8a2fb6"} 

Esta json estaba dentro de un elemento de input[type=hidden] .

Traté de hacer lo mismo con json_encode();

 <input type="hidden" name="track" value="{"_id":{"$id":"4eee908f615c2102e9010000"},"link":"george-wassouf-flag-of-my-heart-longing","file":"\/m\/tracks\/t.4eee908daca2a3.49941874.mp3","lyrics":null,"freezed":false,"hits":0,"images":{"large":"\/assets\/static\/default.track.large.jpg","thumb":"\/assets\/static\/default.track.thumb.jpg","icon":"\/assets\/static\/default.track.icon.jpg"},"duration":"300","created":{"sec":1324257423,"usec":78000},"albums":[{"_id":{"$id":"4eee8d63615c21f6e7000000"},"names":{"ar":"\u0643\u0644\u0627\u0645\u0643 \u064a\u0627 \u062d\u0628\u064a\u0628\u064a","en":"Kalamak ya Habibi"},"link":"george-wassouf-kalamak-ya-habibi","images":{"original":"\/m\/pics\/albums\/o.4eee8d612c3183.11879972.jpg","poster":"\/m\/pics\/albums\/p.4eee8d63967072.02645896.jpg","large":"\/m\/pics\/albums\/l.4eee8d63a89111.20372767.jpg","small":"\/m\/pics\/albums\/s.4eee8d63b18927.47242533.jpg","thumb":"\/m\/pics\/albums\/t.4eee8d63b7f1f4.11879932.jpg","icon":"\/m\/pics\/albums\/i.4eee8d63bf1304.59902753.jpg"}},{"_id":{"$id":"4eee8d63615c21f6e7000000"},"name":"Kalamak ya Habibi","link":"george-wassouf-kalamak-ya-habibi"}],"name":"Flag of my heart longing","title":"Flag of my heart longing","mp3":"\/m\/tracks\/t.4eee908daca2a3.49941874.mp3","poster":"\/m\/pics\/artists\/p.4eee85cd7ed579.65275366.jpg","artists":[{"_id":{"$id":"4eee85cd615c21ece6000000"},"name":"George Wassouf","link":"george-wassouf"}]}" /> 

Pero cuando bash get el valor obtengo esto { .

He intentado todas las constantes como JSON_HEX_TAG y no encontré ninguna pregunta de este tipo.

¿Cómo puedo poner json en html correctamente y luego getlo con jquery / javascript?

Su cadena es correcta, pero no se puede definir en HTML porque contiene comillas dobles.

HTML requiere que se escapen las comillas dobles cuando se define una cadena que se incluye entre comillas dobles. La forma adecuada de hacerlo es usar la entidad HTML:

value="&quot;"

Desde PHP:

Use htmlspecialchars o htmlentities ( http://www.php.net/manual/en/function.htmlspecialchars.php ). En cualquier caso, normalmente debería usar esto sobre CADA valor que escriba en el browser del cliente (no hacerlo puede generar riesgos de security).

De Javascript:

Si necesita hacer esto desde Javascript, puede establecer programáticamente el valor del elemento oculto (siempre que su cadena JSON ya esté contenida en una variable de Javascript). De esta manera, no tiene que preocuparse por la encoding de la cadena literal:

hiddenElement.value = yourString;

Para get una function de escape, puede usar, tal vez, comprobar este hilo: Escapar cadenas HTML con jQuery .

La mejor manera para mí fue usar html & quot;

por ejemplo, hago esto:

  <input type="hidden" id="v" value="[{&quot;id&quot;:&quot;1&quot;}]" > 

en lugar de

  <input type="hidden" id="v" value="[{"id":"1"}]" > 

en su label de input, el atributo de valor en el que está tratando de poner json array. Míralo. usted está poniendo " . Segundo " está terminando el valor del atributo. por lo tanto, se interpreta como value = "{" . necesitas escaping de esos " . Utiliza comillas simples ' lugar. Y revisa

El mejor método que he encontrado es convertir el atributo de valor en ' comillas simples ' : value='{"label":"value"}'

  • JSON válido solo funciona con comillas dobles

Además, asegúrese de evitar cualquier comilla simple en los datos JSON

Personalmente, también me enfrento al mismo problema de comillas dobles en la label de input HTML con valor JSON. El formatting JSON contiene muchas comillas dobles, como la matriz que construiste. También solo me proporciona "{" "valor de resultado al final.

Sin embargo, encontré una manera muy simple de resolver este problema. El truco es usar comillas simples en lugar de comillas dobles. Tome ejemplo en JSP a continuación:

 <input type="checkbox" name="deviceInfo" value='${deviceRow}'> 

El $ {deviceRow} es el JSON que contiene muchas comillas dobles en este caso. He usado firebug para examinar los resultados de la label de input, funcionó perfecto.

Resultados