javascript - 如何在 JavaScript 中将属性值与 JSON 值匹配？

Question

我有一个 JSON 字符串，如下所示:

{
  "DocID": "NA2", 
  "DocType": "Phase1.1 - Visa Documents (This section is applicable for HK work location only)", 
  "DocSubType": "New Application", 
  "DocName": "Passport / Travel Document (Soft copy only) *", 
  "DocDescription": ""
}

在我的 HTML 中，我将 td 中的 data-docid 属性设置为 DocID 键值(在另一个 API 调用中)

现在，我想比较 value.DocID 是否等于 (==) docid 并插入 DocSubType 在那个特定的 td 中。

这是我的代码:

$.ajax({
  type: "GET",
  url: docuViewURL,
  success: function(data) {
    $.each(data, function(index, value) {
      console.log(index);
      var a = $("#candidateDetails tbody td a:eq(index)").attr("data-docid");
      var b = value.DocID;
      if (a == b) {
        // then
      }
    });
  }
});

它不起作用，甚至 index 变量也不给我 var a 的输出，而是我得到 undefined。

我做错了什么，我可以改变什么。

Answer 1

首先，您没有将索引变量插入到选择器中。

这是一个 concatenated string :

"#candidateDetails tbody td a:eq(" + index + ")"

这是一个 template literal :

`#candidateDetails tbody td a:eq(${index})`

这是一个 string literal :

"#candidateDetails tbody td a:eq(index)"

当您应该使用连接字符串或模板文字插入索引时，您正在使用包含单词“index”的字符串文字来选择所需的元素> 变量到您的选择器字符串中。

另一个问题是您将字符串而不是数字传递给 :eq()选择器。

这是因为您正在使用 $.each功能错误。

你正在遍历一个 (JSON) 对象，而不是一个数组，没有索引，有键，在你的例子中，键是字符串 (E.G: "DocID “、“DocType”、“DocSubType” 等等)。

因此，即使您正确地将 index 变量插入到您的选择器中，这些也是您最终会得到的选择器:

"#candidateDetails tbody td a:eq(DocID)"
"#candidateDetails tbody td a:eq(DocType)"
"#candidateDetails tbody td a:eq(DocSubType)"
"#candidateDetails tbody td a:eq(DocName)"
"#candidateDetails tbody td a:eq(DocDescription)"

您通过使用属性选择器而不是 :eq() 选择器来解决这个问题(并为您自己省去很多麻烦)，如下所示:

"#candidateDetails tbody td a[data-docid]"

这使您不必手动指定元素的索引，从而让您更自由地定位 HTML 中的元素。

另一件事是您的代码没有明确声明这是一个 JSON GET 请求。

当然，jQuery 可能足够聪明，可以判断这是哪种请求，但正如俗话所说，explicit is better than implicit这不仅适用于 Python 程序。

我建议您使用 jQuery.getJSON函数，它明确表示要创建 JSON GET 请求。

将您的 Ajax 请求替换为:

jQuery.getJSON(docuViewURL, function(data) {
  $.each(data, function(key, value) {
    // NOTE: cache elements not values
    var link = $("#candidateDetails tbody td a[data-docid]");
    // NOTE: if you're only going to use a value once, there's no need to cache it
    // NOTE: use `data("x")` instead of `attr("data-x")` for more concise code
    if (link.length > 0 && link.data("docid") == value.DocID) {
      // do stuff with the link
    }
  });
});

您还可以去掉 data() 函数并使用属性选择器:

jQuery.getJSON(docuViewURL, function(data) {
  $.each(data, function(key, value) {
    // get the link and check to see if it exists
    var link = $("#candidateDetails tbody td a[data-docid='" + value.DocID + "']");
    if (link.length > 0) {
      // do stuff with the link
    }
  });
});

注意:如果您需要更多信息，jQuery API documentation有一个搜索栏，您可以使用它来查找您正在努力使用的功能的文档。

注意:我并不是要无礼或侮辱您，但我认为如果您阅读 MDN JavaScript guide 将会有很长的路要走。这将帮助您了解 JavaScript 的基础知识和基础知识。

注意:还有HTML和 CSS指南。

祝你好运，记得保留你的代码DRY, SOLID and Simple .