CODEWITHSUNDEEP
javascriptjqueryhtmlarrays
Jorge
Jorge

Reputation: 37

display array objects to html table

I'm currently starting on a little project

I have this input which will push items to an array. My problem is everytime I push object using the button it will display some duplicate objects inside my table.

var tasks = [];
var count = 0;

$('#add').click(function() {
  var desc = $.trim($('#list-input').val());
  var id = Date.now();
  item = {};
  item["id"] = id;
  item["description"] = desc;
  tasks.push(item);

  if (!desc) {
    item["id"] = "";
    alert("Input a description");
  }

  var tbl = $("<table/>").attr("id", "mytable");
  $("#mylist").append(tbl);
  for (var i = 0; i < tasks.length; i++) {
    var tr = "<tr>";
    var td1 = "<td>" + tasks[i]["id"] + "</td>";
    var td2 = "<td>" + tasks[i]["description"] + "</td>";

    $("#mytable").append(tr + td1 + td2);
  };

  //clear input field
  $('#list-input').val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <input id="list-input" />
  <button id="add">Add To List</button>
  <button id="delete">Remove From List</button>
</div>
<div class="container">
  <h1>Your List</h1>
  <div id="mylist">

  </div>
  <button id="clear">clear</button>
</div>

Upvotes: 1

Views: 87

Answers (3)

Deep
Deep

Reputation: 9794

Updated the answer you can avoid using array and can achieve the desired by using some appropriate selectors

var count = 0;
var tbl = $("<table/>").attr("id", "mytable");
$("#mylist").append(tbl);
 


$('#add').click(function() {

  var desc = $.trim($('#list-input').val());
  var id = Date.now();

  if (!desc) {
    alert("Input a description");
    return false;
  }

  
   var tr = "<tr>";
   var td1 = "<td>" + id + "</td>";
   var td2 = "<td>" + desc + "</td>";

   $("#mytable").append(tr + td1 + td2);

  //clear input field
  $('#list-input').val('');
});

$('#delete').click(function() {
  
  var desc = $.trim($('#list-input').val());
  
  if (!desc) {
    alert("Input a description");
    return false;
  }
  
  var td = $("td").filter(function() { 
    return $(this).text() == desc;
  });
  
  var row = td.parent();
  
  row.remove();
  
  
  $('#list-input').val('');

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <input id="list-input" />
  <button id="add">Add To List</button>
  <button id="delete">Remove From List</button>
</div>
<div class="container">
  <h1>Your List</h1>
  <div id="mylist">

  </div>
  <button id="clear">clear</button>
</div>

Upvotes: 0

jumper
jumper

Reputation: 74

If you take out the loop and just get the last one in the array you are pushing to, it will solve your problem

EDIT: This way, if you want to use the tasks in some other function, it doesn't clear it out

EDIT 2: Made it to where it would only append the table if no id of that kind was found, makes it cleaner I think

var tasks = [];
var count = 0;

$('#add').click(function() {
  var desc = $.trim($('#list-input').val());
  var id = Date.now();
  item = {};
  item["id"] = id;
  item["description"] = desc;
  tasks.push(item);

  if (!desc) {
    item["id"] = "";
    alert("Input a description");
  }


  if(!$("#mytable").length){ //Checks if mytable id exists
      var tbl = $("<table/>").attr("id", "mytable");
      $("#mylist").append(tbl);
    }

    var tr = "<tr>";
    var td1 = "<td>" + tasks[tasks.length-1]["id"] + "</td>";
    var td2 = "<td>" + tasks[tasks.length-1]["description"] + "</td>";

    $("#mytable").append(tr + td1 + td2);

  //clear input field
  $('#list-input').val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <input id="list-input" />
  <button id="add">Add To List</button>
  <button id="delete">Remove From List</button>
</div>
<div class="container">
  <h1>Your List</h1>
  <div id="mylist">

  </div>
  <button id="clear">clear</button>
</div>

Upvotes: 1

Chris Peacock
Chris Peacock

Reputation: 4686

You have the initialisation of the table repeated every time an addition is made.

Try this instead:

var tasks = [];
var count = 0;

$(function(){
    var tbl=$("<table/>").attr("id","mytable");
	$("#mylist").append(tbl);
	for(var i=0;i<tasks.length;i++)
	{
	    var tr="<tr>";
	    var td1="<td>"+tasks[i]["id"]+"</td>";
	    var td2="<td>"+tasks[i]["description"]+"</td>";
	    
	   $("#mytable").append(tr+td1+td2);
	};
});

$('#add').click(function(){
	var desc = $.trim($('#list-input').val());
	var id = Date.now();
	item = {};
	item ["id"] = id;
	item ["description"] = desc;
	tasks.push(item);

	if (!desc){
		item ["id"] = "";
		alert("Input a description");
	}

	var tr="<tr>";
	var td1="<td>"+item["id"]+"</td>";
	var td2="<td>"+item["description"]+"</td>";
	    
    $("#mytable").append(tr+td1+td2);     

	//clear input field
	$('#list-input').val('');
});
<div class="container">
		<input id="list-input" />
		<button id="add">Add To List</button>
		<button id="delete">Remove From List</button>
	</div>
	<div class="container">
		<h1>Your List</h1>
		<div id="mylist">

		</div>
		<button id="clear">clear</button>
	</div>

Upvotes: 0

Related Questions