CODEWITHSUNDEEP
javascriptjqueryarrays
Testy
Testy

Reputation: 301

OnClick on element populate an array with JS

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.

Upvotes: 1

Views: 964

Answers (3)

Mouser
Mouser

Reputation: 13304

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>

Upvotes: 1

Taras Kovalenko
Taras Kovalenko

Reputation: 2393

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')
   });
}

Upvotes: 0

mplungjan
mplungjan

Reputation: 177786

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>

Upvotes: 0

Related Questions