Map AirTable Columns

Hey y’all,

I’m trying to map airtable columns into a smart list. But it seems the only column I can pull is the ID. I suspect this is because I haven’t mapped the airtable columns correctly in my javascript.

Can anyone assist?

Here is my SmartTable display including the mappings and the Data {} section:

What am I doing wrong here? Thanks!

I think all my columns are correct…

Here is my example response from AirTable’s API…

{
    "records": [
        {
            "id": "recMex4DSqYPHTySk",
            "fields": {
                "Asset": [
                    "recyDb3mH4c9ewfz0"
                ],
                "LastName": "Howard",
                "FirstName": "Tim",
                "Current Values (list)": [
                    4003.945205479452
                ],
                "Portfolio Value": 4003.945205479452,
                "Total Shares": 4000,
                "Current Shares (list)": [
                    4000
                ]
            },
            "createdTime": "2021-01-07T03:15:23.000Z"
        },
        {

hi @TimTim!
thank you for reaching us!
I believe there could be a few issues, so I will try to resolve them step by step.
As far as I see from the attached image, you successfully saved the data to App State Manager, also the settings of the variable “Users” should be ok (type - array).
So, once the SmartTable receives the id field, we have only one idea to check. Your LastName and FirstName is a nested array, so you can achieve these fields via Save data to App State - {{data.records.asset}} but in this case, you will lose “id” field.
In order to use all of the fields: “id”, “LastName”, “FirstName” I believe you will need to use the function “map” of javascript.

Hey Artem - thanks for your response here. I had a friend who writes Javascript help me out. Because the table in AirTables has nested or 2nd level data, you need to define variables before you can use them. For anyone else trying to understand - the array that I’ve imported above has “id” and “fields” on the same level. But it doesn’t know that there is an array of items within “fields”. To pull this data out you need to write a code step. Which isn’t a difficult code step, but it’s code. So admins - this is where people who came to UIBakery because it’s No-Code are going to get lost.

To pull out the array within “fields” the code is written below:

const records = {{data.records}}

return {
records: records.map((record) => ({
id: record.id,
firstName: record.fields.firstName,
lastName: record.fields.lastName,
email: record.fields.email,
totalShares: record.fields.totalShares,
portfolioValue: record.fields.portfolioValue,
}))
}

Note that we changed to do everything in camelCase so that it would all flow. Effectively we are defining a variable e.g. “portfolioValue” as the dynamic value of the records.fields.portfolioValue array.

The variable on the RIGHT must correspond exactly (meaning it’s case-sensitive) with the name of your columns in airtable. So if you’re getting an error it is likely that you have a typo or that you’ve used uppercase characters.

Below is a screenshot showing the names of my columns in Airtable.

Hope this helps somebody out there!

And here is the code step on it’s own.

const records = {{data.records}}

return {
records: records.map((record) => ({
id: record.id,
firstName: record.fields.firstName,
lastName: record.fields.lastName,
email: record.fields.email,
totalShares: record.fields.totalShares,
portfolioValue: record.fields.portfolioValue,
}))
}

1 Like

Wow @TimTim!
Perfect!
Thank you for sharing the idea!