Я создал одну HTML таблицу, которая генерируется динамически. из этой таблицы HTML я хочу создать JSON следующим образом. Я использовал атрибуты данных для получения табличных данных и игнорировал теги <head> <tfoot>. Все мои данные находятся в теге <tbody>, поэтому есть подсказка для сгенерированного JSON, как это?
{
"id":"",
"name":"Source",
"properties":[{
"type":"",
"name1":"",
"location":"",
"schema":"",
"row":0
},{
"type":"",
"name1":"",
"location":"",
"schema":"",
"row":1
}]
}
Я создал один JSON, но он не создан, как указано выше JSON. любой намек? как создать JSON, как указано выше json.
var newFormData = [];
$('#createJSON').click(function() {
$('#main-div .component-base').each(function() {
console.log(this);
// console.log($(this));
if ($(this).data('component-type') == 'source') {
console.log('Process source');
$(this)
.find('tbody tr')
.each(function(i) {
var tb = jQuery(this);
var obj = {};
tb.find('input:not(input[type="checkbox"])').each(function() {
obj[this.name] = this.value;
});
obj['row'] = i;
newFormData.push(obj);
});
console.log(newFormData);
document.getElementById('output').innerHTML = JSON.stringify(newFormData);
event.preventDefault();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button style="margin: 1%;" id="createJSON">Create JSON</button>
<p id="output">hfghfgh</p>
<div class="main-div" id="main-div">
<table id="source-table" data-component-type="source" class="component-base">
<thead>
<tr>
<th colspan="5">Source</th>
</tr>
<tr>
<th>ID</th>
<th>Type</th>
<th>Name</th>
<th>Location</th>
<th>Schema</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input id="id-id" type="text" name="id" placeholder="id" />
</td>
<td style="display: none;">
<input id="name" type="text" name="name" placeholder="name" value="source" />
</td>
<td>
<input id="type" type="text" name="type" placeholder="Type" />
</td>
<td>
<input id="Name" type="text" name="name1" placeholder="Name" />
</td>
<td>
<input id="location" type="text" name="location" placeholder="Location" />
</td>
<td>
<input id="schema" type="text" name="schema" placeholder="Schema" />
</td>
</tr>
<tr>
<td>
<input id="id-id" type="text" name="id" placeholder="id" />
</td>
<td style="display: none;">
<input id="name" type="text" name="name" placeholder="name" value="source" />
</td>
<td>
<input id="type" type="text" name="type" placeholder="Type" />
</td>
<td>
<input id="Name" type="text" name="name1" placeholder="Name" />
</td>
<td>
<input id="location" type="text" name="location" placeholder="Location" />
</td>
<td>
<input id="schema" type="text" name="schema" placeholder="Schema" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<button class="delete-component" style="margin: 1%;">
Delete Table
</button>
</td>
</tr>
</tfoot>
</table>
</div>