jquery - Image Not Rendering - JavaScript,Ajax -
i'm trying render images in list using html, javascript , ajax.
following html code
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>cat clicker</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="cc.js"></script> </head> <body> <div class="container"> <div class="row-fluid"> <div class="col-sm-3"> <ul id="elems" class = "elems"></ul> </div> <div class="col-sm-9"> hi </div> </body> </html> in javascript code, have 3 var named view1, model , octopus follows
$(function(){ var model = { init: function() { imagearray = []; imagearray[0] = { id: 0, image01 : new image(), src : "c0.jpg", imagecaption : "cat0", count: 0 }; imagearray[1] = { id: 1, image01 : new image(), src : "c1.jpg", imagecaption : "cat1", count: 0 }; imagearray[2] = { id: 2, image01 : new image(), src : "c2.jpeg", imagecaption : "cat2", count: 0 }; imagearray[3] = { id: 3, image01 : new image(), src : "c3.jpeg", imagecaption : "cat3", count: 0 }; imagearray[4] = { id: 4, image01 : new image(), src : "c4.jpg", imagecaption : "cat4", count: 0 }; }, returnimages: function() { return imagearray.src } }; var octopus = { openall: function() { return model.returnimages(); }, init: function() { model.init(); view1.init(); } }; var view1 = { init: function() { this.catlist = $('#elems'); view1.render(); }, render: function(){ var htmlstr = ''; octopus.openall().foreach(function(image){ htmlstr += "<li><img class="imge" src='" + image + "' width=\"160\" height=\"120\"/></li></hr><br/>"; }); this.catlist.html(htmlstr); } }; octopus.init(); }); in model var set data , function returns images. in view1 var, set render function display list of images , in var octopus i'm trying connect model , view. image not rendering in page. please me understand i'm going wrong here.
thanks in advance
where you're going wrong imgarray array , doesnt have property src
returnimages: function() { return imagearray.src } each element in array has property src suspect trying array of src properties. change to
returnimages: function() { return imagearray.map(function(e){ return e.src; }); } however, isn't whole story - model.init method creates array, never - gets thrown away method ends. want store somewhere in model:
var model = { init: function() { imagearray = []; //.. snip .. // model.imagearray= imagearray; } } and you'll need update returnimages
returnimages: function() { return model.imagearray.map(function(e){ return e.src; }); } 
Comments
Post a Comment