I need to create two dropdown menus on a webpage - (the second dropdown menu is dependent on the first dropdown menu) - and populate both the menus with records from two different columns of a .csv file.
I'm able to read the csv file using NodeJS and get both the required columns into two different arrays as below:
uniqueCountryName
[
'Italy',
'Spain',
'France',
'England'
]
uniqueCityName
[
'Paris',
'Milan',
'Marseilles',
'Venice'
'London',
'Rome',
'Berlin',
'Madrid',
'Barcelona'
]
This is the nodeJS code I've used so far:
const csv = require('csv-parser');
const fs = require('fs');
const results = [];
const CountryName = [];
const CityName = [];
fs.createReadStream('C:/Users/learningsql/Desktop/project.csv')
.pipe(csv())
.on('data', (data) => results.push(data))
.on('end', () => {
var CountryName = []
for (var item in results) {
CountryName.push(results[item]["CountryName"])
}
/* console.log(CountryName) */
const uniqueCountryName = Array.from(new Set(CountryName));
console.log("uniqueCountryName")
console.log(uniqueCountryName)
});
fs.createReadStream('C:/Users/learningsql/Desktop/project.csv')
.pipe(csv())
.on('data', (data) => results.push(data))
.on('end', () => {
for (var item in results) {
CityName.push(results[item]["CityName"])
}
/* console.log(CityName) */
const uniqueCityName = Array.from(new Set(CityName));
console.log("uniqueCityName")
console.log(uniqueCityName)
});
Now I need to do two things: First I need to populate these two different arrays in two different dropdown menus on a webpage. The CountryName should go into the first dropdown menu and the CityName should go into the second dropdown menu. It's my understanding that browser can't read the output from the terminal, so we need to set up a server using Express.JS. How can I do this?
Second, as I already mentioned that the second dropdown records should be dependent on the first one, how can we map/link both the arrays? For example, when I select Italy in the first dropdown menu, only Italian cities (Milan, Venice, Rome etc) should show up in the second dropdown menu. If I select Spain, only Spanish cities should show up in the dropdown menu (Madrid, Barcelona etc).
For reference, the dropdown menu should be something like this
I'm a total newbie to NodeJS and any help is appreciated. Thanks.