CODEWITHSUNDEEP
javascripthtmljqueryjsondropdown
Harshatej M
Harshatej M

Reputation: 71

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

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>

Upvotes: 0

Views: 1495

Answers (1)

Kopi Bryant
Kopi Bryant

Reputation: 1366

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>

Upvotes: 1

Related Questions