creating an object and returning it into an array.

[webbutter]

Hey all -
Came into this problem creating a portfolio site. I do an ajax request to query my server to return different types of information like id, date, title, medium, size, description.. etc.. these all return fine. in php i separated each row of the result using "^", and then split the results in javascript using the same symbol.

var results = xmlHttp.responseText.split("^");

I then split the individual aspects of each piece ( that were separated with a comma ) using;

for (i = 0; i < numresults; i++) {
var singlerow = results[i].split(',');
ids.push(singlerow[0]);
titles.push(singlerow[1]);
dates.push(singlerow[2]);

so i have arrays like ids[] that contain, in the same order, attributes to individual portfolio pieces. So i thought i would create an object for each piece by creating a function like:

function createPortfolioObject(indexnum){
this.ida = ids[indexnum];
this.title = titles[indexnum];
this.date = dates[indexnum];
this.description = descriptions[indexnum];
this.size = sizes[indexnum];
this.medium = mediums[indexnum];
this.thumbup = thumbups[indexnum];
this.thumbover = thumbovers[indexnum];
this.mainimage = mainimages[indexnum];
alert(""+this);
return this;
}

So i created these objects using a simple loop like:

function makePortfolio(x){
var digitalHolder = new Array();
var w = parseInt(x.length) - 1;
for (var m = 0; m < w; m++){
digitalHolder[m] = createPortfolioObject(m);
}
displayPortfolio(digitalHolder);
}

(the variable x, is the titles array, just to keep a count on how many pieces are in this section). The problem comes when I pass the digitalHolder array into the next function, the digitalHolder Array holds 22 items, but they are all the same. The next function intends to do something like this...

function displayPortfolio(holder){
alert(""+holder[19].title);
for(n=0; n < holder.length; n++){ makediv(holder[n].title,holder[n].thumbup,holder[n].thumbover,holder[n].mainimage);
}
}

function makediv(divid,upimg,overimg,mainimg){
var diva = document.createElement("div");
diva.id = divid;
diva.style.backgroundImage = "url(portfolioUploads/digital/"+upimg+")";
diva.className ="portfolioThumb";
document.getElementById('portfolioContent').appendChild(diva);
}




I feel like it has something to do with storing the creating objects into an array.. but i'm not too sure, any help would be greatly appreciated. Thanks in advance.

[Epotus]

Since you're already formatting the Query String in PHP, instead of doing

0,myTitle,23 Oct 2009^1,your Title, 01 Nov 2009

Just format the query string in the JSON format you want

var myData = [{id:0, title:'my Title',date :'23 Oct 2009'},{id:1, title:'Your Title',date :'01 Nov 2009'}]

it may look strange in the querystring format, but when you break it out

var myData = [
{
id:0,
title:'my Title',
date :'23 Oct 2009'
},
{id:1,
title:'Your Title',
date :'01 Nov 2009'
}
]

you already have your JSON object built to spec

[Kor]

So i created these objects using a simple loop like:

function makePortfolio(x){
var digitalHolder = new Array();
var w = parseInt(x.length) - 1;
for (var m = 0; m < w; m++){
digitalHolder[m] = createPortfolioObject(m);
}
displayPortfolio(digitalHolder);
}

(the variable x, is the titles array, just to keep a count on how many pieces are in this section). The problem comes when I pass the digitalHolder array into the next function, the digitalHolder Array holds 22 items, but they are all the same.
Yes, because the variable m will take a single value: the last one after the loop is run. To "stick" that value you may create a custom property. That means, I guess, you should create an object, not an array.

function makePortfolio(x){
var digitalHolder = {};
var w = parseInt(x.length) - 1;
for (var m = 0; m < w; m++){
digitalHolder[m].ind=m
digitalHolder[m] = createPortfolioObject(this.ind);
}
displayPortfolio(digitalHolder);
}
function displayPortfolio(holder){
for(a in holder){ makediv(holder[a].title,holder[a].thumbup,holder[a].thumbover,holder[a].mainimage);
}
}


Or something like this.

But, as Epotus said: it would be easier to create that JSON object from the beginning.

[webbutter]

Thanks for your help all, This is what i ended up doing.


function handleindexportfoliorequest(){
if (xmlHttp.readyState == 4) {
var results = "";

var results = xmlHttp.responseText.split("^");
var numresults = results.length;
var numresults = parseInt(numresults);
var numresults = numresults -1;

for (i = 0; i < numresults; i++) {
var singlerow = results[i].split('*');
createDiv(singlerow[0],singlerow[1],singlerow[2],singlerow[3],singlerow[4],singlerow[5],singlerow[6],singlerow[7],singlerow[8]);
}
}
}

function createDiv(divid,title,date,desc,size,medium,tup,tover,mimg){
var diva = document.createElement("div");
diva.id = divid;
diva.style.backgroundImage = "url(portfolioUploads/digital/"+tup+")";
diva.className ="portfolioThumb";
document.getElementById('portfolioContent').appendChild(diva);
addRollOvers(divid,tup,tover);
addRollOuts(divid,tup,tover);
}
function addRollOvers(divid,tup,tover){
document.getElementById(divid).onmouseover = function(){this.style.backgroundImage = "url(portfolioUploads/digital/"+tover+")"};
}
function addRollOuts(divid,tup,tover){
document.getElementById(divid).onmouseout = function(){this.style.backgroundImage = "url(portfolioUploads/digital/"+tup+")"};
}


haha this is so much simpler than what i was doing before, but is thus far, achieving all the results i needed. The end results will be more functional, with changes in category of work, and i need to hide portfolio items of any particular category after 8 or so ( for a display ), and then have a slide show function eventually show the entries that were hidden. but as it stands, all the variables i need are there, so i think this is what i needed. Thanks again for your help.