遍历jQuery中的skus列表以将其动态添加到HTML

Question

我是前端开发的初级人员。 我试图将一些代码重构为自己的辅助项目，以提高自己的技能。 我的工作有一个列表，这些列表的特征是将它们的skus动态添加到div。 我包含了以下我尝试重构的代码。

var getProductNavigateDetail = function(skuList) {
  var postUrl = "/Browse/ProductDynamicComponent/GetProductNavigateDetailJson";
  $.ajax({
    url: postUrl,
    type: "POST",
    data: { skus: skuList },
    dataType: "json",
    success: function(result) {
      if (result[0] != null) {

        $('#a1Price').html(result[0].FormattedPrice);
        $('#a1Name').html(result[0].Name);
        $('#a1Link').attr('href', result[0].NavigateUrl);
        $('#a1Link').attr('href', result[1].NavigateUrl);

        $('#b1Price').html(result[1].FormattedPrice);
        $('#b1Name').html(result[1].Name);

        $('#c1Price').html(result[2].FormattedPrice);
        $('#c1Name').html(result[2].Name);
        $('#c1Link').attr('href', result[2].NavigateUrl);

        $('#a2Price').html(result[14].FormattedPrice);
        $('#a2Name').html(result[14].Name);
        $('#a2Link').attr('href', result[14].NavigateUrl);
        $('#b2Price').html(result[15].FormattedPrice);
        $('#b2Name').html(result[15].Name);
        $('#b2Link').attr('href', result[15].NavigateUrl);
        $('#c2Price').html(result[16].FormattedPrice);
        $('#c2Name').html(result[16].Name);
        $('#c2Link').attr('href', result[16].NavigateUrl);
      }
    },
    error: function(jqXhr, textStatus, errorThrown) {
      console.log(textStatus, errorThrown);
    }
  });
}

getProductNavigateDetail('160555,665087,159816,482743,228984,519217,320165,216235,229010,687943,332256,513663,482508,216243,330495,340218,668637,232524,414899,444139,560632,329734');

似乎很明显，它只需要循环遍历，所以我编写了这段代码。

var getProductNavigateDetail = function(skuList) {
  var postUrl = "/Browse/ProductDynamicComponent/GetProductNavigateDetailJson",
      imageURL = "www.website.com/";
  $.ajax({
    url: postUrl,
    type: "POST",
    data: { skus: skuList },
    dataType: "json",
    success: function(result) {
      if (result[0] != null) {
        for (let i = 0; i < skuList.length; i++) {
          $('#a' + [i] + 'Price').html(result[i].FormattedPrice);
          $('#a' + [i] + 'Name').html(result[i].Name);
          $('#a' + [i] + 'Link').attr('href', result[i].NavigateUrl);
          $('#a' + [i] + 'Image').attr('src', imageURL + result[i].ImagePath);
        }
      }
    },
    error: function(jqXhr, textStatus, errorThrown) {
      console.log(textStatus, errorThrown);
    }
  });
}

getProductNavigateDetail('160555,665087,159816,482743,228984,519217');

试图找出一种实现第一个实现的方法，但是只需对jQuery使用简短的迭代即可。 我们将不胜感激任何技巧，建议或方案！

Answer 1

好的， result是来自AJAX请求的响应，我假设这是一系列产品。 如：

[ { FormattedPrice: 'somethin', Name: 'someName' } ]

作为数据发送的是SKU的逗号分隔列表（ '160555,665087,159816,482743,228984,519217' ）。 首先，您假设返回的结果与发送的逗号分隔列表的顺序完全相同，并且该列表将始终包含与您要求的数量相同的产品。 如果数据库中缺少任何产品，并且您的数组比您的期望少1，则在尝试访问该缺失的数组条目时，您将在循环中收到错误消息...

其次，您的循环将无法实现与原始代码完全相同的操作（div ID可以以a ， b或c开头，然后从results[2]跳转到results[14] ） 。 因此，我无法确定将如何仅通过要遍历的数组的索引来定位正确的div ID，除非它遵循严格的模式。

因此，总的来说，我不确定您需要实现什么，如果不查看完整的result对象和前端HTML，很难为您编写代码。