Develop Reference

Edit method not working properly in angular

I have displayed the data from API. But I can't edit the data properly. When I try to edit a single row it will automatically hide the others row. Here is my code. Please check
HTML
<thead>
<tr>
<th><strong>Name</strong></th>
<th><strong>Consent Type</strong></th>
<th><strong>Updated At</strong></th>
<th><strong>Status</strong></th>
<th><strong>Content</strong></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let consent of SystemConsent">
<td *ngIf="!editorStatus">{{consent.fileName}}</td>
<td *ngIf="editorStatus && consent.consentFileId === selectedEditCellId"><input type="text" value="{{consent.fileName}}" class="form-control"></td>
<td *ngIf="!editorStatus">{{consent.type}}</td>
<td *ngIf="editorStatus && consent.consentFileId === selectedEditCellId"><input type="text" value="{{consent.type}}" class="form-control"></td>
<td>{{consent.updatedAt}}</td>
<td *ngIf="!editorStatus">{{consent.status}}</td>
<td *ngIf="editorStatus && consent.consentFileId === selectedEditCellId"><input type="text" value="{{consent.status}}" class="form-control"></td>
<td *ngIf="!editorStatus" [innerHTML]="consent.content"></td>
<td *ngIf="editorStatus && consent.consentFileId === selectedEditCellId">
<ckeditor name="htmlEditor" [config]="config" [editor]="Editor" [(ngModel)]="consent.content" skin="moono-lisa" language="en">
</ckeditor>
</td>
<td><button class="btn trans-btn list-head-btn ng-star-inserted btn-gradient" (click)="changeEditor(consent.consentFileId)">Edit</button></td>
<td><button [disabled]="!editorStatus" class="btn trans-btn list-head-btn ng-star-inserted btn-gradient" (click)="getEditorValue(consent.consentFileId)">Save</button></td>
</tr>
</tbody>
Typescript
SystemConsent: any = [];
public selectedEditCellId;
getAdminSystemPrefrences() {
this.adminDashboardService.getSystemPreferences().then(resp => {
this.SystemConsent = resp['data'].consent;
});
}
changeEditor(cellId) {
this.selectedEditCellId = cellId;
this.editorStatus = true;
console.log(this.selectedEditCellId);
}
getEditorValue(cellId) {
this.selectedEditCellId = cellId;
this.editorStatus = false;
}
Please help me to reach out this issue..

This is because when you click 'edit', the editorStatus gets set to true and the selectedEditCellId gets set to the id of the item / row that is currently being edited.
If we look at these lines:
<td *ngIf="!editorStatus">{{consent.fileName}}</td>
<td *ngIf="editorStatus && consent.consentFileId === selectedEditCellId"><input type="text" value="{{consent.fileName}}" class="form-control"></td>
We notice that for the items that are NOT being edited, neither of these *ngIfs evaluate to true - because:
editorStatus is set to true
consent.consentFileId is not equal to the selectedEditCellId for the row item.
This is also the reason why the {{consent.updatedAt}} is being displayed for the other rows.
A possible fix to the problem would be to change:
<td *ngIf="!editorStatus">{{consent.fileName}}</td>
to
<td *ngIf="!editorStatus || consent.consentFileId !== selectedEditCellId">{{consent.fileName}}</td>

Wrong Result Calculate value with checkbox use Jquery

Now im doing some Calculate Checkbox Value Using JQuery and PHP code. The mechanism is, when User checked the checkbox, it will sum the price. I implemented a formula for JQuery but the result it not correct. here is my code
JQUERY
<script>
$(function() {
$('.dealprice').on('input', function(){
const getItemPrice = $(this).closest("tr").find('input[name=itemprice]').val();
var eachPrice = 0;
$('.dealprice:checkbox:checked').each(function(){
eachPrice += isNaN(parseInt(getItemPrice)) ? 0 : parseInt(getItemPrice);
});
$("#totalDeal").text(eachPrice.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
});
});
</script>
for more detail. i made a sample on this site https://repl.it/#ferdinandgush/Sum-Calculate-checkbox just click "run" button and you can able to test it. i need to display correct calculate following that table format
Please help.

You just have to define getItemPrice inside the loop, otherwise you are calculating it only once for the item that was clicked, instead of doing it for every item.
$(function() {
$('.dealprice').on('input', function(){
var eachPrice = 0;
$('.dealprice:checkbox:checked').each(function(){
const getItemPrice = $(this).closest("tr").find('input[name=itemprice]').val();
eachPrice += isNaN(parseInt(getItemPrice)) ? 0 : parseInt(getItemPrice);
});
$("#totalDeal").text(eachPrice.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
});
});
<table class="tg">
<thead>
<tr>
<th class="tg-qh0q">Item</th>
<th class="tg-qh0q">Price</th>
<th class="tg-qh0q">Deal</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-0lax">Book</td>
<td class="tg-0lax">$ 10 <input type="hidden" name="itemprice" value="10"></td>
<td class="tg-0lax"><input type="checkbox" class="dealprice" name="deal[12][0]"></td>
</tr>
<tr>
<td class="tg-0lax">Pencil</td>
<td class="tg-0lax">$ 5 <input type="hidden" name="itemprice" value="5"></td>
<td class="tg-0lax"><input type="checkbox" class="dealprice" name="deal[12][1]"></td>
</tr>
<tr>
<td class="tg-0lax">Pen</td>
<td class="tg-0lax">$ 8 <input type="hidden" name="itemprice" value="8"></td>
<td class="tg-0lax"><input type="checkbox" class="dealprice" name="deal[12][2]"></td>
</tr>
<tr>
<td class="tg-amwm" colspan="2">Total</td>
<td class="tg-0lax"><span id="totalDeal">0</span></td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

You have to put the getItemPrice inside of the function of where you get its checked. Please check the following code:
$(function() {
$('.dealprice').on('input', function(){
var eachPrice = 0;
$('.dealprice:checkbox:checked').each(function(){
const getItemPrice = $(this).closest("tr").find('input[name=itemprice]').val();
eachPrice += isNaN(parseInt(getItemPrice)) ? 0 : parseInt(getItemPrice);
});
$("#totalDeal").text(eachPrice.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
});
});
Also check this repl https://repl.it/repls/LavenderAgonizingRoot

How do i iterate over array of json objects using ng-repeat in angular js?

i am trying to iterate over array of objects in angular js but i am getting error as cannot set property of undefined even though i had defined it.
Please find my code below :
var app = angular.module('myDemoApp', []);
app.service('MyTaskService', function($http) {
var services = {
userList: userList,
};
function userList(req) {
if (req == undefined)
req = {};
return $http({
url: "https://jsonplaceholder.typicode.com/posts",
method: "GET",
data: req
});
}
return services;
});
app.controller('MyTaskController', function($scope, MyTaskService) {
$scope.resp = {};
$scope.getPrjDetails = function() {
try {
var promise = MyTaskService.userList();
promise.then(function (sucResp) {
try {
$scope.resp = sucResp.data;
} catch (exception) {
console.log(exception);
return;
}
}
, function (errResp) {
console.log(errResp);
return;
});
} catch (exception) {
console.log(exception);
return;
}
}
});
Find my template :
<ul>
<li ng-repeat="myData in resp">{{myData.id}}</li>
</ul>
how can i iterate over all the json values and display in my textboxes in template or my list?
<div ng-app="myDemoApp">
<div ng-controller="MyTaskController">
<table tyle="float:right;">
<tr><h3>New Project Form</h3></tr>
<tr>
<td class='padding-to-controls'>Get Project Details</td>
<td class='padding-to-controls'>
<select ng-change="getPrjDetails()" ng-model="select_project" >
<option value=''>Select Project Details</option>
<option value='get-details'>Get Project Details</option>
</select>
</td>
</tr>
<tr>
<td class='padding-to-controls'>New Project Name <span>*</span></td>
<td class='padding-to-controls'> <input type = 'text' ng-model="project_name" ></td>
</tr>
<tr>
<td class='padding-to-controls'>Assign location to project <span>*</span></td>
<td class='padding-to-controls'> <input type = 'text' ng-model="assign_location" ></td>
</tr>
<tr>
<td class='padding-to-controls'>Area </td>
<td class='padding-to-controls'><input type = 'text' ng-model="area" ></td>
</tr>
<tr>
<td class='padding-to-controls'>City</td>
<td class='padding-to-controls'><input type = 'text' ng-model="city" ></td>
</tr>
<tr>
<td class='padding-to-controls'>State </td>
<td class='padding-to-controls'><input type = 'text' ng-model="state" ></td>
</tr>
<tr>
<td class='padding-to-controls'>Cluster</td>
<td class='padding-to-controls'><input type = 'text' ng-model="cluster" ></td>
</tr>
<tr>
<td class='padding-to-controls'>Region</td>
<td class='padding-to-controls'><input type = 'text' ng-model="region" ></td>
</tr>
<tr>
<td class='padding-to-controls'>Type <span>*</span> </td>
<td class='padding-to-controls'><input type = 'text' ng-model="type" ></td>
</tr>
<tr>
<td class='padding-to-controls'>Priority <span>*</span></td>
<td class='padding-to-controls'><input type = 'text' ng-model="priority" ></td>
</tr>
<tr>
<td class='padding-to-controls'>Name of approver<span>*</span></td>
<td class='padding-to-controls'><input type = 'text' ng-model="name_approver" ></td>
</tr>
<tr>
<td class='padding-to-controls'></td>
<td class='padding-to-controls'><button ng-click="getPrjDetails()">EDIT</button></td>
</tr>
</table>
</div>
</div>
please find link to my json i am trying to access :: https://jsonplaceholder.typicode.com/posts

When dom is first rendered, angular start searching for resp.data, which in your case is undefined and so angular will complain.
You don't need to pass $scope variables to any of the controller functions. They can access it directly.
In your whole code, you are never ever setting $scope.resp.
Your html context is way different from what you are trying to do. So I have modified it a bit. Try following code:
HTML:
<div ng-app="myDemoApp">
<div ng-controller="MyTaskController">
<h3>Feeds</h3>
<button ng-click="getPrjDetails()">Load</button>
<div ng-repeat="myData in resp.data">
<span> {{myData.id}}</span>
<input ng-model="myData.title" type="text" />
</div>
</div>
Angular
app.controller('MyTaskController', function($scope, MyTaskService) {
// Required
$scope.resp = {
data: []
}
$scope.getPrjDetails = function() {
try {
var promise = MyTaskService.userList();
promise.then(function(sucResp) {
try {
var resp = sucResp.data || [];
// You must update $scope.resp.data
$scope.resp.data = resp;
console.log($scope.resp.data);
} catch (exception) {
console.log(exception);
return;
}
}, function(errResp) {
console.log(errResp);
return;
});
} catch (exception) {
console.log(exception);
return;
}
}
})
fiddle working

JQuery function is not being called

Below is my HTML code to handle, on click of id, it has to call javascript function viewLineActionURL and then to controller. Both of the alerts are coming, but still it is not calling the controller modifyLine method.
<script>
var viewLineActionURL;
$(document).ready(function() {
viewLineActionURL = function(obj) {
alert('view*' + obj + '*');
$("#formname").attr("action",obj); // To Controller
alert('false..');
};
});
</script>
<table class="tg" id="pResultsjoin">
<thead align="left">
<tr>
<th class="tg"><input type="checkbox" id="all" disabled="disabled" onclick="toggle(this);" /></th>
<th class="tg">Person Id#</th>
<th class="tg">Age</th>
</tr>
</thead>
<tbody align="left">
<tr th:each="map : ${list}">
<td class="tg bg"><input type="checkbox" class="checkboxclass" name="check" th:value="${map['PID']}" /></td>
<td class="tg bg em" th:id="${map['PID']}" th:name="${map['PID']}" th:text="${map['PID']}" th:onclick="'javascript:viewLineActionURL(\'' + #{/LineController/modifyLine} + '\')'" ></td>
<td class="tg bg" th:text="${map['AGE']}"></td>
</tr>
</tbody>
</table>
But I have this below similar code working:
Button:
<input type="submit" value="Modify" class="btn btn-primary" id="modifyLine" th:onclick="'javascript:modifyLineActionURL(\'' + #{/LineController/modifyLine} + '\')'" />
Javascript:
modifyLineActionURL = function(obj) {
if ($('.checkboxclass:checked').length == 1) {
$("#formname").attr("action",obj);
} else if ($('.checkboxclass:checked').length > 1) {
alert('Please select only one quotation line');
} else {
alert('Please select a quotation line');
}
};
Can anyone help on this issue

Trying to iterate through elements based on $(this) element w/ jQuery only for checked rows

I have multiple rows like this created dynamically:
<tr class="row">
<td class="row-checkbox-delete-row"><input tabindex="-1" class="checkbox-delete-row" type="checkbox" /></td>
<td class="row-target">10</td>
<td class="row-product-id"><input class="id-target row-product-id" name="lineItem[0].originalInput" type="text" data-ajax-line-id="1" /></td>
<td class="row-qty"><input class="qty-target row-qty" name="lineItem[0].quantity" type="text" value="1" /></td>
<td class="row-description"></td>
<td class="row-abc6"></td>
<td class="row-abc8"><input readonly tabindex="-1" class="abc8-target row-abc8" name="lineItem[0].abc8" type="text" /></td>
<td class="row-upc"></td>
<td class="row-ndc"></td>
</tr>
I want to iterate through all of them and grab the attribute data-ajax-line-id from each one.
I have this code but it's not working. Need some help.
var lineids = new Array();
$(".checkbox-delete-row:checked").each(function() {
lineids.push($(this).parents("td").siblings(".row-product-id").children(".id-target").attr("data-ajax-line-id"));
});

Then iterate over the rows, check if the .checkbox-delete-row is checked in that row, and if it is, get the data attribute from that row and add it to the array, if not just return null :
var arr = $.map($('.row'), function(el) {
return $('.checkbox-delete-row', el).is(':checked') ?
$('[data-ajax-line-id]', el).data('ajax-line-id') :
null;
});