Simon Hume Simon Hume - 3 months ago 31
iOS Question

Creating Dynamic ImageViews and populating via HTTP GET using Appcelerator

Just a quick one.

I've got a TableView that is being populated by a HTTP GET request to an API. It returns a mix of text, images, movies etc using Appcelerator on both iOS and Android.

I've got everything laid out and working fine, but when I cycle through the images only the last item in my tableView gets populated with an image, rather than all of them.

I suspect it's because the imageView doesn't have a unique name. I'm having to do a request within the for loop as thats the way the API is setup, each download has to be requested separately.

Any ideas how to achieve this?

function getMedia(itemID, mediaType) is where I do the download an apply it to the imageView.

var f = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, itemID + '.png');
f.write(this.responseData); // write to the file

postImage.image = f.nativePath;


Here is my code:

var xhr = Ti.Network.createHTTPClient({
onerror: function() {

// hide the table
exploreTableView.visible = false;

},
onload: function() {
// parse the retrieved data, turning it into a JavaScript object
json = JSON.parse(this.responseText);
Ti.API.info(json);


// don't build the table if no posts have been made
if (json.length == 0) {

tableData = [];

//holdingLabel.visible = true;
exploreTableView.visible = false;

} else {

//holdingLabel.visible = false;
exploreTableView.visible = true;

for (i = 0; i < json.length; i++) {

// check if this has been deleted, if so, skip it and move on!
if (json[i].status == "alive") {


row = Ti.UI.createTableViewRow({
height: 'auto',
bottom: 10,
selectedBackgroundColor: 'transparent',
//editable: deleteRow,
layout: 'vertical'
});




var postView = Ti.UI.createView({
top: 0,
height: Ti.UI.SIZE,
layout: 'vertical'
});

// detect what media we have


// show an image if there is an image uploaded
if (json[i].type == "image/jpeg") {
var postImage = Ti.UI.createImageView({
image: 'images/bcell-square-picture-pre-load.png',
defaultImage: 'bcell-square-picture-pre-load.png'
});

postView.add(postImage);

getMedia(json[i]._id, "photo");
}


row.add(postView);

tableData.push(row);

// set some variables to access
row.itemID = json[i]._id;


function getMedia(itemID, mediaType) {
// let's fetch the media for the post
if (mediaType == "photo") {
var url = "https://myapi.com/";
}



var xhr = Ti.Network.createHTTPClient({
onload: function() {
// handle the response
Ti.API.info('Media: ' + this.responseData);

var f = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, itemID + '.png');
f.write(this.responseData); // write to the file

postImage.image = f.nativePath;

}
});

xhr.open("GET", url);
// set the header for the correct JSON format
xhr.setRequestHeader("xxx", Ti.App.Properties.getString('token'));
// send the data to the server
xhr.send();
}



}



}



}

exploreTableView.setData(tableData);

}



});

xhr.open("GET", url);

xhr.setRequestHeader("xxx", Ti.App.Properties.getString('token'));

// send the data to the server
xhr.send();


Any help is appreciated!

Simon

Answer

Since you are downloading the images in a different function postImage is linking to the last element because the loop is already done when the images appear. It should work when you pass postImage as a parameter to getMedia

Comments