Cascader doesnt display parent value

💬 App Building
, , , ,
1

Hello!
I am running into issues with the cascader component.
I have two tables (that are relevant), Faculty and Department. Every Faculty has 1 or more departments, so I figured a cascader would be the perfect way to display that.
Unfortunately I cannot seem to figure out how to format the data such as to properly display it in the cascader.

First I have my query selecting just the faculty ids and names as well as the department ids and names :

  SELECT f.name as faculty_name,
       f.faculty_id,
       d.department_id, 
       d.name AS department_name
FROM Faculty f
JOIN Department d ON d.faculty = f.faculty_id

which returns these 4 columns.
According to the docs (I hope I didn't misunderstand it) I have to have a format such as { value: string, label?: string, parentValue?: string }[]

here are my tries:

function transformFlatData(flatData) {
  if (!Array.isArray(flatData)) {
    console.error("Error: Expected an array but got", flatData);
    return [];
  }

  let transformedData = flatData.map(row => ({
    value: row.department_id,   // Convert to string
    label: row.department_name,         // Department name as label
    parentValue: row.faculty_name               // Faculty name as parent
  }));

  return transformedData;
}


const inputData = query3.dataArray || [];  
return transformFlatData(inputData);

and

function transformData(departmentIds, departmentNames, facultyNames) {
  // Ensure inputs are arrays and of the same length
  if (
    !Array.isArray(departmentIds) || 
    !Array.isArray(departmentNames) || 
    !Array.isArray(facultyNames) || 
    departmentIds.length !== departmentNames.length ||
    departmentNames.length !== facultyNames.length
  ) {
    console.error("Invalid input data", { departmentIds, departmentNames, facultyNames });
    return [];
  }

  // Map the values into the desired structure
  return departmentIds.map((id, index) => ({
    value: String(id),              
    label: departmentNames[index],   
    parentValue: facultyNames[index] 
  }));
}


const departmentIds = query3.data.department_id; 
const departmentNames = query3.data.department_name;  
const facultyNames = query3.data.faculty_name;  

return transformData(departmentIds, departmentNames, facultyNames);

but the cascader still only lets me select the departments and not the faculties.
grafik

Heres how I allocated the data in the cascader:

grafik
grafik310×663 20.5 KB

Thanks for any help in advance!

2

Hi! Want to check that in your options the parent options are also included (so in this case, each faculty should be an option with value faculty_name). For example:

const jobs = [
  {label: 'Engineering', value: 'eng'},
  {label: 'Software Developer', value: 'dev', department: 'eng'},
  {label: 'QA Tester', value: 'qa', department: 'eng'},
  {label: 'Product', value: 'prod', },
  {label: 'Product Manager', value: 'pm', department: 'prod'},
];
3

Ahhh I see tank you, it wasn't!