Bind json data into two dependent dropdown list in html page and display the corresponding data

Question

I have the following data in a json file. I want this data to be shown in dropdown lists, as: In first drop down, I can select the country. In second drop down, I can select from the states of the selected country. Then, the population of the place is shown in text below on the html page.

[
  {
    "country": "USA",
    "state": "Texas",
    "population": "20M"
  },
  {
    "country": "USA",
    "state": "Alabama",
    "population": "4M"
  },
  {
    "country": "USA",
    "state": "California",
    "population": "33M"
  },
  {
    "country": "India",
    "state": "Maharashtra",
    "population": "112M"
  },
  {
    "country": "Japan",
    "state": "Tokyo",
    "population": "13M"
  },
  {
    "country": "India",
    "state": "Bihar",
    "population": "104M"
  },
  {
    "country": "USA",
    "state": "Florida",
    "population": "15M"
  },
  {
    "country": "India",
    "state": "Gujarat",
    "population": "60M"
  },
  {
    "country": "USA",
    "state": "Georgia",
    "population": "8M"
  },
  {
    "country": "Japan",
    "state": "Osaka",
    "population": "8M"
  },
  {
    "country": "Japan",
    "state": "Saitama",
    "population": "7M"
  },
  {
    "country": "India",
    "state": "Tamil Nadu",
    "population": "72M"
  }
]

It will be more helpful if the code is in javascript. Thank you:)

I have tried this:--

<body>
    <p>
<input type="button" style="margin:10px 0; "onclick = "populateSelect()" value = "Start" />
    </p>
    <select id="sel" onchange="show(this)">
        <option value="">-- Select --</option>
    </select>
</body>
<script>    

var ele = document.getElementById('sel');
          for (var i = 0; i < data.length; i++) {
              if(data[i]['country']!==undefined){
              ele.innerHTML = ele.innerHTML + '<option value="' + data[i]['country'] + '">' + data[i]['country'] + '</option>'; }

</script>

Stackoverflow is not a code writing service, kindly mention what u have tried, and where u are facing issues! — Manas Khandelwal
– Manas Khandelwal, Commented Jun 7, 2021 at 5:28
I'm new to this, I tried populating the country in first dropdown, but was not able to populate the states of the selected country in the other drop down. Have gone through many resources, but didn't get! — Harshatej M
– Harshatej M, Commented Jun 7, 2021 at 5:34

Kopi Bryant · Accepted Answer · 2021-06-07 08:40:39Z

Not sure how you want it but here is what I have done. I have used .map() for filtering the unique country and parse it to the country dropdown. Btw, I also used the filtering at the last part for getting the population result once you have the country and state selected.

Check it out .map() and .filter for more info

And here is the working JsFiddle

const data = [
    {
    "country": "USA",
    "state": "Texas",
    "population": "20M"
  },
  {
    "country": "USA",
    "state": "Alabama",
    "population": "4M"
  },
  {
    "country": "USA",
    "state": "California",
    "population": "33M"
  },
  {
    "country": "India",
    "state": "Maharashtra",
    "population": "112M"
  },
  {
    "country": "Japan",
    "state": "Tokyo",
    "population": "13M"
  },
  {
    "country": "India",
    "state": "Bihar",
    "population": "104M"
  },
  {
    "country": "USA",
    "state": "Florida",
    "population": "15M"
  },
  {
    "country": "India",
    "state": "Gujarat",
    "population": "60M"
  },
  {
    "country": "USA",
    "state": "Georgia",
    "population": "8M"
  },
  {
    "country": "Japan",
    "state": "Osaka",
    "population": "8M"
  },
  {
    "country": "Japan",
    "state": "Saitama",
    "population": "7M"
  },
  {
    "country": "India",
    "state": "Tamil Nadu",
    "population": "72M"
  }
];

$( () => {
    const countryArr= [... new Set(data.map(x => x.country))];
  
    countryArr.forEach((ele, index) => {
    $('#countryS').append(`<option value="${ele}">${ele}</option>`)
  });
  
  // After choosing country, showing the state
    $('#countryS').on('change', function(){
    // Reset the state array and drop down 
    var stateArr = [];
    $('#stateS').html(`<option value="">-- Select --</option>`);
    $('#showPopulation').val('');
    
    data.forEach((ele,idx) => {
        if(ele.country == this.value){
        stateArr.push(ele.state);
      }
    }) // End of data forEach function
    stateArr.forEach((ele, index) => {
      $('#stateS').append(`<option value="${ele}">${ele}</option>`)
    });
  });
  
  // After choosing the state, show the population
  $('#stateS').on('change', function(){
    let country         = $('#countryS').val();
    let state           = $('#stateS').val();
    let population  = data.filter(x => {
        return x.country == country && x.state == state;
    })[0]['population']
    
    //Parse the data to the input field
    $('#showPopulation').val(population);
  })
  
}) // End of onLoad function

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<body>
  <span>Country</span>
  <select id="countryS">
    <option value="">-- Select --</option>
  </select>
  
  <span>State</span>
  <select id="stateS">
    <option value="">-- Select --</option>
  </select>
  
  <input id="showPopulation" placeholder="Population" readonly/>
  
</body>

Collectives™ on Stack Overflow

Bind json data into two dependent dropdown list in html page and display the corresponding data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related