I am working with an HTML table that displays some values and allows user input. The goal is to only select the rows where a checkbox is checked. Each row in the table has this format: https://i.sstatic.net/eKCCE.png
Below is the code for my table:
<template>
<table id="Ref" class="table table-bordered table-striped">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Type</th>
<th scope="col">New ID</th>
<th scope="col">New Type</th>
<th scope="col">New URL</th>
<th scope="col">New Expiration Date</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr v-for="row in rows">
<td> <a :href="row.url" target="_blank" rel="noreferrer noopener">{{ row.id }}</a></td>
<td> {{ row.type }} </td>
<td> <input v-model.trim="row.newID" type="text" placeholder="ID"> </td>
<td> <input v-model.trim="row.newType" type="text" placeholder="Type"> </td>
<td> <input v-model.trim="row.newURL" type="text" placeholder="URL"> </td>
<td> <input v-model.trim="row.newExpDate" type="text" placeholder="Expiration Date"> </td>
<td style="text-align: center; vertical-align: middle;"> <input v-model="row.isSelected" type="checkbox"> </td>
</tr>
</tbody>
</table>
</template>
The objective is to generate a list of dictionaries as follows:
[{
"id1": "newID1",
"type1": "newType1",
"url1": "newURL1",
"exp1" "expirationDate1"
},
{
"id2": "newID2",
"type2": "newType2",
"url2": "newURL2",
"exp2" "expirationDate2"
},
{
"id3": "newID3",
"type3": "newType3",
"url3": "newURL3",
"exp3" "expirationDate3"
}]
I attempted to use reduce, but it only gives me a dictionary, not a list.
putInvalidsRef() {
const selectedRef = this.rowsInvalidsRef.filter((ref) => ref.isSelected === true);
const refsDicts = selectedRef.reduce((acc, item) => {
acc[item.id] = item.newID || null;
acc[item.type] = item.newType || null;
acc[item.url] = item.newURL || null;
acc[item.exp] = item.newExpDate || null;
return acc;
}, {});
console.log(refsDict);
this.$http.admin.putInvalidsRef(refsDict)
.then(getInvalidsRef);
}
If the solution is simple, forgive my lack of experience with frontend development.