jQuery - Erhalte ausgewählten Wert von JSON-Objekt

Question

Was ich versuche zu tun ist, dass wenn eine Option ausgewählt ist (zum Beispiel # 4) ich das Datum aus dem JSON-Objekt, so dass es rendern würde: "Montag 26. Dezember". Ich bemühe mich, dies zu zeigen - weiß jemand, wie ich das bitte tun könnte?

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

Der Wert in data-delivery-date Attribut ist eine Zeichenfolge - JSON.parse() verwenden Sie es in ein Objekt zu konvertieren - siehe Demo unter:

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

Ihre Daten ist eine Zeichenfolge. Sie müssen zunächst in ein JSON-Objekt konvertieren und dann die Punkt- oder Array-Notation verwenden, um auf die Elemente zuzugreifen.

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

Ich habe aktualisiert Ihre Geige, so dass Es analysiert Ihre json-Zeichenfolge und verwendet dann das dataObj [4], um das Datum anzuzeigen.

var dataObj = jQuery.parseJSON(data); 

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

Answer 4

Verwenden JSON.parse die json Zeichenfolge analysieren und dann können Sie mit einem for das Objekt Schleife über. Versuchen Sie folgendes:

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

Auch, wenn Sie die Werte aus JSON in die Auswahl dinamically anhängen möchten, und filtern Sie die leere Werte, können Sie es wie folgt tun:

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