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 + " " + arr[i].lastname + " " + 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 + " " + arr[i].lastname + " " + arr[i].username + "<br>" + arr[i].post + "</td><tr>" ; }
Comments
Post a Comment