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>

kukkuz · Accepted Answer · 2016-12-22 16:45:13Z

5

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>

answered Dec 22, 2016 at 16:45

kukkuz

42.5k6 gold badges65 silver badges103 bronze badges

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

Comments

bassxzero · Accepted Answer · 2016-12-22 16:44:41Z

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]);
});

answered Dec 22, 2016 at 16:44

bassxzero

5,01924 silver badges36 bronze badges

1 Comment

bassxzero Over a year ago

@RoryMcCrossan If you clicked on OP's fiddle then you would know you're wrong.

Craig · Accepted Answer · 2016-12-22 16:46:28Z

2

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/

answered Dec 22, 2016 at 16:46

Craig

3321 silver badge7 bronze badges

Comments

Ionut Necula · Accepted Answer · 2016-12-22 17:16:23Z

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>

Collectives™ on Stack Overflow

jQuery - Get selected value from json object

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related