У меня есть форма с таблицей с входами, и мне нужно правильно преобразовать ее в массив json для каждой строки. Пример:

Id    Name     Gender
1     John     Male
2     Rose     Female

Desired output:
[
  { Id:1, Name: "John", Gender: "Male" },
  { Id:2, Name: "Rose", Gender: "Female" }
]

Пожалуйста, помогите мне. Я использую этот код

JSON.stringify($('#myform').serializeArray());

Но это дает мне такой результат:

[
  {\"name\":\"Id\",\"value\":\"1\"},
  {\"name\":\"Name\",\"value\":\"John\"},
  {\"name\":\"Gender\",\"value\":\"Male\"}
]

Посмотрите, как это работает: https://jsfiddle.net/srssnzj8/2/

1
super-user 5 Сен 2016 в 17:06

3 ответа

Лучший ответ

Чтобы сделать то, что вам нужно, вы можете использовать map() для создания массива значений элементов input и select в каждом tr. Попробуй это:

$(document).on('click', '#save', function(event) {
    event.preventDefault();
    var data = $('tr').map(function() {
    	var obj = {};
    	$(this).find('input, select').each(function() {
        	obj[this.name] = $(this).val();
        });
        return obj;
    }).get();
    
    console.log(JSON.stringify(data));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form method="post" action="#" id="myForm">
    <table>
        <tr>
            <td>
                <span>1</span>
                <input type="hidden" name="Id" value="1" />
            </td>
            <td>
                <input type="text" name="Name" value="John" />
            </td>
            <td>
                <select class="form-control" name="Gender">
                    <option value="Male" selected>Male</option>
                    <option value="Female">Female</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <span>2</span>
                <input type="hidden" name="Id" value="2" />
            </td>
            <td>
                <input type="text" name="Name" value="Rose" />
            </td>
            <td>
                <select class="form-control" name="Gender">
                    <option value="Male">Male</option>
                    <option value="Female" selected>Female</option>
                </select>
            </td>
        </tr>
    </table>
    <button type="submit" id="save">
        Submit
    </button>
</form>
1
Rory McCrossan 5 Сен 2016 в 14:31

В основном вам нужно

  • Используйте $("tbody tr").each(... для перебора всех строк
  • Используйте $(this).find("td");, чтобы получить все ячейки строк
  • Используйте $cells.each(... для перебора всех ячеек и $(this).find("input").val() для получения текстов.
  • Сохраните их в массиве и просто вызовите для него JSON.stringify

Также немного изменил html, добавив thead, tbody и th, см. Ваш обновленный jsFiddle

0
Theodore K. 5 Сен 2016 в 14:28

Вам необходимо выполнить итерацию по каждой строке таблицы и для каждого ввода в имени карты строк, чтобы значение

function getFormData(){
  var rowData = [];
  $("tr").each(function() {
    var unindexed_array= jQuery(this).find("input, select").serializeArray();
    var obj= {};
    jQuery(unindexed_array).each(function(){
       obj[this.name] = this.value;
    });
     rowData .push(obj);
});    
   return rowData ;
}
0
KlajdPaja 5 Сен 2016 в 15:42