javascript - 使用 javascript 调用并显示嵌套数组中的图像

Question

大家好，我在调用和显示从 JSON 数组嵌套的图像时遇到问题，我尝试用 google 搜索它，但它总是向我显示使用 angularjs 的结果，所以这是我的代码

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 += '<div id="imagedetail">';
  html2 += "<div class='p-name'><img src='src/images/" + collection[index].products.image + "' /></div>";
  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);
  }
}

所以我想在 html2 中显示我的嵌套图像，我该怎么做免责声明:我的英语不太好，所以我的解释可能不太清楚谢谢您

更新

这是Chrome控制台的结果:

GET //path/to/src/images/undefined 404 (Not Found)

Answer 1

使用集合[index].products[0].image

html2 += '<div class="rightcontainer">';

html2 += '<div id="imagedetail">';
console.log(JSON.stringify(collection[index].products));
html2 += collection[index].products.map(product=>"<div class='p-name'><img src='src/images/" + product.image + "' /></div>").join("");
html2 += '</div>';
html2 += '</div>';