multiple select retrieve records - react

[dayofthetech]

I'm building a Todo app in react and I added a multiple select named "category", the idea is when an user enters the item, have the option to select the category the task falls into.

I'm able to fetch the title, but from that I have read multiple select returns in an array form. if I pre select a category in airtable, it will be displayed on the app, so that gives an idea that at least the fetching is working.

Here is the code

  useEffect(() => {
    const newTodoList = [];

    base("Default").select({ view: "Grid view" }).eachPage(
      (records, fetchNextPage) => {
        records.forEach((record) => {
          newTodoList.push({
            id: record.id,
            title: record.get("title"),

            // Need to retrieve all values from field
            category: record.get("category"),
            });
        });
        fetchNextPage();

When I console.log(newTodoList) the object returns with category undefined, if the field in airtable is empty but if I pre select an option, then it will appear. 
These are the keywords I search for in the forum and nothing : "fetch values multiple select field", "multiple select field javascript", "multiple select"
 

[Stephen_Orr1]

Hi @dayofthetech,

Are you looking to retrieve all possible options of a multi-select field?

If so, you can access this from the field's options.choices array

base.getTable("table").getField(exampleMultiSelectField).options.choices

 More info here:
https://airtable.com/developers/scripting/api/cell_values#multiple-selects

Hope that helps!
-Stephen

[Stephen_Orr1]

Rereading your post, I may have misinterpreted what you're asking about here. If the value is empty in Airtable, it makes sense that you would get undefined when fetching it.

If you're asking how to coalesce "undefined" into something your React component understands, you could write your code like this:

category: record.get("category") ?? [] //coalesce "undefined" to an empty array

and then loop through the array to display its contents to the user

[dayofthetech]

Hi @Stephen_Orr1 , yes I'm trying to retrieve and display all possible options, in this case "urgent", "important", "temporary"

After reading article, even thought I'm already selecting the table by 

base("Default").select({ view: "Grid view" }).eachPage(

I include a second base to access the that field's options?

[Stephen_Orr1]

Hmm I see what you mean. You might try fetching table info using Airtable's REST API rather than the pre-built airtable.js methods. I'm not really familiar with airtable.js and whether it can retrieve table metadata like fields/ field options. Maybe it can but not sure.

[Stephen_Orr1]

I played around with this some more and found you can't get the base schema object from the Node airtable.js library (with any supplied methods nor even the built in makeRequest() method b/c of the way the API URL is constructed). 😞

However, you can use the web API and fetch() from Node!

const TOKEN = 'YOUR_PERSONAL_ACCESS_TOKEN'; //schema.bases:read scope required

const BASE_ID = 'appVGZswuCu3lKrIy';
const API_URL = `https://api.airtable.com/v0/meta/bases/${BASE_ID}/tables`;

//define function to fetch base schema object
async function fetchAirtable() {
  try {
    const response = await fetch(API_URL, {
      method: 'GET',
      headers: {
        'Content-type': 'application/json',
        Authorization: `Bearer ${TOKEN}`,
      },
    });
    return await response.json();
  } catch (err) {
    console.error(err);
  }
}

// get base schema object and filter to array of specified field choices
fetchAirtable().then((res) => {
  console.log(
    res.tables
      .filter((t) => t.id === 'tblN29g64lRQGeysx')[0] //table id from base URL
      .fields.filter((f) => f.id === 'fldmhELjq5ZToxST2')[0] //field ID from field URL (right click field to copy URL)
      .options.choices.map((choice) => choice.name)
  );
});

Be sure to swap out your own personal access token, base ID, table ID, and field ID. 

If this helps at all, please feel free to mark as the solution. Thanks!

-Stephen