pass encoded php json to javascript

Question

I have a problem with my application made in PHP and javascript.

I have an ajax call to a function php that get values from database. I retrieve many records with fields and inside it I have a field called description with a value like this:

<p><strong>TEST IT</strong></p><p>non gras<span style="color: rgb(192, 145, 0);">sett</span>o  </p>

After I encode the json, get it in javascript and print it. But the result is:

TEST+IT

non+grassetto++

My code is something like this:

AJAX call:

$.ajax({   
                url: site_url_database, 
                type: "GET", 
                async: true,
                data: window.location.search, 
                dataType: "json",
                timeout: 30000,
                success: function(data) {
                    _.each(data.hotel, function(d, index_d) {
                        data.hotel[index_d].description = decodeURIComponent(d.description);
                    });
                },
                error: function(data) {

                }
            })

PHP function to get field description:

....
$hotel_array['description'] = urlencode($row->hotel_description);
....
//encode array to return
$hotel_array = json_encode($hotel_array);
echo($hotel_array);

After I print it in javascript (Backbone) but if I make a console.log() I get this:

TEST+IT

    non+grassetto++

How can I print it well?

Thanks

PS I can't change the method of working so I need an ajax call a function php and print it in Backbone/javascript I only need to encode and decode well

I have already tried in php:

$hotel_array['description'] = addslashes(htmlentities($row->hotel_description));

In javascript I have tried to use: https://raw.githubusercontent.com/kvz/phpjs/master/functions/url/urldecode.js

HTML Entity Decode

Answer 1

Javascript's decodeURIComponent() does not remove the + characters added by PHP's urlencode() ; it expects space to be encoded as %20 , not + :

$hotel_array['description'] = urlencode($row->hotel_description);

php > echo $hotel_array['description'];
%3Cp%3E%3Cstrong%3ETEST+IT%3C%2Fstrong%3E%3C%2Fp%3E%3Cp%3Enon+gras%3Cspan+style%3D%22color%3A+rgb%28192%2C+145%2C+0%29%3B%22%3Esett%3C%2Fspan%3Eo++%3C%2Fp%3E

Then, in Javascript:

>js s = '%3Cp%3E%3Cstrong%3ETEST+IT%3C%2Fstrong%3E%3C%2Fp%3E%3Cp%3Enon+gras%3Cspan+style%3D%22color%3A+rgb%28192%2C+145%2C+0%29%3B%22%3Esett%3C%2Fspan%3Eo++%3C%2Fp%3E';
>js decodeURIComponent(s);
<p><strong>TEST+IT</strong></p><p>non+gras<span+style="color:+rgb(192,+145,+0);">sett</span>o++</p>

As you can see, the + characters remain in the decoded string.

Instead you can use rawurlencode() which follows RFC 3986 and encodes spaces as %20 .

php > $s = rawurlencode('<p><strong>TEST IT</strong></p><p>non gras<span style="color: rgb(192, 145, 0);">sett</span>o  </p>');
php > echo $s;
%3Cp%3E%3Cstrong%3ETEST%20IT%3C%2Fstrong%3E%3C%2Fp%3E%3Cp%3Enon%20gras%3Cspan%20style%3D%22color%3A%20rgb%28192%2C%20145%2C%200%29%3B%22%3Esett%3C%2Fspan%3Eo%20%20%3C%2Fp%3E

Then in Javascript:

js> decodeURIComponent('%3Cp%3E%3Cstrong%3ETEST%20IT%3C%2Fstrong%3E%3C%2Fp%3E%3Cp%3Enon%20gras%3Cspan%20style%3D%22color%3A%20rgb%28192%2C%20145%2C%200%29%3B%22%3Esett%3C%2Fspan%3Eo%20%20%3C%2Fp%3E');
<p><strong>TEST IT</strong></p><p>non gras<span style="color: rgb(192, 145, 0);">sett</span>o  </p>

Alternatively, if you can not modify the PHP code, you can manually replace + with ' ' :

js> s = '%3Cp%3E%3Cstrong%3ETEST+IT%3C%2Fstrong%3E%3C%2Fp%3E%3Cp%3Enon+gras%3Cspan+style%3D%22color%3A+rgb%28192%2C+145%2C+0%29%3B%22%3Esett%3C%2Fspan%3Eo++%3C%2Fp%3E';
js> decodeURIComponent(s).replace(/\+/g, ' ');
<p><strong>TEST IT</strong></p><p>non gras<span style="color: rgb(192, 145, 0);">sett</span>o  </p>

Answer 2

It appears that the PHP is stripping the HTML tags before passing it to the browser. Check to make sure that there is no strip_tags() function in your PHP function before encoding it.