Question

我想要做的是，当选择一个选项时（例如＃4），我从json对象获取日期，以便渲染出来：＆＃34; 12月26日星期一和＃34;。我正在努力展示这一点 - 有谁知道我该怎么做呢？

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

data-delivery-date属性中的值是一个字符串 - 使用JSON.parse()将其转换为对象 - 请参阅下面的演示：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您的数据是一个字符串。您需要首先转换为JSON对象，然后使用点或数组表示法来访问成员。

$(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

我已经更新了你的小提琴，以便它解析你的json字符串，然后使用dataObj [4]来显示日期。

  var dataObj = jQuery.parseJSON(data);

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

Answer 4

使用JSON.parse解析json字符串，然后可以使用for遍历对象。试试这个：

$(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>

另外，如果你想将来自JSON的值附加到选择中，并过滤空值，你可以这样做：

$(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>

jQuery - 从json对象

4 个答案: