如何使用JavaScript

Question

大家好我在嵌套JSON数组中显示图像时遇到了麻烦，因为它在一个div容器中显示所有图像而不是每个div容器一个图像我现在不知道该怎么办？我很抱歉我的英语不好这里是我的代码

HTML

<div class='e-mapMarker'></div>
<div id='search-result'></div>

JSON

var places = [{
  "country_name": "Denmark",
  "latitude": 56,
  "longitude": 10,
  "status": "OK",
  "site_name": "Denmark",
  "company_logo": "nothinglogo.png",
  "serial_number": "12345",
  "products": [{
    "image": "someimage.png"
  }]
},
{
  "country_name": "Zaire",
  "latitude": -20,
  "longitude": 30,
  "status": "OK",
  "site_name": "Zaire",
  "company_logo": "nothinglogo.png",
  "serial_number": "67890",
  "products": [{
    "image": "someimage.png"
  }]
},
{
  "country_name": "Vietnam",
  "latitude": 16,
  "longitude": 106,
  "status": "NO",
  "site_name": "Vietnam",
  "company_logo": "nothinglogo.png",
  "serial_number": "1111",
  "products": [{
    "image": "someimage.png"
  }]
},
{
  "country_name": "Taiwan",
  "latitude": 23.5,
  "longitude": 121,
  "status": "OK",
  "site_name": "Taiwan",
  "company_logo": "nothinglogo.png",
  "serial_number": "22222",
  "products": [{
    "image": "someimage.png"
  }]
}

的JavaScript

function displayData(e) {
  var html = '';
  var html2 = '';
  var mapDiv = document.getElementById('mapContainer'), i = 0,
      dataIndex, tooltipDiv, key, item,
      mapMarkers = $(mapDiv).find('.e-mapMarker'), index = 0;
  var collection = [];
  collection = collection.concat(flsSites, flsInstallation, flsProduct);

  var sites = $('#fls_site').attr('data-flag');
  var installation = $('#fls_installation').attr('data-flag');
  var product = $('#fls_products').attr('data-flag');

  for (i = 0; i < mapMarkers.length; i++) {
    if (e.target.parentNode.parentNode == mapMarkers[i]) {
      index = i;
    }
  }

  html += '<div id="infocontainer" class="map_element">';
  html += "<div class='p-image'><img src='src/images/" + 
  collection[index].company_logo + "' /></div>";
  html += '<div class="popupdetail">';
  html += '<div class="p-name"> Site Name: ' + collection[index].site_name + '</div>'; 
  html += '<div class="p-name"> Site Status: ' + collection[index].status + '</div>';
  html += '<div class="p-name"> Country: ' + collection[index].country_name + '</div>';
  html += '</div>';
  html += '</div>';

  html2 += '<div class="rightcontainer">';
  html2 += collection[index].products.map(product => "<div class='p-name'><img src='src/images/" + product.image + "' /><br></div>");
  html2 += '<div id="imagedetail">';
  html2 += '<span class="details">' + collection[index].products[0].pump + '</span>';
  html2 += '</div>';
  html2 += '</div>';
  if (!document.getElementById('map_tooltip')) {
    tooltipdiv = $("<div></div>").attr('id', "map_tooltip");
    $(document.body).append(tooltipdiv);
    $(tooltipdiv).css({
      "display": "none", "padding": "5px",
      "position": "absolute",
      "z-index": "13000",
      "cursor": "default",
      "font-family": "Segoe UI",
      "color": "#707070",
      "font-size": "12px", "pointer-events": "none",
      "background-color": "#FFFFFF",
      "border": "1px solid #707070"
    });
  } else {
    tooltipdiv = $("#map_tooltip");
    $(tooltipdiv).css({
      "left": (e.pageX + 5),
      "top": (e.pageY + 5)
    });
    $(tooltipdiv).html(html).show("slow");
    $('#search-result').append(html2);
  }
}

使用此代码我的结果是它生成div但它包含两个图像（1和2）而不是div 1包含图像1然后div 2包含图像2