CODEWITHSUNDEEP
jqueryarrays
PacPac
PacPac

Reputation: 261

Update an particular element in an array if it already exist with jQuery

During a .click action on element, I create an array like this:

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

So for each click on elements, I put the id of the element and some other informations in the array.

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 ?

Here's my HTML:

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

Thanks.

Upvotes: 0

Views: 342

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370789

Use an object indexed by something unique to each element instead of an array, for example, using the roomid:

const obj = {};

$('[data-action="change_status"]').click(function(event) {
    $(this).data('status', 'newValue');
    const current_roomid = $(this).data('roomid');
    obj[current_roomid] = {
        current_status: $(this).data('status'),
        current_date: $(this).data('date'),
        current_roomid
    };
});

If nothing is reliably constant enough, you can use a Map instead, which allows for non-primitive keys (such as elements):

const map = new Map();

$('[data-action="change_status"]').click(function(event) {
  $(this).data('status', 'newValue');
  const current_roomid = $(this).data('roomid');
  map.set(this, {
    current_status: $(this).data('status'),
    current_date: $(this).data('date'),
    current_roomid
  });
});

Live snippet:

const map = new Map();

$('[data-action="change_status"]').click(function(event) {
  $(this).data('status', 'newValue');
  const current_roomid = $(this).data('roomid');
  map.set(this, {
    current_status: $(this).data('status'),
    current_date: $(this).data('date'),
    current_roomid
  });
  console.log(map.size);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dateClose" data-action="change_status" data-date="2019-03-02" data-roomid="45" data-status="Close">Change status</div>
<div class="dateClose" data-action="change_status" data-date="2019-03-02" data-roomid="46" data-status="Open">Change status</div>
<div class="dateClose" data-action="change_status" data-date="2019-03-03" data-roomid="46" data-status="Close">Change status</div>
<div class="dateClose" data-action="change_status" data-date="2019-03-03" data-roomid="47" data-status="Open">Change status</div>

Upvotes: 2

Related Questions