Problema con json_encode

[goalkeaper]

Hola a todos, tengo un problema con json_encode, a ver si alguien me puede echar una mano porque me tiene loco.

Tengo un servicio en PHP que me devuelve una serie de datos. Estos datos los agrupo en un array y los transformo en un json con json_encode:

Código:

	$article=array("id" => $data['id'], "title" => $data['titulo'],"fecha" => $fecha,"texto" => $data['texto'],"comentarios" => $comentarios); 
	
	$json = json_encode($article);	
	
	echo $json;

Uno de mis datos, el campo 'texto', es el cuerpo de un articulo que contiene HTML, y la funcion json_encode me está transformando todos los caracteres especiales(<,>,&, letras con acento,ñ,etc) en sus respectivo caracteres especiales(&lt;&gt;&amp; etc) lo que provoca que al recuperarlo desde javascript y pintarlo en mi HTML el navegador no interprete el código y lo muestre tal cual, sin procesar.

He probado a enviar el registro ese de HTML sin JSON, osea sin utilizar el encode y al recuperarlo desde javascript y pintarlo si que lo hace bien por lo que no tiene nada que ver con la BD y las codificaciones.

Mi pregunta es: ¿hay alguna forma de evitar que el json_encode transforme esos caracteres a su correspondiente código?

Espero que me haya explicado ;)

Muchas gracias

[pateketrueke]

la funcion json_encode me está transformando todos los caracteres especiales(<,>,&, letras con acento,ñ,etc) en sus respectivo caracteres especiales(&lt;&gt;&amp; etc)

Falso.

Ejecuta el siguiente código:

Código PHP:

echo json_encode('<b>ok</b>'); // "<b>ok<\/b>"
 

En ningún momento se están convirtiendo en entidades los caracteres especiales como mencionas.

He probado a enviar el registro ese de HTML sin JSON, osea sin utilizar el encode y al recuperarlo desde javascript y pintarlo si que lo hace bien por lo que no tiene nada que ver con la BD y las codificaciones.

Yo igual, con el código que te acabo de mostrar, ¿ćomo puedes estar seguro de que no es culpa de la BD entonces?

¿hay alguna forma de evitar que el json_encode transforme esos caracteres a su correspondiente código?

Pues no lo hace, ya te lo he demostrado.

Tu problema debe estar en otro lado, tal vez aquí:

Tengo un servicio en PHP que me devuelve una serie de datos.

¿Seguro que dicho servicio no es el que te devuelve ya codificados dichos caracteres?

Que la culpa no la tiene json_encode() como quisieras creer.

[goalkeaper]

Gracias. Te explico mejor mi deducción.

Si yo hago

Código:

echo $json

Me imprime el JSON y en el campo correspondiente sale este texto que te comentaba codificado pero si yo hago:

Código:

echo $data['texto']

Esto me muestra correctamente el código interpretado HTML, por eso os comentaba que creia que el problema esta en el encode ya que en el código que ponía en mi primer post es la única diferencia entre un dato y otro.

La prueba la estoy haciendo accediendo directamente al archivo.php de mi servidor.

[pateketrueke]

Has un var_dump($data) y veamos lo que obtienes.

[goalkeaper]

Hola, te pongo lo que me saca antes y despues del encode:

Haciendo var_dump($article) saca esto:

Código:

      array(5) {
  ["id"]=>
  string(2) "80"
  ["title"]=>
  string(51) "Como pasar variable GET en la URL con jQuery Mobile"
  ["fecha"]=>
  string(19) "10-04-2014 16:51:44"
  ["texto"]=>
  string(2222) "<p><img style="float:left;margin-right:15px;width:250px;" src="./recursos/logo-jquery-mobile.png" alt="jQuery mobile"/>Son muchas las ventajas de utilizar <span class="texto-amarillo">jQuery Mobile</span> pero, a veces, tambi&eacute;n nos encontramos con problemas que habitualmente no encontrar&iacute;amos y el utilizar jQuery Mobile lo complica un poco.</p>

<p>En este caso, si queremos <span class="texto-amarillo">pasar par&aacute;metros</span> a trav&eacute;s de la <span class="texto-amarillo">URL</span> igual que har&iacute;amos en HTML, por ejemplo, <span class="texto-verde">www.midominio.com/verNoticia?id=12</span> , nuestra primera idea para hacer esto ser&iacute;a poner un enlace parecido a esto:</p>

<pre class="brush:xml">

	<a href="#verNoticia?12" data-role="button">Ver noticia 12</a>
	
</pre>

<p>Sin embargo, esa variable es obviada por <span class="texto-amarillo">jQuery Mobile</span> a la hora de cambiar de p&aacute;gina y no funciona. La mejor forma de conseguir esa funcionalidad es utilizar el <span class="texto-amarillo">almacenamiento en sesi&oacute;n</span> mediante <span class="texto-verde">sessionStorage()</span>.</p>

<p>Para hacerlo deber&iacute;amos hacer algo como lo siquiente:</p>

<pre class="brush:xml">
	<a href="#verNoticia" onclick="sessionStorage.idVerNoticia='12';" data-role="button"> Ver noticia 12	</a>
</pre>

<p>Una vez que clicamos sobre el enlace para acceder al detalle de la noticia debemos tratar de <span class="texto-amarillo">recuperar ese par&aacute;metro</span> en la pagina de detalle. Para hacer debemos hacer lo siguiente:</p>

<pre class="brush:js">

	<script type="text/javascript">
		
		$("#verNoticia").on("pageshow", function(){	
		
			var idNoticia=sessionStorage.idVerNoticia;
			
			/** Una vez obtenido el ID de noticia hacemos lo necesario para cargar los datos de la noticia **/
		
		});
	
	</script>	
	
</pre>

<p>Como v&eacute;is, justo antes de mostrar el contenido de la p&aacute;gina recuperamos el ID de la noticia y hacemos las operaciones oportunas para cargar los datos de esa noticia.</p>

<p>Esta es la forma m&aacute;s sencilla de pasar y recuperar variables GET a trav&eacute;s de URL.</p>"
  ["comentarios"]=>
  array(4) {
    [0]=>
    array(4) {
      ["id"]=>
      string(5) "23925"
      ["nombre"]=>
      string(30) "Sergio Gonz&aacute;lez Barrios"
      ["fecha"]=>
      string(19) "10-04-2014 16:51:44"
      ["texto"]=>
      string(154) "sessionStorage te permite guardar tantas variables como desees. POr ejemplo:

onclick="sessionStorage.idVerNoticia='12';sessionStorage.nombre='sergio';""
    }
    [1]=>
    array(4) {
      ["id"]=>
      string(5) "23906"
      ["nombre"]=>
      string(7) "Andrezs"
      ["fecha"]=>
      string(19) "10-04-2014 16:51:44"
      ["texto"]=>
      string(21) "SI son varios Datos??"
    }
    [2]=>
    array(4) {
      ["id"]=>
      string(5) "23657"
      ["nombre"]=>
      string(30) "Sergio Gonz&aacute;lez Barrios"
      ["fecha"]=>
      string(19) "10-04-2014 16:51:44"
      ["texto"]=>
      string(336) "Creo recordar que web storage solo se puede usar para navegadores web como su definici&oacute;n indica. Si quieres usar storage para app m&oacute;viles deber&iacute;as utilizar el sessionStorage o locaStorage que funcionan muy bien. 

Yo personalmente desaconsejar&iacute;a el web storage ya que muchos navegadores no lo soportan.

"
    }
    [3]=>
    array(4) {
      ["id"]=>
      string(5) "23648"
      ["nombre"]=>
      string(6) "andres"
      ["fecha"]=>
      string(19) "10-04-2014 16:51:44"
      ["texto"]=>
      string(86) "Hola e Web Storage  funciona con los navegadores y etc, y con  mobiles.???
Gracias!! "
    }
  }
}

Y haciendo var_dump($json);

Código:

string(3487) "{"id":"80","title":"Como pasar variable GET en la URL con jQuery Mobile","fecha":"10-04-2014 16:51:44","texto":"<p><img style=\"float:left;margin-right:15px;width:250px;\" src=\".\/recursos\/logo-jquery-mobile.png\" alt=\"jQuery mobile\"\/>Son muchas las ventajas de utilizar <span class=\"texto-amarillo\">jQuery Mobile<\/span> pero, a veces, tambi&eacute;n nos encontramos con problemas que habitualmente no encontrar&iacute;amos y el utilizar jQuery Mobile lo complica un poco.<\/p>\r\n\r\n<p>En este caso, si queremos <span class=\"texto-amarillo\">pasar par&aacute;metros<\/span> a trav&eacute;s de la <span class=\"texto-amarillo\">URL<\/span> igual que har&iacute;amos en HTML, por ejemplo, <span class=\"texto-verde\">www.midominio.com\/verNoticia?id=12<\/span> , nuestra primera idea para hacer esto ser&iacute;a poner un enlace parecido a esto:<\/p>\r\n\r\n<pre class=\"brush:xml\">\r\n\r\n\t<a href=\"#verNoticia?12\" data-role=\"button\">Ver noticia 12<\/a>\r\n\t\r\n<\/pre>\r\n\r\n<p>Sin embargo, esa variable es obviada por <span class=\"texto-amarillo\">jQuery Mobile<\/span> a la hora de cambiar de p&aacute;gina y no funciona. La mejor forma de conseguir esa funcionalidad es utilizar el <span class=\"texto-amarillo\">almacenamiento en sesi&oacute;n<\/span> mediante <span class=\"texto-verde\">sessionStorage()<\/span>.<\/p>\r\n\r\n<p>Para hacerlo deber&iacute;amos hacer algo como lo siquiente:<\/p>\r\n\r\n<pre class=\"brush:xml\">\r\n\t<a href=\"#verNoticia\" onclick=\"sessionStorage.idVerNoticia='12';\" data-role=\"button\"> Ver noticia 12\t<\/a>\r\n<\/pre>\r\n\r\n<p>Una vez que clicamos sobre el enlace para acceder al detalle de la noticia debemos tratar de <span class=\"texto-amarillo\">recuperar ese par&aacute;metro<\/span> en la pagina de detalle. Para hacer debemos hacer lo siguiente:<\/p>\r\n\r\n<pre class=\"brush:js\">\r\n\r\n\t<script type=\"text\/javascript\">\r\n\t\t\r\n\t\t$(\"#verNoticia\").on(\"pageshow\", function(){\t\r\n\t\t\r\n\t\t\tvar idNoticia=sessionStorage.idVerNoticia;\r\n\t\t\t\r\n\t\t\t\/** Una vez obtenido el ID de noticia hacemos lo necesario para cargar los datos de la noticia **\/\r\n\t\t\r\n\t\t});\r\n\t\r\n\t<\/script>\t\r\n\t\r\n<\/pre>\r\n\r\n<p>Como v&eacute;is, justo antes de mostrar el contenido de la p&aacute;gina recuperamos el ID de la noticia y hacemos las operaciones oportunas para cargar los datos de esa noticia.<\/p>\r\n\r\n<p>Esta es la forma m&aacute;s sencilla de pasar y recuperar variables GET a trav&eacute;s de URL.<\/p>","comentarios":[{"id":"23925","nombre":"Sergio Gonz&aacute;lez Barrios","fecha":"10-04-2014 16:51:44","texto":"sessionStorage te permite guardar tantas variables como desees. POr ejemplo:\r\n\r\nonclick=\"sessionStorage.idVerNoticia='12';sessionStorage.nombre='sergio';\""},{"id":"23906","nombre":"Andrezs","fecha":"10-04-2014 16:51:44","texto":"SI son varios Datos??"},{"id":"23657","nombre":"Sergio Gonz&aacute;lez Barrios","fecha":"10-04-2014 16:51:44","texto":"Creo recordar que web storage solo se puede usar para navegadores web como su definici&oacute;n indica. Si quieres usar storage para app m&oacute;viles deber&iacute;as utilizar el sessionStorage o locaStorage que funcionan muy bien. \r\n\r\nYo personalmente desaconsejar&iacute;a el web storage ya que muchos navegadores no lo soportan.\r\n\r\n"},{"id":"23648","nombre":"andres","fecha":"10-04-2014 16:51:44","texto":"Hola e Web Storage  funciona con los navegadores y etc, y con  mobiles.???\r\nGracias!! "}]}"

Como ves, antes se ve correctamente el código HTML del campo 'texto' y en el DESPUES muchos de los caracteres han sido transformados.

[pateketrueke]

Como ves, antes se ve correctamente el código HTML del campo 'texto' y en el DESPUES muchos de los caracteres han sido transformados.

Pues leyendo únicamente lo que viene en texto lo veo perfecto:

"texto":"<p><img style=\"float:left;margin-right:15px;width:250px;\" src=\".\/recursos\/logo-jquery-mobile.png\" alt=\"jQuery mobile\"\/>Son muchas las ventajas de utilizar <span class=\"texto-amarillo\">jQuery Mobile<\/span> pero, a veces, tambi&eacute;n nos encontramos con problemas que habitualmente no encontrar&iacute;amos y el utilizar jQuery Mobile lo complica un poco.<\/p>\r\n\r\n<p>En este caso, si queremos <span class=\"texto-amarillo\">pasar par&aacute;metros<\/span> a trav&eacute;s de la <span class=\"texto-amarillo\">URL<\/span> igual que har&iacute;amos en HTML, por ejemplo, <span class=\"texto-verde\">www.midominio.com\/verNoticia?id=12<\/span> , nuestra primera idea para hacer esto ser&iacute;a poner un enlace parecido a esto:<\/p>\r\n\r\n<pre class=\"brush:xml\">\r\n\r\n\t<a href=\"#verNoticia?12\" data-role=\"button\">Ver noticia 12<\/a>\r\n\t\r\n<\/pre>\r\n\r\n<p>Sin embargo, esa variable es obviada por <span class=\"texto-amarillo\">jQuery Mobile<\/span> a la hora de cambiar de p&aacute;gina y no funciona. La mejor forma de conseguir esa funcionalidad es utilizar el <span class=\"texto-amarillo\">almacenamiento en sesi&oacute;n<\/span> mediante <span class=\"texto-verde\">sessionStorage()<\/span>.<\/p>\r\n\r\n<p>Para hacerlo deber&iacute;amos hacer algo como lo siquiente:<\/p>\r\n\r\n<pre class=\"brush:xml\">\r\n\t<a href=\"#verNoticia\" onclick=\"sessionStorage.idVerNoticia='12';\" data-role=\"button\"> Ver noticia 12\t<\/a>\r\n<\/pre>\r\n\r\n<p>Una vez que clicamos sobre el enlace para acceder al detalle de la noticia debemos tratar de <span class=\"texto-amarillo\">recuperar ese par&aacute;metro<\/span> en la pagina de detalle. Para hacer debemos hacer lo siguiente:<\/p>\r\n\r\n<pre class=\"brush:js\">\r\n\r\n\t<script type=\"text\/javascript\">\r\n\t\t\r\n\t\t$(\"#verNoticia\").on (\"pageshow\", function(){\t\r\n\t\t\r\n\t\t\tvar idNoticia=sessionStorage.idVerNoticia;\r\n\t\t\t\r \n\t\t\t\/** Una vez obtenido el ID de noticia hacemos lo necesario para cargar los datos de la noticia **\/\r\n\t\t\r\n\t\t});\r\n\t\r\n\t<\/script>\t\r\n\t\r\n<\/pre>\r\n\r\n<p>Como v&eacute;is, justo antes de mostrar el contenido de la p&aacute;gina recuperamos el ID de la noticia y hacemos las operaciones oportunas para cargar los datos de esa noticia.<\/p>\r\n\r\n<p>Esta es la forma m&aacute;s sencilla de pasar y recuperar variables GET a trav&eacute;s de URL.<\/p>",

Salvo los acentos, que probablemente escapaste anteriormente (cosa que no puedo adivinar) todo luce perfecto, el HTML sigue bien formado y no se ha modificado como dices.

¿No será que en algún otro punto de tu programación Javascript (que tampoco muestras) modificas esto sin darte cuenta?

Vamos, que la evidencia es clara, json_encode() no tiene culpa de nada.