Insert retrieved data of image paths via json jquery and insert in img tag src

Question

i m grabbing image paths from MySQL via php and then json_encode and with response data i m using below code to display image but not working

My PHP Code

$imgurl=array();
if(mysql_num_rows($result) > 0){
//Fetch rows
while($row = mysql_fetch_array($result)){
$imgurl = $row['imgurl'];  
}
}
echo json_encode($imgurl);  
else
{
echo "No results matching family \"$family\"";
}

The Code at my Jquery side

success: function( data ){
$('#pgwrapid').html(data);
}

the data is giving below output which are actually image paths

 ["images\/zara\/shoes\/thumbnail","images\/hermes\/shoes\/thumbnail","images\/hermes\/shoes\/thumbnail"]

now how to remove the backslashes and insert it in img src=""

Answer 1

Try Below :

   success: function( data ){

             $.each(data,function(index,val){
                $('#pgwrapid').append("<img src='"+val+"' alt='Thumbnail'/>");


                }); 
            }

But please check first if you are getting value in val or not.

Answer 2

You have wrong quotes there. You need to use single quotes for alt='Thumbnail' or escape the double quotes you are already using alt=\"Thumbnail\"

Answer 3

try this code:

success: function( data ){
var evaluateddata = eval('('+data+')');

$.each(evaluateddata,function(index,val){
   $('#pgwrapid').append("<img src="+val+" alt="Thumbnail"/>");
 });
}

the data is treated as a string after the request, but when it comes json I love to use the hard coded iterative way in javascript (not really fund of using .each() api of jquery so I have a doubt on the above code though not sure if it should be val or should I still identify the variable to access such as val.<variablename>) like this:

success: function( data ){
    var evaluateddata = eval('('+data+')');

    for(val in evaluateddata)
    {
       $('#pgwrapid').append("<img src="+evaluateddata[val]+" alt="Thumbnail"/>");
    }
}

this is the direct javascript approach to iterate on the json object but it depends on you which one is ideal for you (somehow it would be better if you post the original json string response from your application).

I see the code. how about if you try this code:

 if(mysql_num_rows($result) > 0){
    //Fetch rows
    $output = array();
    while($row = mysql_fetch_array($result)){
        $output[] = $row['imgurl'];
       }
    echo json_encode($output);
}else{
    echo "No results matching family \"$family\"";
}

your code is actually trying to output a separate json value for each imgurl definitely it won't work because the json value that your application will be returning would be evaluated as one and your code is printing several json values which may cause errors when your javascript code receives it.