Как мне сопоставить значение атрибута со значением JSON в JavaScript?

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 я установил атрибут 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.

Что я делаю не так и что я могу изменить.

Answer 1

Для начала вы не вставляете индексную переменную в ваш селектор.

Это каскадная строка :

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

Это шаблонный литерал :

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

Это строковый литерал :

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

Вы используете строковый литерал, содержащий слово "index" , чтобы выбрать нужный элемент, когда вам нужно использовать объединенную строку или литерал шаблона для вставки переменной index в строку выбора. .

Другая проблема заключается в том, что вы передаете строку вместо числа в селектор :eq().

Это потому, что вы используете $.each неправильно.

Вы перебираете объект (JSON), а не массив, нет индекса, есть ключи, и в вашем случае ключи являются строками ( EG : "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 может быть достаточно умным, чтобы сказать, что это за запрос, но, как гласит старая поговорка, явный лучше, чем неявный , и это относится не только к 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 есть строка поиска, которую вы можете использовать для поиска документации по функциям, с которыми вы боретесь.

ПРИМЕЧАНИЕ: Я не пытаюсь быть грубым или оскорбляющим вас, но я думаю, что это будет иметь большое значение, если вы прочитаете руководство по MDN JavaScript , которое поможет вам понять основы и основы JavaScript.

ПРИМЕЧАНИЕ: есть также HTML и CSS направляющие.

Удачи и не забудьте сохранить свой код СУХОЙ, ТВЕРДЫЙ И ПРОСТОЙ .