OnClick on element populate an array with JS

Question

So, I have different elements like this:

<div data-action="change_status" data-date="2019-03-02" data-roomid="45" data-status="Close">Change status</div>
<div data-action="change_status" data-date="2019-03-02" data-roomid="46" data-status="Open">Change status</div>
<div data-action="change_status" data-date="2019-03-03" data-roomid="46" data-status="Close">Change status</div>
<div data-action="change_status" data-date="2019-03-03" data-roomid="47" data-status="Open">Change status</div>

For each click on element, I put the id of the element and some other informations in an array.

var arr = [];

$('[data-action="change_status"]').click(function(event) {
    $(this).data('status', 'newValue');

    arr.push({
        current_status: $(this).data('status'),
        current_date: $(this).data('date'),
        current_roomid: $(this).data('roomid')
    });
});

My problem is if the user click two times on the same element, it creates two rows in this array.

How can I check that an id already exists into the array and how can I update it with the last clicked value ?

Finally, I would like to pass this array in Ajax to a PHP page.

Thanks a lot.

You could avoid the problem by simply putting a class on the elements to be used in the array, but only actually create the array at the point it's going to be used - in your case when the AJAX request is sent. — Rory McCrossan
– Rory McCrossan, Commented Mar 5, 2019 at 13:41

Mouser · Accepted Answer · 2019-03-05 14:03:46Z

We can easily do this using your roomid and Array.prototype.find

Array.prototype.find loops over the array and checks if any value is found. If so it returns the array item.

If you click change status it will say undefined the first time and the array entry the second and after.

var arr = [];

$('[data-action="change_status"]').click(function(event) {
    $(this).data('status', 'newValue');

    const arrElement = arr.find( (element) => {
      return element.current_roomid == $(this).data('roomid')
    });
    if (isInArray == undefined)
    {
      
      arr.push({
          current_status: $(this).data('status'),
          current_date: $(this).data('date'),
          current_roomid: $(this).data('roomid')
      });
    }
    else
    {
      //update
      arrElement["current_status"] = $(this).data('status');
      arrElement["current_date"] = $(this).data('date');
      arrElement["current_roomid"] = $(this).data('roomid');
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-action="change_status" data-date="2019-03-02" data-roomid="45" data-status="Close">Change status</div>
<div data-action="change_status" data-date="2019-03-02" data-roomid="46" data-status="Open">Change status</div>
<div data-action="change_status" data-date="2019-03-03" data-roomid="46" data-status="Close">Change status</div>
<div data-action="change_status" data-date="2019-03-03" data-roomid="47" data-status="Open">Change status</div>

I however would suggest are more SQL-type approach here. Since you have roomid, why not make it the primary key. With this method we can skip a lot of code.

var roomObject = {};

$('[data-action="change_status"]').click(function(event) {
    $(this).data('status', 'newValue');
    const roomId = $(this).data('roomid');
    const dateValue = $(this).data('date');
    const statusValue = $(this).data('status');
    roomObject[roomId] = { current_status: statusValue,
                    current_date: dateValue,
                    current_roomid: roomId};
    //of course roomId is a little redundant now, but let's keep it there.
    console.log(roomObject);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-action="change_status" data-date="2019-03-02" data-roomid="45" data-status="Close">Change status</div>
<div data-action="change_status" data-date="2019-03-02" data-roomid="46" data-status="Open">Change status</div>
<div data-action="change_status" data-date="2019-03-03" data-roomid="46" data-status="Close">Change status</div>
<div data-action="change_status" data-date="2019-03-03" data-roomid="47" data-status="Open">Change status</div>

mplungjan · Accepted Answer · 2019-03-05 13:51:14Z

This is simpler. Gather the data when you submit

$('[data-action="change_status"]').on("click", function(event) {
  $(this).data('status', 'newValue');
  $(this).text('newValue');
  $(this).toggleClass("newValue")
});

$("#send").on("click", function() {

  let changes = [];
  $('[data-status]').each(function() {
    if ($(this).data("status") === "newValue") changes.push({
      "id": $(this).data("roomid"),
      "date": $(this).data("date")
    })
  })
  console.log(changes)
});

.newValue {
  background-color: green
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-action="change_status" data-date="2019-03-02" data-roomid="45" data-status="Close">Change status</div>
<div data-action="change_status" data-date="2019-03-02" data-roomid="46" data-status="Open">Change status</div>
<div data-action="change_status" data-date="2019-03-03" data-roomid="46" data-status="Close">Change status</div>
<div data-action="change_status" data-date="2019-03-03" data-roomid="47" data-status="Open">Change status</div>

<button type="button" id="send">Send</button>

Taras Kovalenko · Accepted Answer · 2019-03-05 14:00:41Z

0

you can try next stuff:

if (arr.filter(e => e.current_roomid === $(this).data('roomid')).length === 0) {
  arr.push({
     current_status: $(this).data('status'),
     current_date: $(this).data('date'),
     current_roomid: $(this).data('roomid')
   });
}

edited Mar 5, 2019 at 14:00

answered Mar 5, 2019 at 13:40

Taras Kovalenko

2,3933 gold badges27 silver badges51 bronze badges

Collectives™ on Stack Overflow

OnClick on element populate an array with JS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related