Country state city select in nodejs using mongodb

问题

I am making a node.js website where I want to implement dependent dropdown for selecting location. I have created two collections in mongoDB using 'countries' and 'states+cities' json files from this source: "https://github.com/dr5hn/countries-states-cities-database".

This is the html inside a form:

<div class="form-group">
    <label for="">Country</label>
    <select name="country" class="form-control btn btn-light select-country" id="selectCountry"></select>
</div>
<div class="form-group">
    <label for="">State</label>
    <select name="state" class="form-control btn btn-light select-state" id="selectState"></select>
</div>
<div class="form-group">
    <label for="">City</label>
    <select name="city" class="form-control btn btn-light select-city" id="selectCity"></select>
</div>

I couldn't find any tutorial to make this in mongo+node so I followed "https://www.youtube.com/watch?v=Bhj-KhIGtY0" to try and adapt it for my use. So my script in footer is:

    var addressObj =
    {
        init:function()
        {
            var that = this;
            this.load_country();
            document.getElementById('selectCountry').addEventListener('change', function()
                {
                    that.load_state(this.value);
                });
            document.getElementById('selectState').addEventListener('change', function()
                {
                    that.load_city(this.value);
                });
        },
        load_country:function()
        {
            var ajax = new XMLHttpRequest();
            ajax.open('GET', "/getCountriesList", true);
            ajax.onload = function()
            {
                var countries = JSON.parse(ajax.responseText);
                countries.data.forEach(function(value)
                {
                    var op = document.createElement('option');
                    op.innerText = value.name;
                    op.setAttribute('value', value.id);
                    document.getElementById('selectCountry').appendChild(op);
                });
            }
            ajax.send();
        },
        load_state:function(id)
        {
            document.getElementById('selectState').innerHTML = '';
            var ajax = new XMLHttpRequest();
            ajax.open('GET', "/getStatesList", true);
            ajax.onload = function()
            {
                var states = JSON.parse(ajax.responseText);
                states.data.forEach(function(value)
                {
                    var op = document.createElement('option');
                    op.innerText = value.name;
                    op.setAttribute('value', value.id);
                    document.getElementById('selectState').appendChild(op);
                });
            }
            ajax.send(data);
        },
        load_city:function(id)
        {
            document.getElementById('selectCity').innerHTML = '';
            var ajax = new XMLHttpRequest();
            ajax.open('GET', "/getCitiesList", true);
            ajax.onload = function()
            {
                var cities = JSON.parse(ajax.responseText);console.log(cities);
                cities.data.forEach(function(value)
                {
                    var op = document.createElement('option');
                    op.innerText = value.name;
                    op.setAttribute('value', value.id);
                    document.getElementById('selectCity').appendChild(op);
                });
            }
            ajax.send();
        }
    }
    addressObj.init();

and the routes for data in server.js are:

        // Countries list for dropdown
        app.get("/getCountriesList", function (request, result) {
            database.collection("countries").find()
            .toArray(function (error, data) {
                result.json({
                    "data": data
                });
            });
        });

        // States+Cities list for dropdown
        app.get("/getStatesList", function (request, result) {
            var countryId = request.id;
            database.collection("countries").findOne({
                "id": countryId
            }, function (error, data) {
                var country = data.id;
                database.collection("states_cities").find({
                    "country_id": country
                })
                .toArray(function (error, data) {
                    result.json({
                        "data": data.name
                    });
                });
            });
        });

The countries part is working fine and I get the list as required but right after selecting country I get "TypeError: Cannot read property 'id' of null" in cmd. I realized that this is because request for states list didn't contain 'id' of the selected country. So I tried appending FormData, but even then data isn't getting sent.

            var countryId = document.getElementById('selectCountry').value;

            var data = new FormData();
            data.append("countryId", countryId);
            ajax.send(data);

and changed this in states server route:

            var countryId = request.fields.countryId;

How do I send request correctly to get data from mongo?

I also need to create separate route for getting cities as some states have hundreds and a few even have thousands of cities so I feel it would be better to fetch cities list from database after a state is selected. Please help me with the query for that as well.

来源：https://stackoverflow.com/questions/64943265/country-state-city-select-in-nodejs-using-mongodb