There is json in the file:
{"image": [ {"imagename":"F", "picture":"f.jpeg", "size":"300x225"}, {"imagename":"M", "picture":"m.jpg", "size":"250x250"}, {"imagename":"S", "picture":"s.jpg", "size":"250x250"}, {"imagename":"G", "picture":"g.jpg", "size":"250x250"}, {"imagename":"P", "picture":"p.jpg", "size":"250x250"} ] } In php I read this file and send it to the page:
<?php header("Access-Control-Allow-Origin: *"); header("Content-Type: application/json; charset=UTF-8"); $outp = file_get_contents("list.json"); echo($outp); ?> Now in javascript on the page should take the data from that sent request and display on the page:
var xmlhttp = new XMLHttpRequest(); var url = "serverJsonRun.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; i < arr.length; i++) { out += "<tr><td>" + arr[i].imagename + "</td><td>" + arr[i].picture + "</td><td>" + arr[i].size + "</td></tr>"; } out += "</table>"; document.getElementById("id01").innerHTML = out; } And here is the problem - I can not correctly read arr. If you remove {"Image:" - everything reads ...