In java you can use JSP or Servlet to write the code. But it's frontend stuff there you will need html and js only. For api you can me it in JSP or Servlet.
You have to use two useEffect method one with dependency and another without dependency. 1. Call this api in useeffect which does not have dependency. 2. Make a state to save the country id or name while selecting it. 3. Make another useEffect with dependency as the country id or name which you made in last step. So that the api that you will call will trigger as the country name changes in the state. And do the filtering inside the this useEffect and save the state data in a other state.
Here we are filtering country name that we are getting from select box from e.target.value with whole data. So that we will get data related to that country only which will have state City etc...
import axios from "axios"; import {useEffect,useState} from "react"; function App() { const [data,setData]=useState([]); const [state,setState]=useState([]); const [city,setCity]=useState([]); useEffect(()=>{ axios.get("pkgstore.datahub.io/core/world-cities/world-cities_json/data/5b3dd46ad10990bca47b04b4739a02ba/world-cities_json.json"). then(res=> setData(res.data)) .catch(err=>console.log(err)) },[]) //removing duplicate country names let country = [...new Set(data.map(item=> item.country))]; country.sort(); const handleCountryChange=(e)=>{ setState("Select State"); setCity("Select City"); //As you select country from select box, in below line we filter that country from all data so that we can get subcountry(state), name(city) out of it. let Singlecountry = data.filter(item=> item.country === e.target.value); //now this singleCountry which is getting the name of subcountry(state) multiple times. So to remove duplicates set is used. let states = [...new Set(Singlecountry.map(item=> item.subcountry))]; //after removing the duplicate subcountry names(state names). we have saved the data in state state using setState. setState(states); } const handleStateChange=(e)=>{ //here when user selects particular subcountry(state name), we have checked again with original data to get all subcounty that match that name. to get the data of perticular city. let singleCity = data.filter(item=> item.subcountry === e.target.value); setCity(singleCity); } return ( {/*Country Selection */} Country: handleCountryChange(e)}> Select Country {country?.map((item,index)=> ( {item} ))} {/*State Selection */} State: handleStateChange(e)}> Select State {state !=='Select State' && state?.map((item,index)=> {item} )} {/*City Selection */} City: Select City {city !=='Select City' && city?.map((item,index)=> {item?.name} )}
import axios from "axios"; import {useEffect,useState} from "react"; function App() { const [data,setData]=useState([]); const [state,setState]=useState([]); const [city,setCity]=useState([]); useEffect(()=>{ axios.get("pkgstore.datahub.io/core/world-cities/world-cities_json/data/5b3dd46ad10990bca47b04b4739a02ba/world-cities_json.json"). then(res=> setData(res.data)) .catch(err=>console.log(err)) },[]) //removing duplicate country names let country = [...new Set(data.map(item=> item.country))]; country.sort(); const handleCountryChange=(e)=>{ setState("Select State"); setCity("Select City"); //As you select country from select box, in below line we filter that country from all data so that we can get subcountry(state), name(city) out of it. let Singlecountry = data.filter(item=> item.country === e.target.value); //now this singleCountry which is getting the name of subcountry(state) multiple times. So to remove duplicates set is used. let states = [...new Set(Singlecountry.map(item=> item.subcountry))]; //after removing the duplicate subcountry names(state names). we have saved the data in state state using setState. setState(states); } const handleStateChange=(e)=>{ //here when user selects particular subcountry(state name), we have checked again with original data to get all subcounty that match that name. to get the data of perticular city. let singleCity = data.filter(item=> item.subcountry === e.target.value); setCity(singleCity); } return ( {/*Country Selection */} Country: handleCountryChange(e)}> Select Country {country?.map((item,index)=> ( {item} ))} {/*State Selection */} State: handleStateChange(e)}> Select State {state !=='Select State' && state?.map((item,index)=> {item} )} {/*City Selection */} City: Select City {city !=='Select City' && city?.map((item,index)=> {item?.name} )}
import axios from "axios"; import {useEffect,useState} from "react"; function App() { const [data,setData]=useState([]); const [state,setState]=useState([]); const [city,setCity]=useState([]); useEffect(()=>{ axios.get("pkgstore.datahub.io/core/world-cities/world-cities_json/data/5b3dd46ad10990bca47b04b4739a02ba/world-cities_json.json"). then(res=> setData(res.data)) .catch(err=>console.log(err)) },[]) //removing duplicate country names let country = [...new Set(data.map(item=> item.country))]; country.sort(); const handleCountryChange=(e)=>{ setState("Select State"); setCity("Select City"); //As you select country from select box, in below line we filter that country from all data so that we can get subcountry(state), name(city) out of it. let Singlecountry = data.filter(item=> item.country === e.target.value); //now this singleCountry which is getting the name of subcountry(state) multiple times. So to remove duplicates set is used. let states = [...new Set(Singlecountry.map(item=> item.subcountry))]; //after removing the duplicate subcountry names(state names). we have saved the data in state state using setState. setState(states); } const handleStateChange=(e)=>{ //here when user selects particular subcountry(state name), we have checked again with original data to get all subcounty that match that name. to get the data of perticular city. let singleCity = data.filter(item=> item.subcountry === e.target.value); setCity(singleCity); } return ( {/*Country Selection */} Country: handleCountryChange(e)}> Select Country {country?.map((item,index)=> ( {item} ))} {/*State Selection */} State: handleStateChange(e)}> Select State {state !=='Select State' && state?.map((item,index)=> {item} )} {/*City Selection */} City: Select City {city !=='Select City' && city?.map((item,index)=> {item?.name} )}
import axios from "axios"; import {useEffect,useState} from "react"; function App() { const [data,setData]=useState([]); const [state,setState]=useState([]); const [city,setCity]=useState([]); useEffect(()=>{ axios.get("pkgstore.datahub.io/core/world-cities/world-cities_json/data/5b3dd46ad10990bca47b04b4739a02ba/world-cities_json.json"). then(res=> setData(res.data)) .catch(err=>console.log(err)) },[]) //removing duplicate country names let country = [...new Set(data.map(item=> item.country))]; country.sort(); const handleCountryChange=(e)=>{ setState("Select State"); setCity("Select City"); //As you select country from select box, in below line we filter that country from all data so that we can get subcountry(state), name(city) out of it. let Singlecountry = data.filter(item=> item.country === e.target.value); //now this singleCountry which is getting the name of subcountry(state) multiple times. So to remove duplicates set is used. let states = [...new Set(Singlecountry.map(item=> item.subcountry))]; //after removing the duplicate subcountry names(state names). we have saved the data in state state using setState. setState(states); } const handleStateChange=(e)=>{ //here when user selects particular subcountry(state name), we have checked again with original data to get all subcounty that match that name. to get the data of perticular city. let singleCity = data.filter(item=> item.subcountry === e.target.value); setCity(singleCity); } return ( {/*Country Selection */} Country: handleCountryChange(e)}> Select Country {country?.map((item,index)=> ( {item} ))} {/*State Selection */} State: handleStateChange(e)}> Select State {state !=='Select State' && state?.map((item,index)=> {item} )} {/*City Selection */} City: Select City {city !=='Select City' && city?.map((item,index)=> {item?.name} )}
you give perfect solution. Please improve sound quality in coming videos.
Thankyou friend, I will do that.
I want to contribute to this API, how do I get to do that, please?
Hello sir, please tell me the URL you are using.
thanks x ♾
hi, can we write code of this countries ,state,city dropdown in java using eclipse ?
In java you can use JSP or Servlet to write the code. But it's frontend stuff there you will need html and js only. For api you can me it in JSP or Servlet.
Bro you selected my country Haiti lol
to get list of states by using another api in same page by using the country id ,
is possible? if so how to do this?
Yes, it's possible if api has country id or name.
You have to use two useEffect method one with dependency and another without dependency.
1. Call this api in useeffect which does not have dependency. 2. Make a state to save the country id or name while selecting it. 3. Make another useEffect with dependency as the country id or name which you made in last step. So that the api that you will call will trigger as the country name changes in the state. And do the filtering inside the this useEffect and save the state data in a other state.
If you can get me that api. I can try to give you a video solutions frd.
Thank you Boss
Hi,
I have a problem at this line
let states = data.filter(state=> state.country === e.target.value);
console.log(states); ===> [ ]
What is the problem brother.
Shell we connect on Google meet.
Here we are filtering country name that we are getting from select box from e.target.value with whole data. So that we will get data related to that country only which will have state City etc...
@@anuragtripathi8724 no value in states
@@hanuman0320 can you send me the code full code that you have written.
👍👍👍✌✌
Thank you so much man. How did you create the api btw?
No I didn't create this one. Just searched free api for country, city and state. You can easily get lots of links.
@@anuragtripathi8724 Nice work. Gonna use it for my website.
@@miscany thanks
hi !!
I'm unable to fetch cities from this package
Cn u pls help me sir
It's a free api, I think they would have removed the link for it. Let me check it then I can help you.
I have checked and they have removed the data form the link. I will find and give you new link.
@@anuragtripathi8724 ok 😌
@@AashutoshBansal www.universal-tutorial.com/rest-apis/free-rest-api-for-country-state-city
pls use this.
corresponding states are not visible
Sorry sister, the api was open source , I think they have removed the access now. I will provide you new api.
www.universal-tutorial.com/rest-apis/free-rest-api-for-country-state-city
You can use this one
Hi brother can you make video for 5 level of dependent dropdowns with constant data from a file stored in the same project ?
Can you send me a rough sketch what you want brother.
Should I give you this video on Sunday. As my working hr does not permit me to do anything.
Yeah its alright ..
1)State dropdown 2) district dropdown 3) constituency dropdown and their description for opinion pole
Plzz Share The CSS file Bro
please share the source code
import axios from "axios";
import {useEffect,useState} from "react";
function App() {
const [data,setData]=useState([]);
const [state,setState]=useState([]);
const [city,setCity]=useState([]);
useEffect(()=>{
axios.get("pkgstore.datahub.io/core/world-cities/world-cities_json/data/5b3dd46ad10990bca47b04b4739a02ba/world-cities_json.json").
then(res=> setData(res.data))
.catch(err=>console.log(err))
},[])
//removing duplicate country names
let country = [...new Set(data.map(item=> item.country))];
country.sort();
const handleCountryChange=(e)=>{
setState("Select State");
setCity("Select City");
//As you select country from select box, in below line we filter that country from all data so that we can get subcountry(state), name(city) out of it.
let Singlecountry = data.filter(item=> item.country === e.target.value);
//now this singleCountry which is getting the name of subcountry(state) multiple times. So to remove duplicates set is used.
let states = [...new Set(Singlecountry.map(item=> item.subcountry))];
//after removing the duplicate subcountry names(state names). we have saved the data in state state using setState.
setState(states);
}
const handleStateChange=(e)=>{
//here when user selects particular subcountry(state name), we have checked again with original data to get all subcounty that match that name. to get the data of perticular city.
let singleCity = data.filter(item=> item.subcountry === e.target.value);
setCity(singleCity);
}
return (
{/*Country Selection */}
Country:
handleCountryChange(e)}>
Select Country
{country?.map((item,index)=> (
{item}
))}
{/*State Selection */}
State:
handleStateChange(e)}>
Select State
{state !=='Select State' && state?.map((item,index)=>
{item}
)}
{/*City Selection */}
City:
Select City
{city !=='Select City' && city?.map((item,index)=>
{item?.name}
)}
);
}
export default App;
can you please share this code
import axios from "axios";
import {useEffect,useState} from "react";
function App() {
const [data,setData]=useState([]);
const [state,setState]=useState([]);
const [city,setCity]=useState([]);
useEffect(()=>{
axios.get("pkgstore.datahub.io/core/world-cities/world-cities_json/data/5b3dd46ad10990bca47b04b4739a02ba/world-cities_json.json").
then(res=> setData(res.data))
.catch(err=>console.log(err))
},[])
//removing duplicate country names
let country = [...new Set(data.map(item=> item.country))];
country.sort();
const handleCountryChange=(e)=>{
setState("Select State");
setCity("Select City");
//As you select country from select box, in below line we filter that country from all data so that we can get subcountry(state), name(city) out of it.
let Singlecountry = data.filter(item=> item.country === e.target.value);
//now this singleCountry which is getting the name of subcountry(state) multiple times. So to remove duplicates set is used.
let states = [...new Set(Singlecountry.map(item=> item.subcountry))];
//after removing the duplicate subcountry names(state names). we have saved the data in state state using setState.
setState(states);
}
const handleStateChange=(e)=>{
//here when user selects particular subcountry(state name), we have checked again with original data to get all subcounty that match that name. to get the data of perticular city.
let singleCity = data.filter(item=> item.subcountry === e.target.value);
setCity(singleCity);
}
return (
{/*Country Selection */}
Country:
handleCountryChange(e)}>
Select Country
{country?.map((item,index)=> (
{item}
))}
{/*State Selection */}
State:
handleStateChange(e)}>
Select State
{state !=='Select State' && state?.map((item,index)=>
{item}
)}
{/*City Selection */}
City:
Select City
{city !=='Select City' && city?.map((item,index)=>
{item?.name}
)}
);
}
export default App;
can you shere the source code?
import axios from "axios";
import {useEffect,useState} from "react";
function App() {
const [data,setData]=useState([]);
const [state,setState]=useState([]);
const [city,setCity]=useState([]);
useEffect(()=>{
axios.get("pkgstore.datahub.io/core/world-cities/world-cities_json/data/5b3dd46ad10990bca47b04b4739a02ba/world-cities_json.json").
then(res=> setData(res.data))
.catch(err=>console.log(err))
},[])
//removing duplicate country names
let country = [...new Set(data.map(item=> item.country))];
country.sort();
const handleCountryChange=(e)=>{
setState("Select State");
setCity("Select City");
//As you select country from select box, in below line we filter that country from all data so that we can get subcountry(state), name(city) out of it.
let Singlecountry = data.filter(item=> item.country === e.target.value);
//now this singleCountry which is getting the name of subcountry(state) multiple times. So to remove duplicates set is used.
let states = [...new Set(Singlecountry.map(item=> item.subcountry))];
//after removing the duplicate subcountry names(state names). we have saved the data in state state using setState.
setState(states);
}
const handleStateChange=(e)=>{
//here when user selects particular subcountry(state name), we have checked again with original data to get all subcounty that match that name. to get the data of perticular city.
let singleCity = data.filter(item=> item.subcountry === e.target.value);
setCity(singleCity);
}
return (
{/*Country Selection */}
Country:
handleCountryChange(e)}>
Select Country
{country?.map((item,index)=> (
{item}
))}
{/*State Selection */}
State:
handleStateChange(e)}>
Select State
{state !=='Select State' && state?.map((item,index)=>
{item}
)}
{/*City Selection */}
City:
Select City
{city !=='Select City' && city?.map((item,index)=>
{item?.name}
)}
);
}
export default App;
please share git hub repo
import axios from "axios";
import {useEffect,useState} from "react";
function App() {
const [data,setData]=useState([]);
const [state,setState]=useState([]);
const [city,setCity]=useState([]);
useEffect(()=>{
axios.get("pkgstore.datahub.io/core/world-cities/world-cities_json/data/5b3dd46ad10990bca47b04b4739a02ba/world-cities_json.json").
then(res=> setData(res.data))
.catch(err=>console.log(err))
},[])
//removing duplicate country names
let country = [...new Set(data.map(item=> item.country))];
country.sort();
const handleCountryChange=(e)=>{
setState("Select State");
setCity("Select City");
//As you select country from select box, in below line we filter that country from all data so that we can get subcountry(state), name(city) out of it.
let Singlecountry = data.filter(item=> item.country === e.target.value);
//now this singleCountry which is getting the name of subcountry(state) multiple times. So to remove duplicates set is used.
let states = [...new Set(Singlecountry.map(item=> item.subcountry))];
//after removing the duplicate subcountry names(state names). we have saved the data in state state using setState.
setState(states);
}
const handleStateChange=(e)=>{
//here when user selects particular subcountry(state name), we have checked again with original data to get all subcounty that match that name. to get the data of perticular city.
let singleCity = data.filter(item=> item.subcountry === e.target.value);
setCity(singleCity);
}
return (
{/*Country Selection */}
Country:
handleCountryChange(e)}>
Select Country
{country?.map((item,index)=> (
{item}
))}
{/*State Selection */}
State:
handleStateChange(e)}>
Select State
{state !=='Select State' && state?.map((item,index)=>
{item}
)}
{/*City Selection */}
City:
Select City
{city !=='Select City' && city?.map((item,index)=>
{item?.name}
)}
);
}
export default App;
Hello sir, please tell me the URL you are using.
Hello sir, please tell me the URL you are using.