Display data from array corresponding to option in a dropdown

Question

I am trying to display data from an array. I get the countries from this array but I need to display data after selecting from the drop down option.

I need to put the 'making_calls' value in .price-call p and 'sending_texts' in .price-text p.

Here's the code

        array =[
          {
            "name": "Afghanistan",
            "dial_code": "+93",
            "code": "AF",
            "making_calls": "€0.30",
            "sending_texts": "€0.10",
            "call_setup": "€0.15"
        },
        {
            "name": "Albania",
            "dial_code": "+355",
            "code": "AL",
            "making_calls": "€0.6",
            "sending_texts": "€0.10",
            "call_setup": "€0.15"
        },
        {
            "name": "Algeria",
            "dial_code": "+213",
            "code": "DZ",
            "making_calls": "€1.20",
            "sending_texts": "€0.10",
            "call_setup": "€0.15"
        }
        ];
        
        $.each(array, function (i, p) {
          $('#selectCountry').append($('<option></option>').val(p.code).html(p.name + ' ' +  '(' + p.dial_code+  ')'  ));
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="" id="selectCountry">
   <option selected disabled>Country</option>
</select>

<div class="calls">
  <p>Making Calls</p>
  <p class="price-call">0.30$</p>
</div>
<div class="texts">
  <p>Sending Texts</p>
  <p class="price-text">0.15$</p>
</div>

Answer 1

You can use change so you can get select values and then you can use $.each to check data in array with if conditions and then append making_calls and sending_texts to their element.

var countries =[
      {
        "name": "Afghanistan",
        "dial_code": "+93",
        "code": "AF",
        "making_calls": "€0.30",
        "sending_texts": "€0.10",
        "call_setup": "€0.15"
    },
    {
        "name": "Albania",
        "dial_code": "+355",
        "code": "AL",
        "making_calls": "€0.6",
        "sending_texts": "€0.10",
        "call_setup": "€0.15"
    },
    {
        "name": "Algeria",
        "dial_code": "+213",
        "code": "DZ",
        "making_calls": "€1.20",
        "sending_texts": "€0.10",
        "call_setup": "€0.15"
    }
];
        
$.each(countries, function (i, p) {
    $('#selectCountry').append($('<option></option>').val(p.code).html(p.name + ' ' +  '(' + p.dial_code+  ')'  ));
});

$('#selectCountry').on('change',function(){
    var country = $(this).val();
    $.each(countries, function (key, val) {
        if( val.code == country ){
            $('.price-call').html(val.making_calls);
            $('.price-text').html(val.sending_texts);
            return false; // break loop if conditions match
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="" id="selectCountry">
    <option selected disabled>Country</option>
</select>

<div class="country-info">
    <div class="calls">
        <p>Making Calls</p>
        <p class="price-call">0.30$</p>
    </div>
    <div class="texts">
        <p>Sending Texts</p>
        <p class="price-text">0.15$</p>
    </div>
</div>

Answer 2

Use if condition inside the dropdown change and compare your country code and find the desire result.

array = [{
    "name": "Afghanistan",
    "dial_code": "+93",
    "code": "AF",
    "making_calls": "€0.30",
    "sending_texts": "€0.10",
    "call_setup": "€0.15"
  },
  {
    "name": "Albania",
    "dial_code": "+355",
    "code": "AL",
    "making_calls": "€0.6",
    "sending_texts": "€0.10",
    "call_setup": "€0.15"
  },
  {
    "name": "Algeria",
    "dial_code": "+213",
    "code": "DZ",
    "making_calls": "€1.20",
    "sending_texts": "€0.10",
    "call_setup": "€0.15"
  }
];

$.each(array, function(i, p) {
  $('#selectCountry').append($('<option></option>').val(p.code).html(p.name + ' ' + '(' + p.dial_code + ')'));
});

$('#selectCountry').on('change', function() {
  var country = $(this).val();
  $.each(array, function(i, p) {
    if (p.code == country) {
      $('.price-call').html(p.making_calls);
      $('.price-text').html(p.sending_texts);
        return false; // break if match
    }

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="" id="selectCountry">
  <option selected disabled>Country</option>
</select>

<div class="calls">
  <p>Making Calls</p>
  <p class="price-call">0.30$</p>
</div>
<div class="texts">
  <p>Sending Texts</p>
  <p class="price-text">0.15$</p>
</div>