How to set dynamic values in Cascader NEW

💬 App Building
1

I want to be able to set parent and children values dynamically, example of the structure:

  • United States (Parent 1)

      • New York (Child of Parent 1)
      • California (Child of Parent 1)
      • Virginia (Child of Parent 1)

  • England (Parent)

      • Manchester (Child of Parent 2)
      • London (Child of Parent 2)

And so on...

In my case the values are coming from a query.

2

@CoderNadir Welcome to the forum! Yes, this can be done but without knowing the structure of your data from the query, it is difficult to explain how to go about doing this. If you can share more information, that would be great. You can also search the forum community for similar questions, such as: Set Values of Cascader components - #8

1 Like
3

Hi @ScottR

I'll appreciate it if you show me how can I use an external library to display the below format of the states and each state with its cities, specifically for united states plz

Field names doesn't matter what matters is the library that provide states and its cities and how to implement this with Cascader New (or even maybe another component)

[
  {
    name: "California",
    abbreviation: "CA",
    capital: "Sacramento",
    children: [
      { name: "Los Angeles" },
      { name: "San Diego" },
      { name: "San Jose" },
      { name: "San Francisco" }
    ]
  },
  {
    name: "Texas",
    abbreviation: "TX",
    capital: "Austin",
    children: [
      { name: "Houston" },
      { name: "Dallas" },
      { name: "Austin" },
      { name: "San Antonio" }
    ]
  },
  {
    name: "New York",
    abbreviation: "NY",
    capital: "Albany",
    children: [
      { name: "New York City" },
      { name: "Buffalo" },
      { name: "Rochester" },
      { name: "Syracuse" }
    ]
  }
]
4

Are you calling an external API to get this information?
Or are you adding the library to your app?

Also, are you using a cascader to allow the user to drill down into each state to select either a capital or another city? I ask because the formatting will matter depending on your use case.

1 Like
5

This is what I want:

Add 2 components of select, and then load states in the first one and the second one I'll load the cities in case the States component has a selected state, and these components values will be used to filter a table.
For the City component when I type I want to search for cities

Target Country: United States

So to make it simple just show me how to use an external library that provides this kind of data (states/cities) and I'll do the rest on my own

Thank you in advance

6

Hi @CoderNadir,

Thanks for posting this use case! I'm not familiar with a specific API to pull this data, but I imagine one exists.

If you're working with data in the exact structure you mentioned above, you can use Javascript to format it for the Cascader.

There could be many ways to solve this, but here's an example where query1 is:

let arr=[];
[put-array-from-above-message-here].map((x) => {
  arr.push({value: x.name});
   x.children.map((y) => {
    arr.push({ value: y.name, state: x.name });
  });
});
return arr

CleanShot 2025-04-09 at 14.02.15@2x
CleanShot 2025-04-09 at 14.02.15@2x2364×1708 413 KB

If you're only using select components, you can access the array from your previous message directly without any extra Javascript transformation in the query. Instead, each select component data source will have some Javascript to filter out the appropriate data like this example:

CleanShot 2025-04-09 at 14.09.04@2x
CleanShot 2025-04-09 at 14.09.04@2x2358×798 132 KB

If you track down an API that you want to use, let us know and we can take a look at the specific data structure

1 Like