Question

I’m using PHP and a for loop to prepare data into proper html and output the data using JSON to be appended and displayed on the page. JSON slash escaping is causing the html to be viewed incorrectly by the browser.

This is my PHP for loop:

$json = '<div id="rsec3" class="rsec">';
for($i=0; $i<count($array); $i++)
{
    $coverart = $array[$i]['cover'];
    if(empty($coverart))
    {
        $coverart = "nocoverart.gif";
    }
    $json .= '<div><img="/video/cover/thumbs/' . $cover . '"></div>';
}
$json .= '</div>';

$json = json_encode(array('ok' => 'ok', 'html' => $json));
echo $json;

This is my javascript parsing and appending the json:

$.get('/index_get.php?iid='+this.id,function(data){
    $('#indload').hide();
    js=jQuery.parseJSON(data);
    $('#indr').append(js.html);
});

This is what the browser is displaying, a bunch of useless jargon, and it is appending a </img="> on its own?

<img=" video cover thumbs img.png"></img=">

How can I prevent this from occuring, and having the image displayed properly?

Answer 1

I think problem could be invalid HTML tag <img> on the php code. In the <img> tag, src is missing and <img> tag was not closed.

Change the following

$json .= '<div><img="/video/cover/thumbs/' . $cover . '"></div>'; 

to

$json .= '<div><img src="/video/cover/thumbs/' . $cover . '" /></div>';