Create JSON array from DOM and JQuery

Question

I am trying an array in JavaScript with the following format by querying the DOM via JQuery:

 [
       {
         "start": moment("10/03/2017","DD/MM/YYYY"),
         "end": moment("18/03/2017", "DD/MM/YYYY")
       },
       {
         "start": moment("01/04/2017","DD/MM/YYYY"),
         "end": moment("05/04/2017", "DD/MM/YYYY")
       },
       {
         "start": moment("11/04/2017","DD/MM/YYYY"),
         "end": moment("15/04/2017", "DD/MM/YYYY")
       }
     ]

I tried to create a JavaScript Object in JQueries each() function to do this but it is not working:

var avail_fruits = Array();
    $(".avails").each(function(i, objer) {
        //test
        var ndate_group = $(objer).val().split(",");
        var obj_date = new Object();
        obj_date.start = moment(ndate_group[0],"DD/MM/YYYY");
        obj_date.end = moment(ndate_group[0],"DD/MM/YYYY");
        console.log(obj_date);
        avail_fruits.push(obj_date);
    });

I am not using any html, I have to put the json variable in disable range in this plugin. preview.codecanyon.net/item/calentim-date-time-range-picker/… — Intekhab Khan
– Intekhab Khan, Commented May 19, 2019 at 5:47
I mean the $(".avails"). What are you getting when you var ndate_group = $(objer).val().split(","); — Eddie
– Eddie, Commented May 19, 2019 at 5:48
<input type="hidden" name="avail" class="avails" value="05/18/2019,07/30/2019"> — Intekhab Khan
– Intekhab Khan, Commented May 19, 2019 at 5:53
What is not working? What are you getting in avail_fruits? Code looks fine. It should be working. Just for obj_date.end = should have ndate_group[1] instead of ndate_group[0]. — Karan
– Karan, Commented May 19, 2019 at 6:04

Dacre Denny · Accepted Answer · 2019-05-19 06:06:52Z

1

If I understand your question correctly, you can achieve what is required by extracting the start and end dates as strings from each <input/> element with jQuery like this:

const [start, end] = $(this).val().split(',');

You can then parse those strings via moment's utc() method as shown below:

/* Declare results array */
const avail_fruits = [];

/* Iterate each input with avails class*/
$('.avails').each(function() {
  
  /* Extract start,end date string from input value */
  const [start, end] = $(this).val().split(',');
  
  /* Parse start,end date strings with moment. Use utc()
  to avoid timezone conversion */
  avail_fruits.push({
    start : moment.utc(start, 'DD/MM/YYYY'),
    end : moment.utc(end, 'DD/MM/YYYY')
  });
  
});

console.log(avail_fruits)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

<input type="hidden" name="avail" class="avails" value="10/03/2017,18/03/2017"> 
<input type="hidden" name="avail" class="avails" value="01/04/2017,05/04/2017"> 
<input type="hidden" name="avail" class="avails" value="11/04/2017,15/04/2017">

answered May 19, 2019 at 6:06

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

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

2 Comments

Intekhab Khan Over a year ago

Thanks, I am doing the basic mistake for not pushing directing json instead, i was creating object. :(

Dacre Denny Over a year ago

@IntekhabKhan no worries - glad I could help!

Collectives™ on Stack Overflow

Create JSON array from DOM and JQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related