As a developer, I am trying to post data from a modal that has text entry fields and an editable table. I added custom columns to the table for the text field data, but these columns don't appear in the output when I try to post the data. I'm not sure what I'm doing wrong and need help figuring out a solution.
To post data from a modal with text fields and an editable table to a different table, a JsObject onClick of the button can be used. In the JsObject, you can access any of the data, including the data in the table in the modal and the form.
To access the data in the table, you can use the table.tableData property. You can loop through the tableData to extract the required data into objects and then use Axios or fetch API to post data to the target table.
Here's an example of how you can extract the required data from the tableData and create an object to post to the target table using the fetch API:
const rowsToPost = [];
table.tableData.forEach((row) => {
if (row.qtyToShip) {
const rowToPost = {
order: row.order,
sku: row.sku,
qtyShipped: row.qtyToShip,
carrier: carrier.inputText,
tracking: tracking.inputText,
date: date.inputText,
};
rowsToPost.push(rowToPost);
}
});
fetch("target-table-url", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ rows: rowsToPost }),
})
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error(error));
This code loops through the tableData and checks if the qtyToShip column is filled in for each row. If it is, it creates an object with the required data including the data from the text fields in the modal, and pushes it into an array. The array of objects is then posted to the target table using the fetch API.