Image Not Rendering - JavaScript,Ajax

Question

I'm trying to render images in a list using HTML, Javascript and AJAX.

Following is my 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 my JavaScript Code, I have 3 Var named view1, model and octopus as 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 the model var I set up all my data and a function that returns all the images. In the view1 var, I set up my render function to display a list of images and in var octopus I'm trying to connect the model and view. However the image is not rendering in my page. Please help me to understand where I'm going wrong here.

Thanks in Advance

Jamiec · Accepted Answer · 2017-09-11 08:38:59Z

Where you're going wrong is that imgArray is an Array and doesnt have a property src

returnImages: function() {
    return imageArray.src
}

Each element in the array has a property src so I suspect you were trying to get an array of all the src properties. Change it to

returnImages: function() {
    return imageArray.map(function(e){
       return e.src;
    });
}

However, this isn't the whole story - your model.init method creates the array, but never does anything with it - it gets thrown away as soon as that method ends. You probably want to store it somewhere in the model:

var model = {
        init: function() {
            imageArray = [];
            //.. snip .. //
            model.imageArray= imageArray;
       }
}

And then you'll need to update returnImages

returnImages: function() {
    return model.imageArray.map(function(e){
       return e.src;
    });
}

CodeHacker · Accepted Answer · 2017-09-11 09:12:12Z

0

You should return the array..

returnImages: function() {
   return imageArray
}

and then bind to the src property of each image

 render: function(){
        var htmlStr = '';
        octopus.openAll().forEach(function(image){
            htmlStr += "<li><img class='imge' src='" + image.src + "' width=\"160\" height=\"120\"/></li></hr><br/>";
        });
        this.catList.html(htmlStr);
    }

Here to see it working in jsfiddle

edited Sep 11, 2017 at 9:12

answered Sep 11, 2017 at 8:41

CodeHacker

2,1381 gold badge22 silver badges36 bronze badges

3 Comments

Arjun Viswanathan Over a year ago

Thanks for your recommendations. I Initially tried returning the array and then bind src while display each image. But that didn't work for me. However I tried updating the returnImages as follows returnImages: function() { return model.imageArray.map(function(e){ return e.src; }); } This worked for me.

CodeHacker Over a year ago

Jamiec also detected the problem that you don't store the array in the model... so his answer should nepl you out. and the you can map as he sugests or return model.imageArray

Arjun Viswanathan Over a year ago

Just realized both the suggestions works for me! Thanks!

Collectives™ on Stack Overflow

Image Not Rendering - JavaScript,Ajax

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related