JQuery SerializeArray() в новый массив JSON с отдельными элементами
Я использую jQuery serializeArray(), и он успешно собирает информацию о форме движка. Однако мне нужна информация в массиве, чтобы каждый «движок» был элементом нового массива. Двигатель 1, Двигатель 2 и т. д. Ниже приведен мой цикл foreach, который доставляет все двигатели в форму (2 в этом примере), а затем под ним — результат, который я получаю. Как мне получить этот вывод в новом массиве JSON, чтобы можно было перебирать каждый элемент? надеюсь, это имеет смысл.
<form id = "engine_data">
<? foreach ($listing['engines'] as $k => $e) { ?>
<div id = "engines_cont" >
<input type = "hidden" name = "engine_number" value = "<?=$e['engine_no']?>" />
<table class = "info_table engine_edit">
<colgroup>
<col span = "1">
<col span = "1" style = "width: 100%;">
</colgroup>
<tbody>
<tr>
<td class = "cell_label">MAKE</td>
<td class = "cell_info"><input id = "" name = "engine_make" type = "text" placeholder = "Engine Make" value = "<?=$e['engine_make']?>"></td>
</tr>
<tr>
<td class = "cell_label">ENGINE TIME</td>
<td class = "cell_info"><input id = "" name = "engine_time" type = "text" placeholder = "Engine Time" value = "<?=$e['engine_time']?>"></td>
</tr>
<tr>
<td class = "cell_label">ENGINE TBO</td>
<td class = "cell_info"><input id = "" name = "engine_tbo" type = "text" placeholder = "Engine TBO" value = "<?=$e['engine_tbo']?>"></td>
</tr>
<tr>
<td class = "cell_label">ENGINE NOTES</td>
<td class = "cell_info"><input id = "" name = "engine_notes" type = "text" placeholder = "Engine Notes" value = "<?=$e['engine_notes']?>"></td>
</tr>
</tbody>
</table>
</div>
<? } ?>
</form>
[
{
"name": "engine_number",
"value": "1"
},
{
"name": "engine_make",
"value": "P&W"
},
{
"name": "engine_time",
"value": "1200"
},
{
"name": "engine_tbo",
"value": "2000"
},
{
"name": "engine_notes",
"value": "Great engine in good condition"
},
{
"name": "engine_number",
"value": "2"
},
{
"name": "engine_make",
"value": "P&W"
},
{
"name": "engine_time",
"value": "1500"
},
{
"name": "engine_tbo",
"value": "2200"
},
{
"name": "engine_notes",
"value": "Great engine in good condition"
}
]
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
1
0
59
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Ответ принят как подходящий
Идентификаторы должны быть уникальными, поэтому удалите id = "engines_cont" из своего кода или хотя бы сделайте его уникальным. (кажется, в вашем коде это бесполезно, поэтому вы тоже можете удалить его)
Теперь вам нужно перебрать элемент ввода формы, чтобы создать желаемый массив.
Сделайте это, как показано ниже:
var arr = [];
// to get one div all input data in one-go for creating desired array
$('#engine_data div').each(function() {
var divObj = $(this);
let obj = {};
divObj.find('input').each(function() {
obj[$(this).attr('name')] = $(this).val();
});
arr.push(obj);
});
Он предоставит такой вывод:
[
{
"engine_number": "1",
"engine_make": "P&W",
"engine_time": "1200",
"engine_tbo": "2000",
"engine_notes": "Great engine in good condition",
},
{
"engine_number": "2",
"engine_make": "P&W",
"engine_time": "1500",
"engine_tbo": "2200",
"engine_notes": "Great engine in good condition",
}
]
Рабочий фрагмент:
var arr = [];
$('#engine_data div').each(function() {
var divObj = $(this);
let obj = {};
divObj.find('input').each(function() {
obj[$(this).attr('name')] = $(this).val();
});
arr.push(obj);
});
console.info(arr);<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
You need to use array naming convention in your HTML form like below:
<form id = "engine_data">
<div>
<input type = "hidden" name = "engine_number" value = "1" />
<table class = "info_table engine_edit">
<colgroup>
<col span = "1">
<col span = "1" style = "width: 100%;">
</colgroup>
<tbody>
<tr>
<td class = "cell_label">MAKE</td>
<td class = "cell_info"><input id = "" name = "eengine_make" type = "text" placeholder = "Engine Make" value = "P&W"></td>
</tr>
<tr>
<td class = "cell_label">ENGINE TIME</td>
<td class = "cell_info"><input id = "" name = "engine_time" type = "text" placeholder = "Engine Time" value = "1200"></td>
</tr>
<tr>
<td class = "cell_label">ENGINE TBO</td>
<td class = "cell_info"><input id = "" name = "engine_tbo" type = "text" placeholder = "Engine TBO" value = "2000"></td>
</tr>
<tr>
<td class = "cell_label">ENGINE NOTES</td>
<td class = "cell_info"><input id = "" name = "engine_notes" type = "text" placeholder = "Engine Notes" value = "Great engine in good condition"></td>
</tr>
</tbody>
</table>
</div>
<div>
<input type = "hidden" name = "engine_number" value = "2" />
<table class = "info_table engine_edit">
<colgroup>
<col span = "1">
<col span = "1" style = "width: 100%;">
</colgroup>
<tbody>
<tr>
<td class = "cell_label">MAKE</td>
<td class = "cell_info"><input id = "" name = "engine_make" type = "text" placeholder = "Engine Make" value = "P&W"></td>
</tr>
<tr>
<td class = "cell_label">ENGINE TIME</td>
<td class = "cell_info"><input id = "" name = "engine_time" type = "text" placeholder = "Engine Time" value = "1500"></td>
</tr>
<tr>
<td class = "cell_label">ENGINE TBO</td>
<td class = "cell_info"><input id = "" name = "engine_tbo" type = "text" placeholder = "Engine TBO" value = "2200"></td>
</tr>
<tr>
<td class = "cell_label">ENGINE NOTES</td>
<td class = "cell_info"><input id = "" name = "engine_notes" type = "text" placeholder = "Engine Notes" value = "Great engine in good condition"></td>
</tr>
</tbody>
</table>
</div>
</form>Идентификаторы должны быть уникальными, но они нам не нужны.
Если мы зациклим двигатели, это сработает.
Нет необходимости в jQuery.
const engines = Array.from(document.querySelectorAll('#engine_data div'))
.map(engine =>
Array.from(engine.querySelectorAll('input[name^=engine]'))
.reduce((acc, input) => (acc[input.name] = input.value, acc), {})
);
console.info(engines);<form id = "engine_data">
<div id = "engines_cont">
<input type = "hidden" name = "engine_number" value = "1" />
<table class = "info_table engine_edit">
<colgroup>
<col span = "1">
<col span = "1" style = "width: 100%;">
</colgroup>
<tbody>
<tr>
<td class = "cell_label">MAKE</td>
<td class = "cell_info"><input id = "" name = "engine_make" type = "text" placeholder = "Engine Make" value = "make1"></td>
</tr>
<tr>
<td class = "cell_label">ENGINE TIME</td>
<td class = "cell_info"><input id = "" name = "engine_time" type = "text" placeholder = "Engine Time" value = "time1"></td>
</tr>
<tr>
<td class = "cell_label">ENGINE TBO</td>
<td class = "cell_info"><input id = "" name = "engine_tbo" type = "text" placeholder = "Engine TBO" value = "tbo1"></td>
</tr>
<tr>
<td class = "cell_label">ENGINE NOTES</td>
<td class = "cell_info"><input id = "" name = "engine_notes" type = "text" placeholder = "Engine Notes" value = "notes1"></td>
</tr>
</tbody>
</table>
</div>
<div id = "engines_cont">
<input type = "hidden" name = "engine_number" value = "2" />
<table class = "info_table engine_edit">
<colgroup>
<col span = "1">
<col span = "1" style = "width: 100%;">
</colgroup>
<tbody>
<tr>
<td class = "cell_label">MAKE</td>
<td class = "cell_info"><input id = "" name = "engine_make" type = "text" placeholder = "Engine Make" value = "make2"></td>
</tr>
<tr>
<td class = "cell_label">ENGINE TIME</td>
<td class = "cell_info"><input id = "" name = "engine_time" type = "text" placeholder = "Engine Time" value = "time2"></td>
</tr>
<tr>
<td class = "cell_label">ENGINE TBO</td>
<td class = "cell_info"><input id = "" name = "engine_tbo" type = "text" placeholder = "Engine TBO" value = "tbo2"></td>
</tr>
<tr>
<td class = "cell_label">ENGINE NOTES</td>
<td class = "cell_info"><input id = "" name = "engine_notes" type = "text" placeholder = "Engine Notes" value = "notes2"></td>
</tr>
</tbody>
</table>
</div>
</form>Я не могу протестировать без хорошего примера вашего РЕНДЕРИРОВАННОГО HTML. Я бы подумал, что ваш HTML повторяется. Щелкните правой кнопкой мыши на странице и выберите «Проверить», чтобы проверить это.
—
27.05.2024 11:33
Другие вопросы по теме
Как получить различия между двумя вложенными объектами JSON в C#
Как получить имя включающего объекта при фильтрации значений свойств в этом вложенном объекте
Почему десериализатор Json не работает?
Как сериализовать свойства в отдельный Json, используя System.Text.Json в C#?
Джексон использует десериализацию на основе вывода, когда поля отсутствуют
Как получить данные ReadableStream из res.body в JS
Что такое jq '.key["value"]'?
Как сделать определенное двойное декартово произведение с помощью jq?
Странное поведение: декодирование токена JWT C# NET 8
Как заставить jq выводить длинный набор данных (часть 2)?
Похожие вопросы
Событие потери фокуса на клиентской стороне текстового поля asp.net в элементе управления ListView
Почему функция jquery.css() для установки URL-адреса фонового изображения элемента не работает?
Зачем менять первую букву свойства на строчную при обновлении проекта до .NET 8?
Как получить объект события из щелчка другого элемента события?
Модальный jquery и автозаполнение не работают с кнопкой обратной передачи
Отображение общей цены и размеров продукта в зависимости от количества и категории продукта в WooCommerce
Очень уникальная проблема клонирования — несколько действий клонирования на одной странице, но с разными идентификаторами
Индивидуальный макет карусели совы
Автоматическое обновление корзины WooCommerce при изменении количества товаров в корзине
Динамическое отображение определенного варианта оплаты на основе адреса электронной почты или телефона для выставления счета при оформлении заказа Woocommerce
ТИ! Я исправил проблему с идентификатором — это должно было быть вне цикла. Я скопировал ваш код, и он почти там, но кажется повторяется xaviators.com//pic.png