Here’s the revised version of your question with the HTML structure and server details included:
Title:
Error “updates.map is not a function” when modifying cells of tables retrieved from BigQuery via an API
Body:
I’m developing a web application that allows editing and saving data to a BigQuery database through a REST API. Data is fetched from multiple tables in BigQuery, and users can modify specific cells in a web interface. These modified data are then sent back to the server to update BigQuery.
Workflow:
-
Initial Query:
- Data is queried from BigQuery using a custom API. This query retrieves data from multiple tables and displays it in an HTML table on the frontend.
- Example of SQL query used:
SELECT * FROM `project-database.table` WHERE ...
-
HTML Structure:
The data is displayed in a table where users can edit specific cells:<table id="data-table"> <thead> <tr> <th>SITIO</th> <th>SMP</th> <th>proyecto_alcance</th> <!-- Other columns --> </tr> </thead> <tbody> <tr> <td contenteditable="true" data-column="SITIO">ANT.Santuario-2</td> <td contenteditable="true" data-column="SMP">SMP-WO-0131959</td> <td contenteditable="true" data-column="proyecto_alcance">LTE1900</td> <!-- Other columns --> <td><button class="edit-btn">Editar</button><button class="save-btn" style="display:none;">Guardar</button></td> </tr> </tbody> </table> -
Frontend Editing:
- Users can edit specific cells in the HTML table. When an edit is made, I capture the modified data and compare it with the original data to send only the changes to the server.
-
Sending Modified Data:
- The frontend code filters the data to send only the cells that have been modified. Here is the relevant code:
async function saveDataToBigQuery(data) { const updates = {}; for (const key in data) { if (data[key] !== originalData[key] && data[key]) { updates[key] = data[key]; } } if (Object.keys(updates).length === 0) { console.log('No changes found to send to the server.'); return; } try { const response = await fetch('https://example.com/api/edit', { method: 'PUT', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ SITIO: data.SITIO, SMP: data.SMP, updates }), }); if (!response.ok) { const errorText = await response.text(); throw new Error(errorText); } console.log('Data successfully saved.'); await loadTableData(); } catch (error) { console.error('Error saving data:', error.message); } }
- The frontend code filters the data to send only the cells that have been modified. Here is the relevant code:
-
Server-Side (Node.js with Express):
- The API receives the modified data and updates the corresponding rows in BigQuery:
const express = require('express'); const { BigQuery } = require('@google-cloud/bigquery'); const app = express(); app.use(express.json()); app.put('/api/edit', async (req, res) => { const { SITIO, SMP, updates } = req.body; // Example logic to handle updates in BigQuery try { const bigquery = new BigQuery(); const queries = updates.map(update => { return `UPDATE `project-database.table` SET ${update.column} = "${update.value}" WHERE SITIO = "${SITIO}" AND SMP = "${SMP}"`; }); await Promise.all(queries.map(query => bigquery.query(query))); res.status(200).send('Data updated successfully'); } catch (error) { console.error(error); res.status(500).send('Error updating data: ' + error.message); } }); app.listen(8080, () => console.log('Server running on port 8080'));
- The API receives the modified data and updates the corresponding rows in BigQuery:
Problem:
Despite trying to filter the data and send only the modified cells, I keep getting the error updates.map is not a function on the server. My goal is to ensure that only the modified cells are updated in BigQuery.
Question:
What could be causing this error, and how can I resolve it to ensure that the data is sent correctly and only the modified cells are updated in BigQuery?
Thanks for your help.
This version includes the full context of your HTML structure, the frontend logic, and the server-side code for updating BigQuery. You can post this on Stack Overflow for assistance.
What I Tried
I implemented a method to capture and filter only the modified cells from an HTML table before sending them to an API. The API is supposed to update the corresponding rows in BigQuery.
What I Expected
I expected the API to receive the filtered data and successfully update the records in BigQuery.
What Actually Happened
The server returned an error, updates.map is not a function, suggesting that updates was not an array, leading to the failure in the update process.
