How to get specific value from option select - json object

Question

I am trying to extract data from the option value. For example only ID or UserName. Can you please help?

$(document).ready(function() {
  $.getJSON("http://localhost:8080/EBCargoAndCommodityServices/resources/user-form/retrieve", function(data) {
    data.forEach(function(dt) {
      $("#customer-list").append('<option value="' + dt.id + dt.contactName + '">' + dt.contactName + '</option>');
    });
    $('#customer-list').change(function() {
      var str = this.value;
      alert(str);
    });
  });
});

It is retrieving id and name,however I will want to take control and extract the id and name seperately. — Bartosz
– Bartosz, Commented May 22, 2020 at 17:55

anuragb26 · Accepted Answer · 2020-05-22 16:00:42Z

1

Let's say for example that dt.id = 1 and dt.contactName is Bartosz.
So you would be alerting 1Bartosz in alert(str)

While building up the options do this,

$("#customer-list").append('<option value="' + `${dt.id}_${dt.contactName}` + '">' + dt.contactName + '</option>'); // Using template literals and concatenating both id and contact name using a delimiter `_`

Then, in your change function do this.

const info = str.split('_')
/*
info will be an array  with two elements 
info[0] will be id  i.e. 1
info[1] will be contactName i.e. Bartosz
*/

answered May 22, 2020 at 16:00

anuragb26

1,47511 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

giovanni · Accepted Answer · 2020-05-24 10:39:19Z

1

Sure you can, the best way would be to store the values you need to use into specific data attributes, then access them using the .data() method

    const $ = jQuery;
    $(document).ready(function() {
        // Mocked data for test
        const data = [{"address":"","companyName":"","contactName":"ghkkkkk","email":"","id":22,"surname":"","telephone":0},
        {"address":"","companyName":"","contactName":"asdasd","email":"","id":23,"surname":"","telephone":0}]
        data.forEach(function(dt) {
          $("#customer-list").append('<option data-id="' + dt.id + '" data-name="' + dt.contactName + '" value="' + dt.id + dt.contactName + '">' + dt.contactName + '</option>');
        });
        $('#customer-list').change(function() {
          const selected = $(this).find('option:selected');
          $('#result').text('selected id is: ' + selected.data('id') + ' contact name is : ' + selected.data('name'))
          
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <select id="customer-list">
    <option>select an option</option>
  </select>
  <span id="result"></span>

edited May 24, 2020 at 10:39

answered May 22, 2020 at 16:08

giovanni

3902 gold badges5 silver badges15 bronze badges

2 Comments

Bartosz Over a year ago

Thank you for you answer. I am getting undefined. My JSON Dummy Array looks as follows:[{"address":"","companyName":"","contactName":"ghkkkkk","email":"","id":22,"surname":"","telephone":0}]. I believe I need to access "nested" object first

giovanni Over a year ago

I've changed the snippet to make test runnable :)

Collectives™ on Stack Overflow

How to get specific value from option select - json object

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related