print array of object in javascript and print in html tags

Question

i am using storelocater.js for multiple location in google map and show the information according to the location with image. i can show only one image but i want to show multiple images inside the information panel. link this

Here is my code

    var panelDiv = document.getElementById('panel');
storeLocator.Panel.NO_STORES_IN_VIEW_HTML_ = '<li class="no-stores">The nearest outlet:</li>';
  var Store = storeLocator.Store;
  Store.prototype.generateFieldsHTML_ = function(fields) {
    var html = '';
    html += '<div class="store-data">';
    if(this.props_['title']){
      html += '<div class="title"><div class="img-list clearfix">' + 
      for (var i = 0; i <= this.props_[images].length; i++) {
        console.log(this.props_[images[i]]);
        // <img src=' + this.props_['images'] + '>
      }
  + '</div></div>'
    }
    html += '</div>';
    return html;
  }
  var data = new storeLocator.StaticDataFeed;
  data.setStores([
    new storeLocator.Store('store02', new google.maps.LatLng(27.67663,85.31093), null, {images: ["img/thapathalil.jpg","img/thapathalil.jpg","img/thapathalil.jpg"]})
  ]);

and it shows: Uncaught SyntaxError: Unexpected token for...

how can i solve this?? how can i fetch location inside of "images"

THANKS in advance

Answer 1

I think there is a typo. Change this:

console.log(this.props_[images[i]])

to

console.log(this.props_['images'][i])

And you should use

i < this.props_['images'].length

So try this:

for (var i = 0; i < this.props_['images'].length; i++) {
    console.log(this.props_['images'][i]);
}

Answer 2

Actually you got Uncaught SyntaxError: Unexpected token for... because you used the for..loop in the string concatenation statement, directly after the + sign.

Change this code :

html += '<div class="title"><div class="img-list clearfix">' + 
for (var i = 0; i <= this.props_[images].length; i++) {
  console.log(this.props_[images[i]]);
  // <img src=' + this.props_['images'] + '>
}
+ '</div></div>'

To the following:

html += '<div class="title"><div class="img-list clearfix">';
for (var i = 0; i <= this.props_['images'].length; i++) {
  console.log(this.props_['images'][i]);
  html += '<img src=' + this.props_['images'][i] + '>';
}
html += '</div></div>'

Note:

• You should separate the concatenation of strings to the html variable and the for loop logic, using html += instead of just using concatenation with + sign on multiple lines.
• Make sure to wrap the properties names between two '' while accessing your objects, like in this.props_[images] where it should be this.props_['images'] and in this.props_[images[i]] where it should be this.props_['images'][i] .
• And the first 2 lines of your html variable decalaration and the concatenation, var html = ''; html += '<div class="store-data">'; var html = ''; html += '<div class="store-data">'; can be shortened to just var html = '<div class="store-data">'; .