Question

我正在从我的javascript对象中创建一个html标记。

我只想添加3个img元素，其属性为amzImg和partTitle。

我尝试了以下内容：

＆＃13;

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)

＆＃13;

但是，如果我的列表中只有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)

Answer 2

你必须切片（0,3）你的硬件数组，只从子数组中获取3个元素，然后迭代它以形成所需的html字符串。

＆＃13;

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, item.hardware.slice(0,3).map(img => '<img src="'+img.amzImg+'" alt="'+img.partTitle+'"/>')])

console.log(dataSet)

＆＃13;

Answer 3

实际上，你不必手动构建数组，我只是创建一个处理图像的新函数。

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'
        }
      ]
    }
  ]
};

const getImages = hardware =>
  hardware
    .slice(0, 3)
    .map(
      h => `<img src="${h.amzImg}" alt="${h.partTitle}" height="42" width="42">`
    )
    .join('\n');

const dataSet = results.generalInfo.map((item, i) => [
  i + 1,
  `${getImages(item.hardware)}
    <a href="${item.permalink}">
      ${item.title}
    </a>`,
  `$${item.totalPrice.toFixed(2)}`
]);

console.log(dataSet);

仅加载3个子数组元素

3 个答案: