私は、次のようにコード化された入力フィールド持って

Question

オブジェクトの一部である要素の属性値を抽出しようとすると：、私は（「deliverByTime」の値を取得する方法を見つけ出すことができないのjQueryを使用して

<input type="radio" name="03794" class=" js-sourcing-option" data-sourcingoption="{"hasBackOrder":true,"isPartial":false,"unsourcedQty":0,"warehouseSequences":[1],"shipments":{"2017-10-12T17:00:00":{"warehouseNumber":101,"deliverByTime":"2017-10-12T17:00:00","numShipments":0,"warehouseQty":0,"backorderQty":1,"qtyByWarehouseInStock":{},"qtyByWarehouseBackorder":{"101":1}}},"sourcedQty":1,"shouldDisplay":true}"> 

をこのフィールドの "data-sourcingoption"属性の中に深く埋もれた "2017-10-12T17：00：00"に等しくなければなりません。私は "のために同じようなことをすれば

$('input.js-sourcing-option')[0]["name"] 
// Output: 03794 

しかし、次を使用して

は、「名前」属性（「[0]」ページでこれらの多くのがあるので、以下にあります）を出力します試してみて、その結果と遊ぶと私は必要なものを抽出するデータsourcingoption」、私はこれを取得：

$('input.js-sourcing-option')[0]["data-sourcingoption"] 
// Output: undefined 

任意の助けをいただければ幸いです...ありがとうございました！

Answer 1

data-sourcingoption - プロパティ値が無効です。 json文字列で隠しdivを追加し、nideの場合は.html()の値を取得します。

  $('input:radio[name=03794]').change(function() { 
 
      \t var radio_val=$(this).val(); 
 
      \t var json_str=$('#div_for_03794_'+radio_val).html(); 
 
      \t var jsonobj = JSON.parse(json_str); 
 
      \t console.log(jsonobj); 
 
     })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 

 
<input type="radio" name="03794" class=" js-sourcing-option" value="1"> 
 
    <div id="div_for_03794_1" style="display:none;"> 
 
     {"hasBackOrder":true,"isPartial":false,"unsourcedQty":0,"warehouseSequences":[1],"shipments":{"2017-10-12T17:00:00":{"warehouseNumber":101,"deliverByTime":"2017-10-12T17:00:00","numShipments":0,"warehouseQty":0,"backorderQty":1,"qtyByWarehouseInStock":{},"qtyByWarehouseBackorder":{"101":1}}},"sourcedQty":1,"shouldDisplay":true} 
 
    </div> 
 
    
 
    
 
    
 
    
 
    
 
    <input type="radio" name="03794" class=" js-sourcing-option" value="2"> 
 
    <div id="div_for_03794_2" style="display:none;"> 
 
     {"hasBackOrder":false,"isPartial":true,"unsourcedQty":0,"warehouseSequences":[1],"shipments":{"2017-10-12T17:00:00":{"warehouseNumber":101,"deliverByTime":"2017-10-12T17:00:00","numShipments":0,"warehouseQty":0,"backorderQty":1,"qtyByWarehouseInStock":{},"qtyByWarehouseBackorder":{"101":1}}},"sourcedQty":1,"shouldDisplay":true} 
 
    </div>

Answer 2

データ属性の構文が無効なようです。

データ属性の外部引用符を一重引用符に変更する方法は次のとおりですか？

<input type="radio" name="03794" class=" js-sourcing-option" data-sourcingoption='{"hasBackOrder":true,"isPartial":false,"unsourcedQty":0,"warehouseSequences":[1],"shipments":{"2017-10-12T17:00:00":{"warehouseNumber":101,"deliverByTime":"2017-10-12T17:00:00","numShipments":0,"warehouseQty":0,"backorderQty":1,"qtyByWarehouseInStock":{},"qtyByWarehouseBackorder":{"101":1}}},"sourcedQty":1,"shouldDisplay":true}'> 

は、さらにあなたの質問に答えるために、（つまりdeliverByTimeを抽出するために）、あなただけのこのまたはあなたが属性を抽出するために使用されるアプローチを使用することができます。私は追加している

console.log($('input.js-sourcing-option').data('sourcingoption').shipments['2017-10-12T17:00:00'].deliverByTime) 

Answer 3

<input type="radio" name="03794" class="js-sourcing-option" data-sourcingoption=""> 
<script type="text/javascript"> 
var Obj = {'hasBackOrder':true, 
'isPartial':false, 
'unsourcedQty':0, 
'warehouseSequences':[1], 
'shipments': { 
    'SomeName': { 
     'warehouseNumber':101, 
     'deliverByTime':'2017-10-12T17:00:00', 
     'numShipments':0, 
     'warehouseQty':0, 
     'backorderQty':1, 
     'qtyByWarehouseInStock': {} 
     , 
     'qtyByWarehouseBackorder': { 
      '101': 1 
     } 
    } 
} 
, 
'sourcedQty':1, 
'shouldDisplay':true 
} 
var element = $('.js-sourcing-option').attr('data-sourcingoption', Obj); 
console.log(Obj.shipments.SomeName.deliverByTime); 

javacriptとdinamiclyの "data-sourcingoption"属性 console.logはdeliverByTimeの出力です

Answer 4

すべて -

私は周り遊んで終わり、このルートを使いました。これは、私はそれがうまくいくと思うなど、潜在的な複数のエントリのために対応するために働いていた：

$('.js-sourcing-option').each(function() { 
    var dataSourcing = $(this).data('sourcingoption'); 
    $.each(dataSourcing.shipments, function(date, shipment) { 
    console.log(shipment.warehouseNumber, new Date(shipment.deliverByTime)); 
    }); 

});