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

我有一个看起来像这样的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中，我已将data-docid中的td属性设置为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。

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

最佳答案

首先，您不需要将索引变量插入选择器。

这是一个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变量插入选择器字符串时，将使用包含单词“ index”的字符串文字来选择所需的元素。

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

这是因为您使用$.each函数错误。

您正在遍历（JSON）对象，而不是数组，没有索引，有键，并且在您的情况下，键是字符串（例如：“ 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。

json

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