I am now working on a Node.js project, and on my ejs view page, I'm retrieving this array of objects, like:
[{ name: 'Andy',
age: 20,
username: 'andygoodluck'},
{name: 'Terry',
age: 21,
username: 'terrygoodnight'}]
My objective is to make use of this data to dynamically create and inject content using JavaScript. My existing approach is:
- Put this data into a variable, say
usersObjArr
. - Set number of user blocks to be shown per row with a variable, say
numUsersPerRow=3
. - Calculate the number of rows I will need, like
numRows=getNumRows(usersObjArr.length);
If there is only one row of content needed, simply go through the array of objects and push them into the row:
for(var j=0;j<usersObjArr;j++){ insertUserBlock();//pushes user objects one by one into the row }
Else if there is more than one row, check that I am not working with the last row. As long as it is not the last row, insert the predetermined number of user blocks using the array of objects. Like:
for(var i=0;i<numRows;i++){ if(i!=(numRows-1)){ //as long as it's not the last row, insert 3 users for(var k=0;k<numUsersPerRow;k++){ insertUserBlock(i); //insert 3 blocks into the row specified by the argument }
On the other hand, if it is the last row, then I will insert the number of users equivalent to the remainder:
else{ for(var k=0;k<usersObjArr.length%numGamesPerRow;k++){ insertUserBlock(i); } }
I can't help but feel that this is not the most efficient approach. I am a web designer turned frontend developer and have a weak programming background, so I can really do with some advice on how to improving my coding above.
==========UPDATED==========
Here's the full code:
function getNumRows(numOfUsers){
return Math.ceil(numOfUsers/3);
}
function insertUserBlocks(usersObjArr){
var numUsersAdded=0,
numUsersPerRow=3,
numRows=getNumRows(usersObjArr.length);
if(usersObjArr.length<numUsersPerRow){
//if only one row worth of users, then insert just one row and push userblocks based on number of users
insertUserRow();
for(var j=0;j<usersObjArr.length;j++){
insertUserBlock();
}
}
else{
//if more than 3 users, we need to insert more than one row, and insert users into first row, then second, and so on
var numUsers=usersObjArr.length;
for(var i=0;i<numRows;i++){
insertUserRow(i);
if(i!=(numRows-1)){
//as long as it's not the last row, insert 3 users
for(var k=0;k<numUsersPerRow;k++){
insertUserBlock(i);
insertUserBlockContent(i,k,usersObjArr[numUsers-1]);//insert userContent based on last index of usersObjArr; minus one because of zero-based index
numUsersAdded++;
numUsers--;
}
}
else{
//otherwise, insert number of users equivalent to the remainder
for(var l=0;l<usersObjArr.length%numUsersPerRow;l++){
insertUserBlock(i);
insertUserBlockContent(i,l,usersObjArr[numUsers-1]);
numUsersAdded++;
numUsers--;
}
}
}
}
}
function insertUserRow(rowNumber){
if(arguments.length==0)
$('#main').append('<div class="row-fluid" />');
else
$('#main').append('<div class="row-fluid" id="row'+rowNumber+'" />');
}
function insertUserBlock(rowNum){
if(arguments.length==0){
$('#main .row-fluid').append('<div class="span4 user-block" />');
}
else{
$('#row'+rowNum).append('<div class="span4 user-block" />');
}
}
function insertUserBlockContent(rowNum,blockNum,userObj){
var userName=userObj['name'],
userPic=userObj['pic'],
userNickname=userObj['nickname'],
userUrl=userObj['url'];
$('#row'+rowNum+' .span4').eq(blockNum).append('<img src="'+userPic+'" />').append('<div />');
$('#row'+rowNum+' .span4 div').eq(blockNum).append('<h2>'+userName+'</h2>').append('<p>'+userNickname+'</p>').append('<a target="_blank" class="center btn btn-danger" href="'+ userUrl +'">Website</a>');
}
Basically what I'm trying to achieve is to extract the data and use it to insert rows of user content into the page. Maybe it's because of the rigid HTML structure in place? (I'm using Bootstrap.) I feel like my approach isn't quite efficient.