Develop Reference

Angular ng-repeat doesn't show items

I have worked with angularjs before but for some reason I cannot seem to get it to iterate through my array.
If I look in browser's console I can see that its not empty
Here is my code.
AngularJS
$scope.Clients = [];
$scope.LoadClients = function () {
$.get('/Client/GetClientList').then((d) => {
angular.copy(d.results, $scope.Clients);
console.log($scope.Clients);
$("#clientTable").DataTable();
});
};
HTML
<table class="table table-bordered" id="clientTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Active</th>
<th>Nr. Branches</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="client in Clients">
<td ng-bind="client.Name"></td>
<td class="text-center" ng-bind="client.Active"></td>
<td class="text-center" ng-bind="client.Branches.length" ng-click="ViewBranches($index)"></td>
<td class="text-center">
<div class="btn-group" role="group" aria-label="">
<button type="button" class="btn btn-primary btn-xs" ng-click="ViewClient($index)">
<span class="fa fa-eye"></span>
</button>
<button type="button" class="btn btn-warning btn-xs" ng-click="ViewBranches($index)">
<span class="fa fa-list"></span>
</button>
<button type="button" class="btn btn-danger btn-xs" ng-click="DeleteClient($index)">
<span class="fa fa-trash"></span>
</button>
</div>
</td>
</tr>
</tbody>
</table>

Jquery id returning as undefined

I am trying to get id of a selected row in a table.
The rows are generated based on number of objects in foodList (JSP page).
JSP Code
<tbody>
<c:forEach items="${foodList}" var="det">
<tr class="clickable-row">
<td class="pt-0 pb-0"><button id="${det.b_No}" style="font-size:8px" class="btn btn-danger delete btn-sm pt-1 pb-1 mb-0" data-title="Delete"></button></td>
<td><input type="text" class="form-control" value="${det.wt}" /></td>
</c:forEach>
</tr>
</c:forEach>
</tbody>
JavaScript Code
$('#table_id').on('click', '.clickable-row', function(event) {
alert($(this).find(".pt-0").html());
alert($(this).find(".pt-0").attr("id"));
});
First alert is displaying the text as follows which is as expected,
<button id="1015" style="font-size:8px" class="btn btn-danger delete btn-sm pt-1 pb-1 mb-0" data-title="Delete"></button>
But for the second alert I am expecting the id (1015) but showing as "undefined".

the id is in button element so use :
alert($(this).find(".pt-0").find("button").attr("id"));
or simply direct access
alert($(this).find(".pt-0 button").attr("id"));
See below snippet :
$('#table').on('click', '.clickable-row', function(event) {
alert($(this).find(".pt-0").html());
alert($(this).find(".pt-0 button").attr("id"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
<tr class="clickable-row">
<td class="pt-0 pb-0"><button id="1508" style="font-size:8px" class="btn btn-danger delete btn-sm pt-1 pb-1 mb-0" data-title="Delete">del</button></td>
</tr>
</table>

Jquery - Limit insertion of an element

I am trying to create a repeater field within my table.
Basically I want the following behavior:
If no "Test Product2" has been added to the table, the user cannot add another field below.
If a "Test Product2" has been added to the table, the user is allowed to add a field below and can add another "Test Product2" next to the new blue button.
The below an example of the second case for the behaviour.
$(".btn.btn-dark.btn-sm.product2").on("click", this.clickDispatcherTable.bind(this))
//$(".btn.btn-primary.btn-sm").on("click", this.ourClickDispatcher.bind(this));
$("#miningTable").on("click", ".btn.btn-primary.btn-sm.product2", this.ourClickDispatcher.bind(this));
function clickDispatcherTable(e) {
let plusButton = $(e.target).closest(".btn.btn-dark.btn-sm")
if (plusButton.hasClass("product2")) {
let plusButtonParent = plusButton[0].parentElement.parentElement;
plusButtonParent.insertAdjacentHTML('afterend', `
<tr>
<td></td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product2
</button>
</td>
</tr>
`)
}
}
function ourClickDispatcher(e) {
let targetButton = $(".btn.btn-primary.btn-sm.product2")
let targetButtonParent = targetButton[0].parentElement
targetButtonParent.insertAdjacentHTML('beforebegin', `
<td>
<img src="" alt="" height="42" width="42">
<a href="">
Test Product2
</a>
</td>
`)
targetButton.attr('class', 'btn btn-danger btn-sm product2'); // change button class to red
targetButton.text(function() {
return $(this).text().replace("Add", "Edit");
});
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="miningTable" style="float: left;" class="table table-bordered">
<tbody>
<tr>
<td>Product 2</td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product2
</button>
<button type="button" class="btn btn-dark btn-sm product2">+</button>
</td>
</tr>
<tr>
<td>Product 3</td>
<td>
<button type="button" data-exists="product3" class="btn btn-primary btn-sm product3">
Add Product3
</button>
</td>
</tr>
<tr>
<td>Product 4</td>
<td>
<button type="button" data-exists="product4" class="btn btn-primary btn-sm product4">
Add Product4
</td>
</tr>
</tbody>
</table>
As you can see in the above example a user can add multiple fields as he want. There is currently no restriction.
Any suggestions how to restrict the user for adding a field if a condition is not satisfied?
I appreciate your reply!

If I correctly understand your problem, think this is your answer
function clickDispatcherTable(e) {
let plusButton = $(e.target).closest(".btn.btn-dark.btn-sm")
let sw = true;
$( "tbody tr" ).each(function(index, row) {
if(row.children.length != 3) {
sw = false;
}
});
if (sw) {
$('tbody tr:last').after(`
<tr>
<td></td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product2
</button>
</td>
</tr>`)
}
}

Passing values to jquery function on click of button

I have the following table in my HTML page, I'm a newbie to Jquery
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Start Date</th>
<th>Severity</th>
<th>Edit Data</th>
</tr>
</thead>
<tbody id="myTable">
<tr style="display: table-row;">
<td>New Rule</td>
<td>New Rule</td>
<td>2017-04-04</td>
<td>High</td>
<td>
<button class="btn btn-primary btn-sm editBtn">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
Edit
</button>
<button onclick="window.location ="/EmployeeSpringMVC/delRule/5"" data-method="delete" class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
Delete
</button>
</td>
</tr>
</tbody>
</table>
As you can see there is an edit button I can write a function to recognize clicks to this button as given below
$('.editBtn').click(function(){
alert("test");
});
I also need the data in the particular row for some processing in the function. How can I get this data from the table row. Please feel free to suggest if there is a better way.
I saw the question here but I did not understand this statement of the answer.
var id = $(this).attr('id');
How is the id passed to the function. What specifies the id in this.
<input id="btn" type="button" value="click" />

Because you probably need all <td> in row, except current one I would suggest to use siblings() method of closest <td>:
$('.editBtn').click(e => {
e.preventDefault();
const $td = $(e.target).closest('td');
const fields = Array.from($td.siblings('td').map((i, e) => $(e).text()));
console.log(fields);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Start Date</th>
<th>Severity</th>
<th>Edit Data</th>
</tr>
</thead>
<tbody id="myTable">
<tr style="display: table-row;">
<td>New Rule</td>
<td>New Rule</td>
<td>2017-04-04</td>
<td>High</td>
<td>
<button class="btn btn-primary btn-sm editBtn">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
Edit
</button>
<button onclick="window.location ="/EmployeeSpringMVC/delRule/5"" data-method="delete" class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
Delete
</button>
</td>
</tr>
</tbody>
</table>

Retrieving Array of Objects Sent Using AJAX in JSP

With respect to this question pass array of objects to jsp, how do you retrieve the results in JSP?
The question is, I have this in my Javascript:
data = [
{
id: "333",
date: "22/12/2015"
},
{
id: "333",
date: "22/12/2015"
}]
$.post(eval.jsp, {data:data}, function(){}, "json");
How do i recover data in eval.jsp. I tried
request.getParameterValues("data");
But the value returned is null. This is not the value passed of course as can be seen in the headers (using Chrome).

You can use a dynamic table or Foreach to show data in it .
Example:
<table id="allStudent" class="table table-bordered">
<thead>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>studentCode</th>
<th>Major</th>
<th>FatherName</th>
<th>id</th>
<th>Action</th>
</tr>
</thead>
<tbody id="tmplBody">
<script id="scriptTmp">
<tr id="deleteTr" >
<td>
${firstName}
<td>
${lastName}
</td>
<td>
${studentCode}
</td>
<td>
${major}
</td>
<td>
${fatherName}
</td>
<td>
${id}
</td>
<td>
<button id="updateStudent" class="btn btn-success"><i class="fa fa-pencil" style="padding-right: 10px;"></i>
Update
</button>
<a href="#" type="button" class="btn btn-danger deletebtn" role="button" onclick="deleteSt(${id})"><i class="fa fa-trash" style="padding-right: 10px;"></i>
Delete
</a>
<button class="btn btn-info" role="button"><i class="fa fa-check" style="padding-right: 10px;"></i>Course
Selection
</button>
</td>
</tr>
</script>
</tbody>
</table>
</div>