i don't understand why json.parse()
isn't working. error right before eyes can't find it. here code have:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>stage galerij</title> <link rel="icon" href="img/website/photo.jpg" type="image/jpg" sizes="any"> <link rel="stylesheet" href="css/main.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> </head> <body> <div id="id01"></div> <script> var xmlhttp = new xmlhttprequest(); var url = "http://www.clouddesk.be/galerij/includes/galerij_array.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>"; (i = 0; < arr.length; i++) { out += "<tr><td>" + arr[i].id + "</td><td>" + arr[i].file_path + "</td><td>" + arr[i].uitleg + "</td></tr>"; } out += "</table>"; document.getelementbyid("id01").innerhtml = out; } </script> </body> </html>
and here code of php file:
<?php header("access-control-allow-origin: *"); header("content-type: application/json; charset=utf-8"); $conn = new mysqli("localhost", "clouddesk_robbe", "password", "clouddesk_stage"); $result = $conn->query("select * fotos"); $outp = "["; while($rs = $result->fetch_array(mysqli_assoc)) { if ($outp != "[") {$outp .= ",";} $outp .= '{"id":"' . $rs["idfotos"] . '",'; $outp .= '"file_path":"' . $rs["foto_file"] . '",'; $outp .= '"uitleg":"' . $rs["uitleg"] . '",'; $outp .= '"alt":"'. $rs["alternatief"] . '"}'; } $outp .="]"; $conn->close(); echo($outp); ?>
it outputs json string:
[{"id":"2","file_path":"img\gallerij\afbeelding-61.png","uitleg":"zebra verliest zijn strepen.","alt":"stressige zebra"},{"id":"3","file_path":"img\gallerij\download(1).jpg","uitleg":"tomatensoep met balletjes: nog een keer blazen en ik sla op je bek.","alt":"grappige cartoon"},{"id":"4","file_path":"img\gallerij\download.jpg","uitleg":"brilsmurf met een raar gezicht","alt":"brilsmurf"},{"id":"5","file_path":"img\gallerij\download(2).jpg","uitleg":"mooi avondlijk woestijnuitzicht.","alt":"woestijnuitzicht"},{"id":"8","file_path":"img\gallerij\image1.jpg","uitleg":"een mooi blaadje dat door het herfstseizoen van de boom gevallen en eenzaam op de grond licht. het getrokken in de late herfstzon.","alt":"herfstblaadje op de grond"},{"id":"9","file_path":"img\gallerij\7.jpg","uitleg":"een kleurrijk paneel dat elke mens wel terug wat opfleurd.","alt":"een kleurig paneel"},{"id":"10","file_path":"img\gallerij\images(1).jpg","uitleg":"mooie foto van een golf die in de late avond getrokken is. je ziet de reflectie van de zo in de buiging van de golf.","alt":"golf in de avondzon"},{"id":"12","file_path":"img\gallerij\images.jpg","uitleg":"mooie auto, het een dure rode lexus getrokken langs de linker voorkant.","alt":"mooie rode lexus"},{"id":"13","file_path":"img\gallerij\nikon-d810-image-sample-6.jpg","uitleg":"een uitzicht op een onbewoond eiland zoals je je voorstelt in je verbeelding","alt":"een onbewoond eiland"},{"id":"14","file_path":"img\gallerij\image-slider-2.jpg","uitleg":"het huis van de film in de lucht doormiddel van duizenden ballonen aan de schoorsteen.","alt":"huis in de lucht"},{"id":"15","file_path":"img\gallerij\demo-image.jpg","uitleg":"een mooie foto van een zwaan.","alt":"foto van een zwaan"}]
i copied practically page of w3schools.com: http://www.w3schools.com/json/json_example.asp when tested original code of w3schools.com worked perfectly. when changed url variable , array names, doesn't work anymore. tested if json ouput valid online validator , said fine.
json.parse() not working because json string not proper. file_path
img\gallerij\afbeelding-61.png
should img/gallerij/demo-image.jpg
. please change file_path
everywhere in json string .
click here jsfiddle example.
file_path
getting generated $outp .= '"file_path":"'. $rs["foto_file"] . '",';
replace \
/
.
benefit: path using json.parse()
img/gallerij/demo-image.jpg
directly in client, path can used directly src
of dom element.
Comments
Post a Comment