javascript - image is not show in json page -


the images database not coming out in json page , html page image source name outputted. how make images show on html page?

thank precious time.

linejson.php page

<?php header("access-control-allow-origin: *"); header("content-type: application/json; charset=utf-8");  $conn = new mysqli("localhost", "db_user", "db_pwd", "db_name");  $result = $conn->query("select tbl_users.image, tbl_users.firstname, tbl_users.lastname, tbl_users.username,    tbl_posts.post, tbl_posts.post_date                     tbl_posts inner join tbl_users on  tbl_users.id=tbl_posts.user_id                     tbl_posts.user_id=3");  $outp = "["; while($rs = $result->fetch_array(mysqli_assoc)) { if ($outp != "[") {$outp .= ",";}  $outp .= '{"image":"'  . $rs["image"] . '",'; $outp .= '"firstname":"'   . $rs["firstname"]     . '",'; $outp .= '"lastname":"'  . $rs["lastname"] . '",'; $outp .= '"username":"'   . $rs["username"]        . '",'; $outp .= '"post":"'   . $rs["post"]        . '"}';  } $outp .="]";  $conn->close();  echo($outp); ?> 

linejson.html page

<!doctype html> <html>  <head> <style>   table, th , td  {  border-top: 1px solid purple;  border-collapse: collapse;  padding: 15px;  } table tr:nth-child(odd) { background-color: #f0f1f1;  } table tr:nth-child(even) { background-color: #ffffff; } </style> </head>  <body> <div id="timeline"></div>  <script> var xmlhttp = new xmlhttprequest(); var url = "http://www.outpaceng.com/linejson.php";  xmlhttp.onreadystatechange=function() { if (xmlhttp.readystate == 4 && xmlhttp.status == 200) {     myfunction(xmlhttp.responsetext);   }   } xmlhttp.open("get", url, true); xmlhttp.send();  function myfunction(response) { var arr = json.parse(response); var i; var out = "<table>";  for(i = 0; < arr.length; i++) {     out += "<tr><td>" +     arr[i].image +     "</td><td>" +     arr[i].firstname +     "&nbsp;" +     arr[i].lastname +     "&nbsp;" +     arr[i].username +     "<br>" +     arr[i].post +     "</td><tr>" ;     }    out += "</table>";    document.getelementbyid("timeline").innerhtml = out;  }  </script>  </body>  </html> 

the code can sipmlified , should use json_encode creating json

change this

$outp = "["; while($rs = $result->fetch_array(mysqli_assoc)) { if ($outp != "[") {$outp .= ",";}  $outp .= '{"image":"'  . $rs["image"] . '",'; $outp .= '"firstname":"'   . $rs["firstname"]     . '",'; $outp .= '"lastname":"'  . $rs["lastname"] . '",'; $outp .= '"username":"'   . $rs["username"]        . '",'; $outp .= '"post":"'   . $rs["post"]        . '"}';  } $outp .="]";  $conn->close();  echo($outp); 

to

echo json_encode($result->fetch_all()); $conn->close(); 

and javascript

for(i = 0; < arr.length; i++) {     out += "<tr><td><img src='" +     arr[i].image +     "' alt="img"/></td><td>" +     arr[i].firstname +     "&nbsp;" +     arr[i].lastname +     "&nbsp;" +     arr[i].username +     "<br>" +     arr[i].post +     "</td><tr>" ; } 

Comments

Popular posts from this blog

java - Static nested class instance -

c# - Bluetooth LE CanUpdate Characteristic property -

JavaScript - Replace variable from string in all occurrences -