CODEWITHSUNDEEP
javascriptjqueryhtmlarraysjson
NoDachi
NoDachi

Reputation: 934

jQuery - Get selected value from json object

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>

Upvotes: 1

Views: 11023

Answers (4)

Ionut Necula
Ionut Necula

Reputation: 11472

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>

Upvotes: 2

Craig
Craig

Reputation: 332

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/

Upvotes: 2

kukkuz
kukkuz

Reputation: 42352

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>

Upvotes: 5

bassxzero
bassxzero

Reputation: 5041

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

Upvotes: 2

Related Questions