Hoe to convert a JSON array of paths to images stored on a server into a javaScript array to display them? Using AJAX
- by MichaelF
I need for html file/ ajax code to take the JSON message and store the PATHS as a javaScript array. Then my buildImage function can display the first image in the array. I'm new to AJAX and believe my misunderstanding lies within the converting of the JSON to Javascript. I'm confused also about if my code creates a JSON array or object or either. I might need also to download a library to my app to understand JSON?
Below is a PHP file loading the paths of the images. I believe json ecode is converting the PHP Array in a Json message.
<?php
include("mysqlconnect.php");
$select_query = "SELECT `ImagesPath` FROM `offerstbl` ORDER by `ImagesId` DESC";
$sql = mysql_query($select_query) or die(mysql_error());
$data = array();
while($row = mysql_fetch_array($sql,MYSQL_BOTH)){
$data[] = $row['ImagesPath'];
}
echo $images = json_encode($data);
?>
Below is the script in is going to be loaded on an Cordova app.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/cascading.css">
<script>
function importJson(str) {
// console.log(typeof xmlhttp.responseText);
if (str=="") {
document.getElementById("content").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
//var images = JSON.parse(xmlhttp.responseText);
document.getElementById("content").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","http://server/content.php");
xmlhttp.send();
}
function buildImage(src) {
var img = document.createElement('img')
img.src = src
alert("1");
document.getElementById('content').appendChild(img);
}
for (var i = 0; i < images.length; i++) {
buildImage(images[i]);
}
</script>
</head>
<body onload= "importJson();">
<div class="contents" id="content" ></div>
<img src="img/logo.png" height="10px" width="10px" onload= "buildImage();">
</body>
