Parsing data from a div tag using Jquery

Question

I have HTML like this:

<div data-suppattrtype="test1" class="testclass">
  <p>
    Hello Test1
  </p>
</div>
<div data-suppattrtype="test2" class="testclass">
  <p></p>
    <div class="LotMoreContents">
      <p>
        First Time
      </p>
      <div id="Time">
        <input type="text" id="start-time" value="123"/>
        <input type="text" id="end-time" value="456"/>
      </div>
      <p>
        Second Time
      </p>
      <div id="Time">
        <input type="text" id="start-time" value="789"/>
        <input type="text" id="end-time" value="012"/>
      </div>
    </div>

</div>

I am trying to extract the various start & end times which are present in the div test2. What I am trying to do is to get all the times and store it in a JSON object similiar to this:

[{"startTime": "123", "endTime": "456"}, {"startTime":"789", "endTime": "012"}]

To do this, I am able to get the innerHTML of test2 via this:

$( document ).ready(function () {
  var $allDivs = $(this).find(".testclass");
  $allDivs.each(function() {
    var $suppAttrType = $(this).data('suppattrtype');
    if($suppAttrType === "test2") {
        /*Parse the the time objects within test2*/
    }
  });
});

I can access the HTML via $(this)[0] but I am unable to proceed further.

Are you trying to get the values of the input elements? If you change their ids to be unique you can just use $('input#first-start-time').val() to get the value. — hsimah
– hsimah, Commented Sep 29, 2017 at 0:59

Duc Filan · Accepted Answer · 2017-09-29 04:49:36Z

3

First

You should only assign id for elements that are unique to the page. Otherwise, use class (as what I modified on the below snippet)

id="Time" to class="Time", id="start-time" to class="start-time" and id="end-time" to class="end-time"

Second

You need JSON.stringify() function to converts a JavaScript value to a JSON string.

$( document ).ready(function () {
  var $serializedTimes = [];

  var $allDivs = $(this).find(".testclass");
  $allDivs.each(function() {
    var $suppAttrType = $(this).data('suppattrtype');
    if($suppAttrType === "test2") {
      $(this).find(".Time").each(function(){
        var startTime = $(this).find(".start-time").val();
        var endTime   = $(this).find(".end-time").val();

        $serializedTimes.push({startTime: startTime, endTime: endTime});
      });
    }
  });

  console.log(JSON.stringify($serializedTimes));
});

$(document).ready(function() {
  var serializedTimes = [];
    
  $(".testclass[data-suppattrtype='test2']").each(function(){
    $(this).find(".Time").each(function(){
      var startTime = $(this).find(".start-time").val();
      var endTime   = $(this).find(".end-time").val();
      
      serializedTimes.push({startTime: startTime, endTime: endTime});
    });
  });  
  
  console.log(JSON.stringify(serializedTimes));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-suppattrtype="test1" class="testclass">
  <p>
    Hello Test1
  </p>
</div>
<div data-suppattrtype="test2" class="testclass">
  <p></p>
    <div class="LotMoreContents">
      <p>
        First Time
      </p>
      <div class="Time">
        <input type="text" class="start-time" value="123"/>
        <input type="text" class="end-time" value="456"/>
      </div>
      <p>
        Second Time
      </p>
      <div class="Time">
        <input type="text" class="start-time" value="789"/>
        <input type="text" class="end-time" value="012"/>
      </div>
    </div>

</div>

edited Sep 29, 2017 at 4:49

answered Sep 29, 2017 at 0:48

Duc Filan

7,2073 gold badges24 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user1692342 Over a year ago

is it possible to do it only when the attribute is test2?

user1692342 Over a year ago

I meant is it possible using var myContent = $(this).data('suppattrtype'); the myContent variable? Because I want to target only this part of the div, and there might exist similar tags in other blocks of the code as well.

Duc Filan Over a year ago

What do you mean? I don't get it.

user1692342 Over a year ago

in myContent I have the HTML object right? Is it possible to just search for the time attribute within that? $(".testclass[data-suppattrtype='test2']") will search in the entire html file right? I would prefer doing the search for time within the content I have already retrieved

Duc Filan Over a year ago

Yes. It will search for all elements with class name testclass and data-suppattrtype test2. But $(this).find(".Time").each( will search within the element testclass and data-suppattrtype test2 only. Your var $allDivs = $(this).find(".testclass"); will retrieve the entire HTML file too.

|

Collectives™ on Stack Overflow

Parsing data from a div tag using Jquery

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related