'evaluating' image[x] in a loop - php

Question

for (m=0;m<z;m++) {
document.write("<img src=" + image1 + '>' + "<br>");
}
I'm successfully getting a list of image URLs from an XML file via PHP.
The var 'image1' returns 'image_1.png'.
In the above loop I want to output these images. 'image1' above displays 'image_1.png' twice (z=2 in this case), but I'm after a list of all the images. I want to throw in something like 'image[m]', but i know thats not right.
I'd be surprised if anyone hasn't asked this question before, I searched but couldn't find an answer.
This is the PHP thats getting my XML data:
<script type="text/javascript">
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
// code for IE6, IE5
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","../../file.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("project")
var j=xmlDoc.getElementsByTagName("imagelist");
for (i=0;i<x.length;i++) {
for (z=0;z<j.length;z++) {
this["image" + z] = j[z].getElementsByTagName("image")[z].childNodes[0].nodeValue
}
}

Answer 1

Whoa. Ok. This right here:
this["image" + z] = j[z].getElementsByTagName("image")[z].childNodes[0].nodeValue
Don't do that.
This is dynamically creating variables in the global scope. I could explain why that is (this here is the global object, and properties of the global object are themselves global variables), but for novice JS programmers it's probably sufficient to say that you should just never do that because, generally, it's a pretty bad idea.
Instead, what you really want is an array.
var images = [];
for (i=0;i<x.length;i++) {
for (z=0;z<j.length;z++) {
images.push(j[z].getElementsByTagName("image")[z].childNodes[0].nodeValue);
}
}
Now your loop later is pretty straight forward. You simply use the loop index as the array index to fetch the value you want.
for (m=0;m<z;m++) {
document.write('<img src="'+ images[m] +'"><br>');
}

Answer 2

<script type="text/javascript">
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
// code for IE6, IE5
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","../../designportfolio.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var projectname = "<?= $name ?>";
var x=xmlDoc.getElementsByTagName("project")
var j=xmlDoc.getElementsByTagName("imagelist");
var k=xmlDoc.getElementsByTagName("image");
for (i=0;i<x.length;i++) {
//vars from xml used to display data in html
var folder = x[i].getElementsByTagName("folder")[0].childNodes[0].nodeValue;
//only defines the data if the projectname and folder name match
if (folder == projectname) {
var projecttitle = x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
var projectinfo_l = x[i].getElementsByTagName("projectinfo_l")[0].childNodes[0].nodeValue;
var skillsused = x[i].getElementsByTagName("skillsused")[0].childNodes[0].nodeValue;
var date = x[i].getElementsByTagName("date")[0].childNodes[0].nodeValue;
var videoURL = x[i].getElementsByTagName("videoURL")[0].childNodes[0].nodeValue;
var images = [];
for (z=0;z<k.length;z++) {
images.push(x[i].getElementsByTagName("image")[0].childNodes[0].nodeValue);
document.write("images " + images + "<br>");
}
}
}
im in a total mess. im using an IF to pick only one project, this works. I want only the images from this project. the above code is getting all the images in the xml file (13 of them), i want ONLY the images from the current project (the project corresponding to 'folder' or 'projectname'). I cant do this :(

Answer 3

You have an array of images that you would like to render with js. There are several approaches. The sample code you have in the question is probably the worst way to do it.
Don't use document.write() to do this.
All examples assume 'images' is an array containing n-number of image urls.
Example 1
var images = [],
target = document.getElementById('target_div'); //this is the location in the document where the images are appended to
for(var i=0, len=images.length; i++){
var img = document.createElement('img');
img.src = images[i];
target.appendChild(img);
}
Example 2
var images = [],
target = document.getElementById('target_div'); //this is the location in the document
var arr = [];
for(var i=0, len=images.length; i++){
arr.push('<img src="'+ images[i] +'">');
}
target.innerHTML = arr.join('');