We Keep Coding

Error in while looping in *ngFor in angular

I have the JSON of single object coming as:
I achieved this data by calling the API in component.ts file which is as follows
/* for auditgorup selecitonm */
this.http.get('http://localhost:8080/api/selections/getAllAuditGroupSelections')
.subscribe((datas: any[]) => {
this.auditSelection = datas;
console.log(this.auditSelection);
// You'll have to wait that changeDetection occurs and projects data into
// the HTML template, you can ask Angular to that for you ;-)
this.chRef1.detectChanges();
// Now you can use jQuery DataTables :
const tables: any = $('#nepal');
this.dataTable = tables.DataTable();
});
The view is as follows
<table id="nepal" class="table table-bodered">
<thead>
<tr>
<th>Selection No</th>
<th>SelectionDate</th>
<th>SelectedBy</th>
<th>PanEximNumber</th>
<th>Name</th>
<th>Address</th>
<th>PhoneNumber</th>
<th>SelectionType</th>
<th>Group Desc</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let nas of auditSelection">
<td>{{nas.selectionId}}</td>
<td>{{nas.selectionDate}}</td>
<td>{{nas.selectedBy}}</td>
<td>{{nas.panEximNumber}}</td>
<td>{{nas.name}}</td>
<td>{{nas.address}}</td>
<td>{{nas.phoneNumber}}</td>
<td>{{nas.selectionType}}</td>
<td>{{nas.assignmentAudit.auditorGroup.groupDesc}}</td>
</tr>
</tbody>
</table>
At this last line of <td>{{nas.assignmentAudit.auditorGroup.groupDesc}}</td> I cannot get the required value.
The output display should be "g1".

I am unable to comment, so adding it over here. assignmentAudit is an array, so try accessing using index

As per the analysis of the JSON structure the assignmentAudit is an array
so you can only access it with the index positions.
If you are sure the assignmentAudit is an array with single value then you can use
<td>
{{nas.assignmentAudit[0].auditorGroup.groupDesc}}
</td>
If assignmentAudit has multiple values and is not deterministic you can try
<td>
<span *ngFor="let assignmentAudit of nas.assignmentAudit">
{{assignmentAudit.auditorGroup.groupDesc}}
</span>
</td>

nas.assignmentAudit[0].auditorGroup.groupDesc
That would work. The section you are trying to access is an array. So picking the first index would then make it defined

groupDesc is insideauditorGroup loop so you cannot do like to get value inside loop. Try like that.
<!-- Angular -->
<ul>
<li *ngFor="let item of nas.assignmentAudit.auditorGroup;">
</li>
</ul>
or <td>{{nas.assignmentAudit.auditorGroup[0].groupDesc}}</td>

Using nested ng-repeat with object arrays angular

Here is what I am trying to do:
<tr ng-repeat = "data in tabularData track by $index" >
<td ng-repeat ="(key,value) in usedAttributes" >{{data[key]}}</td>
</tr>
This DID work when the tabular Data was structured like this:
[3920F0-3434D3-ADF-3SDF:[{CreatedBy: "John Doe", CreatedDate: "10-20-2016"}]
However when I flattened it out, it looks more like this:
[{CreatedBy: "John Doe", CreatedDate: "10-20-2016",PrimaryID:"3920F0-3434D3-ADF-3SDF"}]
This does not work. I feel like I'm missing something very obvious.
usedAttributes is just a simple object array containing attributes (column data). The idea is that the user can choose the attributes they want to get so the data table is very dynamic. For this example, the usedAttributes may look like this:
["CreatedBy": [{Checked:false}],"CreatedDate":[{Checked:true}]]
Thus the user wants to see these two attributes although more exists.

You can do this,
<div ng-controller="listController">
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="(key, value) in tabularData[0]">{{key | uppercase }}
</th>
</tr>
<tbody>
<tr ng-repeat="val in tabularData">
<td ng-repeat="cell in val">
<input type="text" ng-model="cell">
</td>
</tr>
</tbody>
</table>
</div>
DEMO

How to access a specific $scope variable when loading a different .html file?

First of all, sorry about the title, I just wan't sure how to word this question.
So I'm making a task manager using AngularJS. I have a form for the user to fill with the details when he's creating a new task. I use ng-model to save these values to my $scope. Here's how I save them:
$scope.add = function(tasks)
{
{
$scope.tasks.push({
'id': tasks.id,
'title': tasks.title,
'start_day': tasks.start_day,
'start_time':tasks.start_time,
'start_date':tasks.start_day + " " + tasks.start_time,
'end_day': tasks.end_day,
'end_time': tasks.end_time,
'end_date':tasks.end_day + " " + tasks.end_time,
'type': tasks.type,
'description': tasks.description
});
localStorage.setItem('tasks',JSON.stringify($scope.tasks));
}
};
Then, as you can see, I save these values to the local storage. I have an array called tasks with all the tasks the user created. I then display these tasks in a table with this:
<table id="datatable" class="display" ng-cloak>
<thead>
<tr>
<th><b>ID</b></th>
<th><b>Title</b></th>
<th><b>Start Date</b></th>
<th><b>End Date</b></th>
<th><b>Type</b></th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="task in tasks track by $index">
<td ng-click="details(task)">{{task.id}}</td>
<td ng-click="details(task)">{{task.title}}</td>
<td ng-click="details(task)">{{task.start_date}}</td>
<td ng-click="details(task)">{{task.end_date}}</td>
<td ng-click="details(task)">{{task.type}}</td>
<td><a ng-click="remove(task)" class="btn-floating waves-effect waves-light red<i class="material-icons">clear</i></a></td>
</tr>
</tbody>
</table>
Then, the objective is that you can click any row and load a new page with all the task details. I do this with the function details(), which has the following code:
$scope.details = function (task)
{
$window.location.href = 'table.html';
}
This loads the file table.html and what I want is to display in this page all the task details, i.e., the ID, the title, the description, etc.
What I don't know is how to only display the specific task that you click on. For example, if I click on the row with the task "Todo #1", I only want to see the details for the task "Todo #1".

to access this variable in other html you can use factory or service like this
(function() {
"use strict";
angular.module('dataModule',[])
.factory('datafactory',function(){
return {
};
});
})();
Now datafactory is factory we need to inject this module(dataModule) in your module and factory(datafactory) in controller
Now how to use this factory
in your function
$scope.details = function (task)
{
datafactory.currentTask =task
$window.location.href = 'table.html';
}
Now this datafactory stores your variable that can we used in any controller and later on also you can use this factory to store any such variable for global use
like this datafactory.Myvariable ="hasd"//assign here
Now to use this variable
Suppose you want to use this variable in another page table.html there on
// in html ng-init ="$scopeInit()"
in controller
$scopeInit =function(){
$scope.localTask =datafactory.currentTask
}
and use $scope.localTask
suppose html looks something like this
<div ng-controller ="my-controller" ng-init ="$scopeInit()">
<table id="datatable" class="display" ng-cloak>
<thead>
<tr>
<th><b>ID</b></th>
<th><b>Title</b></th>
<th><b>Start Date</b></th>
<th><b>End Date</b></th>
<th><b>Type</b></th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="task in tasks track by $index">
<td ng-click="details(task)">{{task.id}}</td>
<td ng-click="details(task)">{{task.title}}</td>
<td ng-click="details(task)">{{task.start_date}}</td>
<td ng-click="details(task)">{{task.end_date}}</td>
<td ng-click="details(task)">{{task.type}}</td>
<td><a ng-click="remove(task)" class="btn-floating waves-effect waves-light red<i class="material-icons">clear</i></a></td>
</tr>
</tbody>
</table>
<div>
//in controller
$scopeInit =function(){
$scope.task =datafactory.currentTask
}
//$scope.task contains required array and hence table can be created

Data Table hangs sporadically (No data available in table) when data sorted or loaded with Knockout binding

I am binding data to a table using Knockout JS and the JQuery/Bootstrap based; Data Table API. The table becomes unresponsive sporadically when sorted or loaded. There are no errors in the log.
It also shows 0 of 0 data as illustrated in the screenshot below:
I have seen similar errors/issues but could not get a solutions for them, E.g. This post:
Code:
function viewModel(){
var self = this;
self.Data = ko.observableArray([]);
$.getJSON('https://restcountries.eu/rest/v1/all', function(data){
self.Data(data);
});
}
ko.applyBindings(viewModel());
$(document).ready(function() {
$('#example').dataTable();
});
HTML:
<div class="table-responsive">
<table id="example" cellspacing="0"
class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th scope="col">Country</th>
<th scope="col">Capital</th>
<th scope="col">Population</th>
<th scope="col">Region</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col">Country</th>
<th scope="col">Capital</th>
<th scope="col">Population</th>
<th scope="col">Region</th>
</tr>
</tfoot>
<tbody data-bind="foreach: Data">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: capital"></td>
<td data-bind="text: population"></td>
<td data-bind="text: region"></td>
</tr>
</tbody>
</table>
</div>
Here is a full working example (JSFiddle) utilizing a REST API so that the exact problem is accurately replicated:

I think the problem with your example may be with how you're dealing with your data when you get it back from the API call.
I've put together a quick example that achieves what I think you're trying to achieve and the sorting and searching work quickly for me.
When I get the JSON data back from the API, I use the Knockout arrayMap utility function to create an array of "Country" objects that have observable properties that I have mapped the JSON data to. I've bound the table to my observableArray of Country objects.
Initialising the data table in the same way you have works fine for me in this case.
The full working solution is here: http://plnkr.co/edit/eroIox6zqBFOVnf86Mdk?p=preview
script.js
var ViewModel = function(jsonData) {
var countries = ko.utils.arrayMap(jsonData, function(item) {
return new Country(item)
});
this.Countries = ko.observableArray(countries);
};
var Country = function(jsonItem) {
this.Name = ko.observable(jsonItem.name);
this.Capital = ko.observable(jsonItem.capital);
this.Population = ko.observable(jsonItem.population);
this.Region = ko.observable(jsonItem.region);
};
window.onload = function() {
$.getJSON('https://restcountries.eu/rest/v1/all', function(data) {
ko.applyBindings(new ViewModel(data));
$("#example").dataTable();
});
}
index.html
<table id="example" cellspacing="0" class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th scope="col">Country</th>
<th scope="col">Capital</th>
<th scope="col">Population</th>
<th scope="col">Region</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col">Country</th>
<th scope="col">Capital</th>
<th scope="col">Population</th>
<th scope="col">Region</th>
</tr>
</tfoot>
<tbody data-bind="foreach: Countries">
<tr>
<td data-bind="text: Name"></td>
<td data-bind="text: Capital"></td>
<td data-bind="text: Population"></td>
<td data-bind="text: Region"></td>
</tr>
</tbody>
</table>

Tables are fairly slow to render within Knockout, and if your table is based on a computed, I could see how you could have some issues with redrawing time. But that's not happening here.
Apart from loading the data and binding it to the table rows, there's no data manipulation going on in your viewmodel. All the data manipulation is done by the dataTable plug-in, which you initialize with a single jQuery call. Properly, that should be done within a binding handler. You also need to know what is going on within the plug-in when it sorts, filters, or whatever it does, because you may need to mediate those changes back to your observableArray within your binding handler.
Bottom line: you need a binding handler for the dataTable. There may be one already written; I haven't Googled for it. Give that a try.

Repeating a set of <td>s in the same table row using AngularJS

I want to create a table that, in its header, contains the names of each player for two teams in each . The scope has a variable teams which is a list of Team objects, each one having list of Player objects as an attribute.
This is turning out to be way harder than I expected.
<table>
<thead>
<tr>
<div ng-repeat="team in teams">
<th ng-repeat="player in team.players">{[ player.name ]}</th>
<th>Partial Score</th>
<th>Total Score</th>
</div>
</tr>
</thead>
</table>
is the easiest thing I have in mind - but this doesn't work. can't be placed inside a according to W3C (from what I understand), so the browser just takes the div and places it outside the table.
I've tried directives as well - but these don't help. This is an example of my directive file.
<th ng-repeat="player in team.players">{[ player.name ]}</th>
<th>Partial Score</th>
<th>Total Score</th>
For example, if I have a <player-initials> directive with replace: 'false', the browser expels the non-<th> element out of the table. Setting replace: 'true', fixes that, but then I get an error because there's more than one root element in the directive. I can't wrap the elements in the directive with anything because that would result in invalid HTML (as above).
I've tried all combinations of element and attribute directives and replace, nothing gives me what I want. Any help?

Created a fiddle here.
Hope this is what you are looking for, if not let me know the format that you are looking for. Your HTML should look something like below.
<table ng-repeat="team in teams">
<tr>
<td colspan="3">
{{team.name}}
</td>
</tr>
<tr>
<td>Player Name</td>
<td>Partial Score</td>
<td>Total Score</td>
</tr>
<tr ng-repeat="player in team.players">
<td>{{player.name}}</td>
<td>{{player.PScore}}</td>
<td>{{player.TScore}}</td>
</tr>
</table>

You should add a method to your scope that do the logic for you.
Something like this should work:
$scope.getAllPlayers = function() {
var players = [];
this.teams.forEach(function(team){
players = players.concat(team.players);
});
return players;
}
Then in your dom:
<table>
<thead>
<tr>
<th ng-repeat="player in getAllPlayers()">{{ player.name }}</th>
<th>Partial Score</th>
<th>Total Score</th>
</tr>
</thead>
</table>
I'm not using Angular so I may be wrong, but I'm pretty sure this is the way to go. This kind of logic have to be in your controller, as simple is a nested loop.
EDIT: Referring to the comments, you could make a function that return your header cells the way you want them
$scope.getHeaderCells = function() {
var cells = [];
this.teams.forEach(function(team){
cells = cells.concat(team.players.map(function(player){
return { team: team, value: player.name };
})).concat([
{team: team, value: 'Partial Score'},
{team: team, value: 'Total Score'}
]);
});
console.log(cells);
return cells;
}
with
<th ng-repeat="cell in getHeaderCells()">{{ cell.value }}</th>
here is a fiddle

I figured it out using the ng-repeat-start and ng-repeat-end directives. I really didn't want to write functions to generate HTML for me, because that's why I switched to Angular in the first place.
Here's a screenshot: http://i.imgur.com/e5LBvQB.png.
This is the (stripped-down to relevant part) code just for the header, everything else is similar. The only 'hacky' part I don't like is the ng-show attributes for B and T to reverse it properly, but it works for me right now. I think I can get clean it up with directives.
<table class="table table-condensed table-striped table-hover table-responsive">
<thead>
<tr>
<th ng-repeat-start="team in game.getTeams()" ng-hide="true"></th>
<th ng-repeat="player in team.getPlayers()" ng-class="$parent.$first && 'text-info' || 'text-danger'">
<u>
{[ player.name | truncate ]}
</u>
</th>
<th ng-repeat-end ng-show="$first">
#
</th>
</tr>
</thead>
</table>