jQuery - jsonオブジェクトから選択された値を取得

Question

私がしようとしているのは、オプションが選択されたとき（例えば＃4）、jsonオブジェクトから日付を取得するので、 "12月26日月曜日"です。私はこれを表示するために苦労しています - 私はこれをどうすればできるか知っていますか？

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

data-delivery-date属性の値が文字列である - オブジェクトに変換するJSON.parse()を使用 - デモ下記参照：

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

あなたのデータは文字列です。最初に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>

、あなたが選択dinamicallyに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>