Dec 21, 2021 10:01 AM
Hello,
Sorry for my bad english.
II have a beginner’s problem.
I am unable to add a multitude of rows to add to a table by merging two other tables.
I manage to create the function to do it, but airtable blocks beyond 15 lines.
I don’t understand how to do the asynchronous function.
I think we should add each field to an object and then transfer it with the asynchronous functions.
Can you tell me how to create this temporary object with a loop.
Thank you
Here my code
import {
initializeBlock,
useBase,
useRecords,
expandRecord,
TablePicker,
TextButton,} from '@airtable/blocks/ui';
import React, {useState} from 'react';
const BATCH_SIZE = 15;
function Cretionproduits() {
// YOUR CODE GOES HERE
const base = useBase();
const tableLogos = base.getTableByNameIfExists('Logo');
const recordsLogo = useRecords(tableLogos);
const tableSuppports = base.getTableByNameIfExists('Support');
const recordsSuppport = useRecords(tableSuppports);
const tableProduits = base.getTableByNameIfExists('Produits');
const recordsProduit = useRecords(tableProduits);
const champs = useRecords(tableProduits.selectRecords());
const temp = useRecords(tableProduits);
//return <div>jm 🚀</div>;
const produits = recordsLogo.map(logo => {
//return <div>{logo}</div>;
temp = recordsSuppport.map(support => ({
// tableProduits.createRecordAsync({'Ref': logo.name + support.name});
'Ref': logo.name + support.name, // problem here, the sentence above works
}));
});
adddata(tableProduits,temp);
}
async function adddata(table,records) {
let i = 0;
while (i < records.length) {
const recordBatch = records.slice(i, i + BATCH_SIZE);
// awaiting the delete means that next batch won't be deleted until the current
// batch has been fully deleted, keeping you under the rate limit
await table.createRecordsAsync(recordBatch);
i += BATCH_SIZE;
}
}
initializeBlock(() => <Cretionproduits />);
Dec 25, 2021 03:41 PM
Welcome to the community, @Boutique_KKO! :grinning_face_with_big_eyes: There are several problems that I see.
One is how you’re using the map()
array method here:
const produits = recordsLogo.map(logo => {
...
}
Map is designed to build a new array based on data returned from the passed/arrow function when processing items in the source array. However, you’re just using it as a means of looping through an array. You’re not doing anything with the produits
variable, and in fact that variable doesn’t contain anything but undefined values because the arrow function isn’t returning anything.
If you need to loop through an array and perform some operations, it’s best to use a for...of
loop, or possibly the forEach()
array method (depending on what’s being done). However, if you need to loop through a single array and build a single new array based on it, that’s when map()
can help you. (You can nest map()
methods, but you’ll end up with nested arrays, which isn’t what you need here.)
Another related problem is that you’re using the temp
variable twice. Once here:
const temp = useRecords(tableProduits);
…and then again inside the arrow function of the outer map()
method:
temp = recordsSuppport.map(support => ({
...
By the time you get to this line:
adddata(tableProduits,temp);
…it’s easy to think that temp
is the one from the inner map()
method, but it’s not because of variable scope. That inner temp
variable only exists inside an arrow function, and your addData
call is outside of that function. Because of that, you’re actually using the temp
variable from above, so what you’re passing to your addData
function isn’t a table and an array of objects containing new record data. It’s a table and the record array returned by useRecords(tableProduits)
.
A final problem is that you’re not using the await
keyword when calling your addData
function, which you defined as being an asynchronous function. Any call to an asynchronous function must use await
to perform properly.
Here’s how I recommend rewriting that section to fix those various issues (I removed the comments for clarity):
const produits = []
recordsLogo.forEach(logo => {
recordsSuppport.forEach(support => {
produits.push({'Ref': logo.name + support.name})
});
});
await adddata(tableProduits, produits);