jQuery - Get selected value from json object

Question

What I am trying to do is that when an option is selected (for example #4) I get the date from the json object so it would render out: "Monday 26th December". I'm struggling to display this - does anyone know how I could do this please?

https://jsfiddle.net/9L53epre/3/

 $(function() { $('select').change(function() { var val = $(this).val(); console.log(val); }); var data = $('#delivery-date').data('delivery-date'); console.log(data); // console.log(data.item[val]); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <span id="delivery-date" data-delivery-date='{"1":"","2":"","3":"","4":"Monday 26th December","5":"","6":"","7":"Friday 23rd December","8":"","9":""} '></span> <select> <option value="1">option 1</option> <option value="2">option 2</option> <option value="3">option 4</option> <option value="4">option 4</option> </select> 

Answer 1

The value in data-delivery-date attribute is a string - use JSON.parse() to convert it into an object - see demo below:

 $(function() { var data = JSON.parse($('#delivery-date').data('delivery-date')); $('select').change(function() { var val = $(this).val(); console.log(data[val]); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span id="delivery-date" data-delivery-date='{"1":"","2":"","3":"","4":"Monday 26th December","5":"","6":"","7":"Friday 23rd December","8":"","9":""} '></span> <select> <option value="1">option 1</option> <option value="2">option 2</option> <option value="3">option 3</option> <option value="4">option 4</option> </select> 

Answer 2

Your data is a string. You need to convert is to a JSON object first then use dot or array notation to access the members.

$(function() {
  $('select').change(function() {
    var val = $(this).val();
    console.log(val);
  });

  var data = JSON.parse($('#delivery-date').data('delivery-date'));

    console.log(data['7']);
  // console.log(data.item[val]);
});

Answer 3

I've updated your fiddle so that it parses your json string and then uses the dataObj[4] to to show the date.

  var dataObj = jQuery.parseJSON(data);

https://jsfiddle.net/9L53epre/4/

Answer 4

Use JSON.parse to parse the json string and then you can loop over the object with a for . Try this:

 $(function() { var data = $('#delivery-date').data('delivery-date'); data = JSON.parse(data); $('select').on('change', function() { var val = $(this).val(); var data_length = Object.keys(data).length; for (var k = 1; k < data_length; k++) { if (val == k) { $('#output').html(data[k]); } } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span id="delivery-date" data-delivery-date='{"1":"","2":"","3":"","4":"Monday 26th December","5":"","6":"","7":"Friday 23rd December","8":"","9":""} '></span> <select> <option value="1">option 1</option> <option value="2">option 2</option> <option value="3">option 3</option> <option value="4">option 4</option> <option value="5">option 5</option> <option value="6">option 6</option> <option value="7">option 7</option> </select> <p id='output'> </p> 

Also, if you want to append the values from JSON into the select dinamically, and filter the empty values, you can do it like this:

 $(function() { var data = $('#delivery-date').data('delivery-date'); data = JSON.parse(data); var data_length = Object.keys(data).length; for (var i = 1; i < data_length; i++) { if (data[i] != '') { $('select').append("<option value=" + i + ">option " + i + "</option>"); } } $('select').on('change', function() { var val = $(this).val(); for (var k in data) { if (val == k) { $('#output').html(data[k]); } } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span id="delivery-date" data-delivery-date='{"1":"","2":"","3":"","4":"Monday 26th December","5":"","6":"","7":"Friday 23rd December","8":"","9":""} '></span> <select> <option value='default' selected disabled>Select value</option> </select> <p id='output'> </p>