JSONへのHTMLフォームの解析

HTMLフォームをJSONに要約するのに苦労しています。私は利用可能な時間にしか興味がないので、無効になっている値は欲しくない。JSONへのHTMLフォームの解析

console.log($(".venue input:enabled")) 
 

 
// Ideally it could be in a JSON object like: 
 
// { 2: [ "07:00AM", "01:00PM", "02:00PM"], ... }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="venue"> 
 
    <h4>Court 2</h4> 
 
    <div> 
 
     <div> 
 
      <input type="checkbox" name="timeslots[]" id="534584"> 
 
      <label for="534584">07:00 AM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>08:00 AM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>09:00 AM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>10:00 AM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>11:00 AM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>12:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" name="timeslots[]" id="534590"> 
 
      <label for="534590">01:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" name="timeslots[]" id="534591"> 
 
      <label for="534591">02:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>03:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>04:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>05:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>06:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>07:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>08:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>09:00 PM</label> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="venue"> 
 
    <h4>Court 3</h4> 
 
    <div> 
 
     <div> 
 
      <input type="checkbox" name="timeslots[]" id="534584" disabled> 
 
      <label for="534584">07:00 AM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>08:00 AM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>09:00 AM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>10:00 AM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>11:00 AM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>12:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" name="timeslots[]" id="534590"> 
 
      <label for="534590">01:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" name="timeslots[]" id="534591"> 
 
      <label for="534591">02:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>03:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>04:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>05:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>06:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>07:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>08:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>09:00 PM</label> 
 
     </div> 
 
    </div> 
 
</div>

出典

2017-10-01 hendry

あなたは文字列化を使用することができます。

JSON.stringify([1, 'false', false]); // '[1,"false",false]'

それはあなたが何をしたいのですかどうかわかりません。文字列化Here

出典

2017-10-01 07:38:32

ない100％必ずいますが、これを探している程度

詳細。

var times = {}; 
 
$('.venue').each(function(e) { 
 
    var $this = $(this); 
 
    var timeLabel = $this.find('input:enabled').next(); 
 
    var timeArray = []; 
 
    timeLabel.each(function() { 
 
    timeArray.push($(this).text()); 
 
    }) 
 
    times[e + 1] = timeArray; 
 
}) 
 
times = JSON.stringify(times); 
 
console.log(times);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="venue"> 
 
    <h4>Court 2</h4> 
 
    <div> 
 
     <div> 
 
      <input type="checkbox" name="timeslots[]" id="534584"> 
 
      <label for="534584">07:00 AM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>08:00 AM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>09:00 AM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>10:00 AM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>11:00 AM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>12:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" name="timeslots[]" id="534590"> 
 
      <label for="534590">01:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" name="timeslots[]" id="534591"> 
 
      <label for="534591">02:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>03:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>04:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>05:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>06:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>07:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>08:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>09:00 PM</label> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="venue"> 
 
    <h4>Court 3</h4> 
 
    <div> 
 
     <div> 
 
      <input type="checkbox" name="timeslots[]" id="534584" disabled> 
 
      <label for="534584">07:00 AM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>08:00 AM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>09:00 AM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>10:00 AM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>11:00 AM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>12:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" name="timeslots[]" id="534590"> 
 
      <label for="534590">01:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" name="timeslots[]" id="534591"> 
 
      <label for="534591">02:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>03:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>04:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>05:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>06:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>07:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>08:00 PM</label> 
 
     </div> 
 
     <div> 
 
      <input type="checkbox" disabled=""> 
 
      <label>09:00 PM</label> 
 
     </div> 
 
    </div> 
 
</div>

出典

2017-10-01 07:45:00 drip

あなたがHTMLを変更することができない場合は、ここでのオプションを持っている...

var myJson = {}; 

$('div.venue').each(function() { 
    var hours = []; 
    var courtno = $(this).find('h4').text().split(' ')[1]; 

    $(this).find('input:enabled').each(function() { 
     hours.push($(this).next('label').text()); 
    }); 

    myJson[courtno] = hours; 
});

...しかし、あなたができるならば、私はdata-courtnoを追加します会場のdivに、h4で使用したいテキストとは無関係にパラメータを指定します。だから、最初の...

<div class="venue" data-court="2"> 
    <h4>Court 2</h4> 
... 
<div class="venue" data-court="3"> 
    <h4>Court 3</h4> 
...

...追加...とjQueryは以下のようになり

var myJson = {}; 

$('div.venue').each(function() { 
    var hours = []; 

    $(this).find('input:enabled').each(function() { 
     hours.push($(this).next('label').text()); 
    }); 

    myJson[$(this).data('court')] = hours; 
});

出典

2017-10-01 07:45:25

JSONへのHTMLフォームの解析

答えて

関連する問題