Блог

Главная - Вопросы по программированию - Jquery: как прочитать объект массива на основе входных данных

Jquery: как прочитать объект массива на основе входных данных

#jquery #arrays #forms #variables #object

#jquery #массивы #формы #переменные #объект

Вопрос:

Я разрабатываю приложение, которое собирает входные данные от пользователей через форму. На основе входных данных приложение будет искать в объектах массива соответствующее значение и отображать значение пользователям.

Я застрял в процессе выбора определенного значения в объектах массива. Ниже приведена упрощенная версия моего приложения. Объекты массива имеют 2 атрибута: пол (мужской / женский) и статус работы (полный рабочий день / неполный рабочий день).

Я назвал переменную с именем «пол», чтобы преобразовать ввод пользователя в индекс (0 или 1) и использовать этот индекс в .val() для идентификации объекта (мужчина / женщина).

 if($('#inputgender').val()=="Male"){var gender=0;}
if($('#inputgender').val()=="Female"){var gender=1;}

Используя тот же подход, я назвал другую переменную «workstatus», чтобы преобразовать ввод пользователя в имя массива (полный или неполный рабочий день), но .val() не смог прочитать эту переменную. Он считывает данные [gender].workstatus как неопределенные.

 if($('#inputworkstatus').val()=="Full-time"){var workstatus="fulltime";}
if($('#inputworkstatus').val()=="Part-time"){var workstatus="parttime";}
console.log(data[gender].workstatus);
$("#outputbox").text("Your number is "   data[gender].workstatus);

Есть ли лучший способ создать это приложение, предполагая, что мой набор данных немного больше, чем приведенный здесь пример, возможно, с 4 или 5 атрибутами (возраст, страна, статус брака)?

Спасибо.

Ниже приведен полный код.

 <head>
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
</head>

<body>

<form name="myForm" id="workForm" method="get" action="#">
Your gender:<br>
<SELECT NAME="gender" SIZE="1" id="inputgender">
<OPTION>Male
<OPTION>Female
</SELECT>
<br><br>

Your work status:<br>
<SELECT NAME="workstatus" SIZE="1" id="inputworkstatus">
<OPTION>Full-time
<OPTION>Part-time
</SELECT>
<br><br>
<input type="submit" value="Submit"/>
<INPUT TYPE="reset">
</form>

<span id="outputbox"></span>

</body>

<script type="text/javascript">

var data = [{"gender":"male","fulltime":10,"parttime":20},
{"gender":"female","fulltime":30,"parttime":40}];

$(document).ready(function(){

$("form").submit(function( event ) {
    if($('#inputgender').val()=="Male"){var gender=0;}
    if($('#inputgender').val()=="Female"){var gender=1;}
    if($('#inputworkstatus').val()=="Full-time"){var workstatus="fulltime";}
    if($('#inputworkstatus').val()=="Part-time"){var workstatus="parttime";}
    console.log(data[gender].workstatus);
    $("#outputbox").text("Your number is "   data[gender].workstatus);

event.preventDefault(); 
    });

});

</script>

Комментарии:

1. jQuery 1.4.2? Не устарел ли он?

2. вам не хватает закрывающих </option> тегов

3. @JaredFarrish правильно, забыл обновить ссылку.

Ответ №1:

Для доступа к свойству объекта с переменной вам необходимо использовать обозначение в виде скобок, поэтому оно должно быть:

 console.log(data[gender][workstatus]);