如何实现点击HTML按钮时根据ItemCode获取对应数据的Description

我们通过for循环渲染JSON数据并将其添加到HTML中，代码如下：

$.ajax({
  dataType: "json",
  url: 'https://***************************',
  success: function (data) {
    var html = '<div class="row">';
    $.each(JSON.parse(data), function (index, value) {
      html += '<button onclick="storeVar(this);" value="' + value.ItemCode + '" type="button" data-bs-toggle="modal" data-bs-target="#staticBackdrop" class="btn btn-outline-fleet"><i class="fa-solid fa-up-right-from-square pe-1"></i>Check Stock</button></div>';
    });
    html += '</div>';
    $('#output').html(html);
  }
});

每个按钮都存储了对应的ItemCode值。

示例JSON数据 #

"[
    {\"ItemCode\":\"123abc\",\"Description\":\"example1\"},
    {\"ItemCode\":\"abc123\",\"Description\":\"example2\"}
]"

当前JS代码 #

function storeVar(el) {
  var ffref = el.getAttribute('value'); 
  // 需要获取点击按钮对应ItemCode的Description并存储为变量
} 

点击按钮时，ItemCode值会被存储到ffref变量中，但目前无法根据该值获取对应的Description。

尝试过的方案 #

function storeVar(el) {
  var ffref = el.getAttribute('value');

  $.ajax({
    dataType: "json",
    url: 'https://********************',
    success: function (data) {
      var json = [];
      var resObj = JSON.parse(data);
      for (var key in resObj) {
        if (resObj[key].ItemCode == ffref) {
          json.push(resObj[key]);
        }
      }
      alert(json);
    }
  });
}

解决方案 #

方案1：缓存数据避免重复请求（推荐） #

第一次请求数据时就把完整数据集缓存，点击按钮时直接从缓存查找，无需重复发起AJAX请求：

// 全局变量缓存商品数据
let itemData = [];

$.ajax({
  dataType: "json",
  url: 'https://***************************',
  success: function (data) {
    itemData = JSON.parse(data);
    var html = '<div class="row">';
    $.each(itemData, function (index, value) {
      html += '<button onclick="storeVar(this);" value="' + value.ItemCode + '" type="button" data-bs-toggle="modal" data-bs-target="#staticBackdrop" class="btn btn-outline-fleet"><i class="fa-solid fa-up-right-from-square pe-1"></i>Check Stock</button></div>';
    });
    html += '</div>';
    $('#output').html(html);
  }
});

function storeVar(el) {
  var ffref = el.getAttribute('value');
  // 从缓存中查找匹配ItemCode的商品
  var matchedItem = itemData.find(item => item.ItemCode === ffref);
  if (matchedItem) {
    var selectedDescription = matchedItem.Description;
    // 这里可对描述做后续操作，比如赋值给模态框元素
    console.log(selectedDescription);
    // $('#modal-description').text(selectedDescription);
  } else {
    console.log("未找到对应ItemCode的描述");
  }
}

方案2：实时请求数据（适合数据频繁更新场景） #

如果必须重新请求最新数据，可优化原尝试方案，直接提取描述：

function storeVar(el) {
  var ffref = el.getAttribute('value');

  $.ajax({
    dataType: "json",
    url: 'https://********************',
    success: function (data) {
      var resObj = JSON.parse(data);
      // 查找匹配项
      var matchedItem = resObj.find(item => item.ItemCode === ffref);
      if (matchedItem) {
        var selectedDescription = matchedItem.Description;
        alert(selectedDescription);
        // 或执行其他业务逻辑
      } else {
        alert("未找到对应商品的描述");
      }
    },
    error: function() {
      alert("请求数据失败");
    }
  });
}

说明 #

• 方案1性能更优，仅请求一次数据，适合数据更新频率低的场景；
• 方案2适合数据实时变化的场景，但会增加服务器请求量；
• 使用find()方法比for...in循环更简洁直观，可直接定位匹配项。

内容的提问来源于stack exchange，提问作者richag