CODEWITHSUNDEEP
javascriptjqueryjson
Jim22150
Jim22150

Reputation: 511

Splice JSON array JavaScript

I created a function for reusing the splice feature for javascript arrays however, after I run it once, it cannot be reused. 

var removePerson = function(d, person_id) { 
  var person_index = d.findIndex(i => i.id == person_id);
  d.splice(person_index, 1);
  return d;
};

I am not getting console errors. I do not know how to debug it. Here is my JSFiddle.

If you run the example, you will see you can remove any 1 person from the list, but when you try to remove either of the remaining 2, nothing happens (e.g. console errors, console response). Any idea how I can support reuse for my removePerson() function?

Upvotes: 0

Views: 751

Answers (2)

Nobita
Nobita

Reputation: 330

Try this code:JSFiddle

or the code snippet:

var removePerson = function(d, person_id) {	
	var person_index = d.findIndex(i => i.id == person_id);
	d.splice(person_index, 1);
  return d;
};

var populateList = function(d) {
	$("#load").empty();
	var new_rows;
	for(var i = 0; i < d.length; i++) {
		new_rows += "<tr>" + 
			"<td>" + d[i].id + "</td>" +
			"<td>" + d[i].name + "</td>" +
			"<td>" + d[i].phone + "</td>" +
			"<td><button class='delete' data-id='" + d[i].id + "'>delete</button></td>" +
			"</tr>";
	}
	$("#load").append(new_rows);
};


$(document).ready( function() {

		// initial list
    var data = [
    	{
        "id": 1001,
        "name": "Andy Roy",
        "phone": "555-555-5551"
      },
      {
        "id": 1002,
        "name": "Bob Dillon",
        "phone": "555-555-5552"
      },
      {
        "id": 1003,
        "name": "Carl Sagan",
        "phone": "555-555-5553"
      }
    ];
		
    //initial populate list
    populateList(data);
    
    // delete event
    $("table").on("click",".delete", function() {
      var delete_sel = $(this).attr("data-id");
      populateList(removePerson(data, delete_sel));
    });
    
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border>
<thead>
<tr><th>ID</th><th>Name</th><th>Phone</th></tr>
</thead>
<tbody id="load"></tbody>
</table>

 $("table").on("click",".delete", function() {
  var delete_sel = $(this).attr("data-id");
  populateList(removePerson(data, delete_sel));
});

Upvotes: 2

yqlim
yqlim

Reputation: 7080

Your solution doesn't work because of how your populateList works.

In your populateList, you have a line:

$('#load').empty();

This line empties the table and removes the buttons attached with click event listener.

Then, you add completely new button.delete, which aren't attached with any event listener.

To solve this, you can put your .on() into populateList function.

var populateList = function(d) {
    $("#load").empty();
    var new_rows;
    for(var i = 0; i < d.length; i++) {
        new_rows += "<tr>" + 
            "<td>" + d[i].id + "</td>" +
            "<td>" + d[i].name + "</td>" +
            "<td>" + d[i].phone + "</td>" +
            "<td><button class='delete' data-id='" + d[i].id + "'>delete</button></td>" +
            "</tr>";
    }
    $("#load").append(new_rows);

    // delete event
    $(".delete").on("click", function() {
      var delete_sel = $(this).attr("data-id");
      populateList(removePerson(d, delete_sel));
    });
};

Here's a working jsFiddle.

Alternatively, you can use solution from this answer (which is a cleaner solution imo).

$("table").on("click",".delete", function() {
  var delete_sel = $(this).attr("data-id");
  populateList(removePerson(data, delete_sel));
});

More explanation on why his answer works on jQuery documentation (Look at the selector parameter).

Upvotes: 3

Related Questions