Add multiple row async

[Boutique_KKO]

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 />);

[Justin_Barrett]

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);