My JS needs some help :frowning:
I’m trying to create a new record in one table for each of the records I pulled out of a view in another table. I’ve tried using
people.map(person => {})
,
people.forEach(person => {})
,
and
for (const person of people) {}
,
but I get the same error in all 3 cases:
Error: <root> must be an array
at Mutations._assertMutationIsValid (https://localhost:9000/__runFrame/bundle.js:4139:53)
at _callee$ (https://localhost:9000/__runFrame/bundle.js:3852:21)
at tryCatch (https://localhost:9000/__runFrame/bundle.js:75258:40)
at Generator.invoke [as _invoke] (https://localhost:9000/__runFrame/bundle.js:75484:22)
at Generator.prototype.<computed> [as next] (https://localhost:9000/__runFrame/bundle.js:75310:21)
at tryCatch (https://localhost:9000/__runFrame/bundle.js:75258:40)
at invoke (https://localhost:9000/__runFrame/bundle.js:75348:20)
at https://localhost:9000/__runFrame/bundle.js:75383:11
at new Promise (<anonymous>)
at callInvokeWithMethodAndArg (https://localhost:9000/__runFrame/bundle.js:75382:16)
Here’s the relevant part of my block code:
function PeopleHolidaysBlock() {
const base = useBase();
...
const peopleTable = base.getTableByIdIfExists(Globals.PEOPLE_TABLE_ID);
const christmasView = peopleTable ? peopleTable.getViewByIdIfExists(Globals.PEOPLE_CHRISTMAS_VIEW_ID) : null;
const queryResult = christmasView ? christmasView.selectRecords() : null;
const people = useRecords(queryResult);
const peopleHolidaysTable = base.getTableByIdIfExists(Globals.PEOPLE_HOLIDAY_TABLE_ID);
return (
<div>
...
<p>{people.length}</p>
{ notYetRunForCurrentYear && // only show button if not yet run for current year
<Button
onClick={() => { generateChristmasRecords() }}
variant="primary"
>
Generate {new Date().getFullYear()} Christmas Records
</Button>
}
</div>
);
function notYetRunForCurrentYear() {
// placeholder...
return true;
}
function generateChristmasRecords() {
// create a People-Holiday::Christmas record for each person in the People table
people.map(person => {
peopleHolidaysTable.createRecordAsync({
'Person' : `${person.id}`,
'Holiday' : 'Christmas'
});
});
alert(`${people.length} people`);
}
}
I’m not understanding what the error message is getting at. people.length
both in the return <p></p>
and in the alert is returning the expected value, so I’m pretty sure I’ve got a valid array.
I’m not concerned with guaranteeing persistence at this point, so I thought I could skip await
ing the Promise – am I doing something wrong with the async function here?
Thank you in advance for helping me improve my understanding of JavaScript!