在javascript中打印对象数组并在html标签中打印

时间:2017-10-10 08:37:52

标签: javascript arrays string google-maps for-loop

我使用storelocater.js在谷歌地图中的多个位置,并根据图像的位置显示信息。我只能显示一个图像,但我想在信息面板中显示多个图像。链接此

Image how I want to show

这是我的代码

    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"]})
  ]);

它显示: 未捕获的SyntaxError:...的意外标记

我怎么能解决这个问题?我如何获取&#34;图像&#34;

内的位置

提前感谢

2 个答案:

答案 0 :(得分:0)

我认为有一个错字。改变这个:

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

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

你应该使用

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

所以试试这个:

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

答案 1 :(得分:0)

实际上你得到了Uncaught SyntaxError: Unexpected token for...,因为你在for..loop符号后面的字符串连接语句中使用了+

更改此代码:

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 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>'

注意:

  • 您应该将字符串的连接分隔为html 变量和for循环逻辑,使用html +=而不是仅在多行上使用+符号连接。
  • 确保在访问对象时将属性名称包装在两个''之间,例如this.props_[images]应该是this.props_['images']this.props_[images[i]]应该是this.props_['images'][i] {1}}。
  • 您的html变量decalaration和连接的前两行var html = ''; html += '<div class="store-data">';可以缩短为var html = '<div class="store-data">';