Нахождение Id, равного id, передающему переменную - Jquery

Question

Это код, который он выполнил после успешного вызова ajax, в котором возвращаются данные JSON. Я пытаюсь перебрать данные и добавить значения в переменные. Эти переменные затем используются в операторе switch, который сравнивает fieldType, который будет представлять собой Input, Button или Select. Если совпадает, fieldValue добавляется или, если есть кнопка, переменная поля щелкается.

Данные возвращаются успешно и выглядят так:

{
    "scenarioDataId": 1,
    "scenarioId": 1,
    "fieldType": "Input",
    "fieldName": "HouseNumberOrName",
    "fieldValue": "28"
  },

В этом примере fieldType is равный Input, fieldName (который является идентификатором поля) равен HouseNumberOrName и fieldValue, равному значению 28. Я пытаюсь сравнить fieldType и в соответствии с этим типом сделать это, например, добавить значение к поле ввода в пользовательском интерфейсе с соответствующим идентификатором.

function scenarioData(response) {
  $.each(response, function(key, val) {
    var fieldType = val.fieldType;
    var fieldName = val.fieldName;
    var fieldValue = val.fieldValue;

    var field = $(fieldName); //// Here is my issue

    console.log(field);

    if (field != undefined) {
      switch (fieldType) {
        case "Input":
          $(field).val(fieldValue);
          console.log(fieldValue);
          break;
        case "Button":
          $(field).click();
          break;
        case "Select":
          $(field).val(fieldValue);
          break;
      }
    }
  })
}

Надеюсь, это имеет смысл, но я хочу использовать переменное поле (равное идентификатору поля), чтобы найти конкретное c поле в пользовательском интерфейсе. Например, в этом случае есть поле с именем House Number с идентификатором HouseNumberOrName. Я хочу назначить fieldName для поля, а затем использовать переменную поля, чтобы найти соответствующий идентификатор в html для моего пользовательского интерфейса, а затем оператор switch соответствует типу и в этом случае добавляет значение к этому полю.

Как мне go настроить переменную поля для поиска идентификатора с соответствующим именем поля?

Answer 1

Вы хотите добавить селектор # и проверить длину возвращаемого объекта

$field = $("#"+fieldName);

Примерно так

function scenarioData(response) {
  $.each(response, function(key, val) {
    const [fieldType, fieldName, fieldValue] = val;
    const $field = $("#" + fieldName);
    if ($field.length > 0) {
      if (fieldType === "Input" || fieldType === "Select") {
        $field.val(fieldValue);
      } else if (fieldType === "Button") {
        $field.click();
      }
    }
  })
}

Answer 2

Вам нужно использовать # при использовании селектора jquery id, а затем получить элемент dom. Кроме того, как только вы получите объект jquery, вам не нужно снова оборачивать его в $(), вы можете использовать его как для выполнения jquery вызовов / методов.

ПРИМЕЧАНИЕ: используйте $ при объявлении переменной для jquery объекта. Это просто стандартный способ, но не обязательный

См. Ниже код

function scenarioData(response) {
                        $.each(response, function(key, val) {
                            var fieldType = val.fieldType;
                            var fieldName = val.fieldName;
                            var fieldValue = val.fieldValue;

                            var $field = $('#'+fieldName); //prepend # for id

                            console.log($field);

                            if(field != undefined) {
                                switch (fieldType) {
                                    case "Input":
                                        $field.val(fieldValue);
                                        console.log(fieldValue);
                                        break;
                                    case "Button":
                                        $field.click();
                                        break;
                                    case "Select":
                                        $field.val(fieldValue);
                                        break;
                                }
                            }
                        })
                    }