CODEWITHSUNDEEP
javascriptjqueryhtmljson
ITWorker
ITWorker

Reputation: 995

How to get details of selection from a drop-down list that was populated with JSON data?

I have the following test.json:

{"countries":[{"countryCode":"US","officialName":"UNITED STATES OF AMERICA","continent":"NORTH AMERICA","currentSeason":"WINTER"},{"countryCode":"AR","officialName":"ARGENTINA","continent":"SOUTH AMERICA","currentSeason":"SUMMER"}]}

And the following html/jQuery that populates a dropdown with the officialName values from the JSON data:

<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <script src="jquery.js"></script>
</head>
<body>
    <div>
       <select id="countries"></select>
       <br>
       <textarea id="detailsbox" rows="4" cols="50">
       </textarea>
    </div>
</body>
<script type="text/JavaScript">
    $(document).ready(function() {
        var $select = $('#countries')
        $.getJSON('test.json',function(translations){
        $select.html('');
        //iterate over the data and append a select option
        $.each(translations.countries, function(key, val){ 
        $select.append('<option id="' + val.countryCode + '">' + val.officialName + '</option>');
       })
    });
    });
</script>
</html>

My question is, how can I access the other dependent data (like currentSeason, countryCode, continent) based on the country selected, and fill in the detailsBox textarea with that data?

Thank you.

Upvotes: 2

Views: 55

Answers (2)

dana
dana

Reputation: 18155

Quick and dirty using Array.filter to find the selected country after one is selected.

var $select = $('#countries');

// setting <option value="..."> as opposed to <option id="...">
$.each(translations.countries, function(key, val) {
    $select.append('<option value="' + val.countryCode + '">' + val.officialName + '</option>');
});

$select.change(function() {
    var code = $(this).val();
    var country = translations.countries.filter(function(value) {
        return value.countryCode == code;
    })[0];
    console.log(country);
});

Upvotes: 1

guradio
guradio

Reputation: 15565

var translations = {
  "countries": [{
    "countryCode": "US",
    "officialName": "UNITED STATES OF AMERICA",
    "continent": "NORTH AMERICA",
    "currentSeason": "WINTER"
  }, {
    "countryCode": "AR",
    "officialName": "ARGENTINA",
    "continent": "SOUTH AMERICA",
    "currentSeason": "SUMMER"
  }]
}

var $select = $('#countries')
$.each(translations.countries, function(key, val) {
  $select.append('<option id="' + val.countryCode + '">' + val.officialName + '</option>');
})

$select.change(function() {
  var countrycode = $("option:selected",this).attr('id');

  $.each(translations.countries, function(key, val) {
    console.log(val.countryCode)
    console.log(countrycode)
    if(val.countryCode == countrycode)
    $("#detailsbox").text("season is " +val.currentSeason)
  })


}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select id="countries"></select>
  <br>
  <textarea id="detailsbox" rows="4" cols="50">
  </textarea>
</div>

  1. use change event
  2. on load fire change event of select

Upvotes: 2

Related Questions