javascript - 仅加载子数组的 3 个元素

Question

我正在用我的 javascript 对象创建一个 html 标签。

我只想添加 3 个具有属性 amzImg 和 partTitle 的 img 元素。

我尝试了以下方法:

const results = {
  "generalInfo": [{
    "post_id": 87,
    "title": "Test Title",
    "permalink": "http://localhost/test-title-4/",
    "category": [],
    "totalPrice": 331.99,
    "hardware": [{
        "partCategory": "x",
        "partTitle": "Test Title",
        "amzImg": "https://images-na.ssl-images.com/images/I/51wsdfgDLUEJwCL.jpg"
      },
      {
        "partCategory": "x",
        "partTitle": "Test Title",
        "amzImg": "https://images-na.ssl-images.com/images/I/51wsdfgDLUEJwCL.jpg"
      },
      {
        "partCategory": "x",
        "partTitle": "Test Title",
        "amzImg": "https://images-na.ssl-images.com/images/I/51wsdfgDLUEJwCL.jpg"
      },
      {
        "partCategory": "x",
        "partTitle": "Test Title",
        "amzImg": "https://images-na.ssl-images.com/images/I/51wsdfgDLUEJwCL.jpg"
      }
    ]
  }, {
    "post_id": 87,
    "title": "Test Title",
    "permalink": "http://localhost/test-title-4/",
    "category": [],
    "totalPrice": 331.99,
    "hardware": [{
        "partCategory": "x",
        "partTitle": "Test Title",
        "amzImg": "https://images-na.ssl-images.com/images/I/51wsdfgDLUEJwCL.jpg"
      },
      {
        "partCategory": "x",
        "partTitle": "Test Title",
        "amzImg": "https://images-na.ssl-images.com/images/I/51wsdfgDLUEJwCL.jpg"
      }
    ]
  }]
}

let dataSet = results.generalInfo.map((item, i) => [
  i + 1,
  `
    <img src="${item.hardware.amzImg}" alt="${item.hardware.partTitle}" height="42" width="42">
    <img src="${item.hardware.amzImg}" alt="${item.hardware.partTitle}" height="42" width="42">
    <img src="${item.hardware.amzImg}" alt="${item.hardware.partTitle}" height="42" width="42">
    <a href="${item.permalink}">
                    ${item.title}
                 </a>`,
  `$${item.totalPrice.toFixed(2)}`
])

console.log(dataSet)

但是，如果我的列表中只有 2 个元素，上面的示例会给出 3 个元素。对于第一个硬件对象，如下所示:

[ 1,'\n 
<img src="undefined" alt="undefined" height="42" width="42">\n    
<img src="undefined" alt="undefined" height="42" width="42">\n    
<img src="undefined" alt="undefined" height="42" width="42">\n
<a href="http://localhost/test-title-4/">\nTest Title\n</a>',
'$331.99'
],

对我做错了什么有什么建议吗？

我希望得到以下输出:

Answer 1

您需要在每次迭代中通过遍历 item.hardwares 手动构建数组。

const results = {
  "generalInfo": [{
    "post_id": 87,
    "title": "Test Title",
    "permalink": "http://localhost/test-title-4/",
    "category": [],
    "totalPrice": 331.99,
    "hardware": [{
        "partCategory": "x",
        "partTitle": "Test Title",
        "amzImg": "https://images-na.ssl-images.com/images/I/51wsdfgDLUEJwCL.jpg"
      },
      {
        "partCategory": "x",
        "partTitle": "Test Title",
        "amzImg": "https://images-na.ssl-images.com/images/I/51wsdfgDLUEJwCL.jpg"
      },
      {
        "partCategory": "x",
        "partTitle": "Test Title",
        "amzImg": "https://images-na.ssl-images.com/images/I/51wsdfgDLUEJwCL.jpg"
      },
      {
        "partCategory": "x",
        "partTitle": "Test Title",
        "amzImg": "https://images-na.ssl-images.com/images/I/51wsdfgDLUEJwCL.jpg"
      }
    ]
  }, {
    "post_id": 87,
    "title": "Test Title",
    "permalink": "http://localhost/test-title-4/",
    "category": [],
    "totalPrice": 331.99,
    "hardware": [{
        "partCategory": "x",
        "partTitle": "Test Title",
        "amzImg": "https://images-na.ssl-images.com/images/I/51wsdfgDLUEJwCL.jpg"
      },
      {
        "partCategory": "x",
        "partTitle": "Test Title",
        "amzImg": "https://images-na.ssl-images.com/images/I/51wsdfgDLUEJwCL.jpg"
      }
    ]
  }]
}

let dataSet = results.generalInfo.map((item, i) => {
  // build the array manually
  var data = [i + 1];
  var html = "";
  /*item.hardware.forEach((hardware) => {
      html += `<img src="${hardware.amzImg}" alt="${hardware.partTitle}">`;
  });*/
  
  for (var i = 0, len = item.hardware.length; i < len && i < 3; i++) {
     var hardware = item.hardware[i];
     html += `<img src="${hardware.amzImg}" alt="${hardware.partTitle}">`;
  }
  
  html += `<a href="${item.permalink}">${item.title}</a>`;
  data.push(html);
  data.push(`$${item.totalPrice.toFixed(2)}`);
  return data;
})

console.log(dataSet)