We Keep Coding

Displaying the array from the controller as a table in the view

In the controller, I receive the data from the database and then I assign the relevant list to the function that will run all the functions in this controller. This list returns to view here I will show the data in the table but ... is undefined error
now i will share with you my functions in controller
public function table_backlog()
{
$dailyData=\DB::table('backlogs')->get()->toArray();
//dd($dailyData);
return ['dailyData'=>$dailyData];
}
protected function getAllBChart() {
return view('deneme',[
'table_backlog'=>$this->table_backlog()]);
}
View.blade:
<div class="row justify-content-center">
<div class="col-auto">
<table class="table table-responsive">
<thead>
<tr>
<th>Incident No</th>
<th>Assignment Group</th>
<th>Open Group</th>
<th>Open Time</th>
<th>RN Short Name</th>
<th>Days</th>
<th>Brief Description</th>
</tr>
<thead>
<tbody>
#foreach($dailyData as $key => $row)
<tr>
<td>{{ $row->number }}</td>
<td>{{ $row->assignmentGroup }}</td>
<td>{{ $row->creatorGroup }}</td>
<td>{{ $row->opened }}</td>
<td>{{ $row->configuration }}</td>
<td>{{ $row->description }}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
var dailyData={!! json_encode($table_backlog['dailyData']) !!}
</script>
This line assigns the data from the controller to the variable. When I check with DD I can see the data
var dailyData={!! json_encode($table_backlog['dailyData']) !!}
I tried this but I get undefined error. My for loop doesn't work either

try this version coz error from array's key
#foreach($table_backlog['dailyData'] as $key => $row)
<tr>
<td>{{ $row['number']}}</td>
<td>{{ $row['assignmentGroup']}}</td>
<td>{{ $row['creatorGroup']}}</td>
<td>{{ $row['opened']}}</td>
<td>{{ $row['configuration']}}</td>
<td>{{ $row['description']}}</td>
</tr>
#endforeach

DataTables not sorting properly

I am using DataTables for my project but its sorting function does not work properly. I have tried every single solutions in here but none of them worked for me as well as it does not show the error in the console. I think in my code there is a jQuery conflict. How can I solve this issue? any help?
<table id="dtBasicExample" class="table table-bordered table-hover contact-list" cellspacing="0"
width="100%">
<thead>
<tr>
{# <th scope="col"><input type="checkbox"></th>#}
<th scope="col">Name</th>
<th scope="col">Company Name</th>
<th scope="col">Email</th>
<th scope="col">Phone Number</th>
</tr>
</thead>
{% for contact in contacts %}
<tbody>
<tr data-id="{{ contact.id }}" class="clickable-row"
data-href="{% url 'contact-detail' contact.id %}"
style="cursor: pointer; ">
{# <th scope="row"><input type="checkbox" id="check"></th>#}
<td>{{ contact.client_name }}</td>
<td>{{ contact.client_company_name }}</td>
<td>{{ contact.email }}</td>
<td>{{ contact.work_phone }}</td>
</tr>
</tbody>
{% endfor %}
</table>
{% csrf_token %}
$('#dtBasicExample').DataTable();
$('.dataTables_length').addClass('bs-select');
as you can see it is a material bootstrap design datatables. In the example shown it works but when i add to my project it does not.

Your html table is "not valid" (It is valid if you want to create multiple table into an parent table). This can make some issue with Datatable. I think sorting is done, but you do not see it, because it sort by tbody tag and there is one line sorted by tbody. The tbody tags are not sorted only the tr inside
Try to remove the tbody into your loop and export it outside the for loop.
<tbody>
{% for contact in contacts %}
// ...
{% endfor %}
</tbody>
Note: cellspacing="0" is an old version of html. You can replace it by the css property border-spacing

Passing variable to Json API and showing response with ng-repeat

I'm pretty new to AngularJS. I have two tables, one has a list of people that need interviews
// From vol.xslt
<section id="requested_interviews" class="row">
<h3>Unassigned Requests</h3>
<div class="table-responsive">
<table id="unassigned_table" class="table table-condensed">
<tr>
<th>Requested</th>
<th>First</th>
<th>Last</th>
<th>City</th>
<th>Region</th>
<th>Zip</th>
<th>Country</th>
<th>Action</th>
</tr>
<tr ng-repeat="p in prospects">
<td>{{ p.Requested }}</td>
<td>{{ p.First }}</td>
<td>{{ p.Last }}</td>
<td>{{ p.City }}</td>
<td>{{ p.Region }}</td>
<td>{{ p.Zip }}</td>
<td>{{ p.Country }}</td>
<td>
<button class="btn btn-small btn-default btn-block" ng-click="haversine( {{{{p.lat}}}}, {{{{p.lng}}}} )">Find Matches</button>
<button class="btn btn-small btn-default btn-block" ng-click="viewProspectDetais()">Prospect Details</button>
</td>
</tr>
</table>
</div>
When the user clicks the Find Matches button, the haversine function is called, which passes the latitude and longitude of the person into it, and the api responds with volunteers in that person's area:
// From controller
// Volunteer enpoint
$scope.haversine = function(lat, lng) {
$http.get(-- redact api url --).then(function(response) {
$scope.volunteers = response.data.row;
});
};
Now, when the function is triggered, it should update the view, and I think that's what I am having trouble with:
// From vol.xslt
<section id="potential_volunteers" class="row">
<h3>Potential Volunteers</h3>
<table class="table table-hover table-condensed">
<tr>
<th>First</th>
<th>Last</th>
<th>Street</th>
<th>Street 2</th>
<th>Street 3</th>
<th>City</th>
<th>Region</th>
<th>Zip</th>
<th>Country</th>
<th>Action</th>
</tr>
<tr ng-repeat="v in volunteers">
<td>{{ v.First }}</td>
<td>{{ v.Last }}</td>
<td>{{ v.Street_1 }}</td>
<td>{{ v.Street_2 }}</td>
<td>{{ v.Street_3 }}</td>
<td>{{ v.City }}</td>
<td>{{ v.Region }}</td>
<td>{{ v.Postal }}</td>
<td>{{ v.Country }}</td>
<td>
<button class="btn btn-small btn-default btn-block" ng-href="assignInterview()">Assign</button>
<button class="btn btn-small btn-default btn-block" ng-href="viewVolDetails()">Volunteer Details</button>
</td>
</tr>
</table>
I've verified that the endpoint works, and that my variables are showing up correctly within the button (XSLT requires my to use double braces for angular variables).
Thanks!

The answer was to change the start and end symbols for angular variables on the app itself. I guess that XSLT didn't like parsing the {{ and }} characters.
Changing my app declaration to
var app = angular.module('volApp',[]).config(function($interpolateProvider){
$interpolateProvider.startSymbol('[[').endSymbol(']]');
});
and all {{ to [[ and }} to ]] fixed the issue.

AngularJS: passing array information along

I have a table that lists several objects in an array using ng-repeat and I was wondering, if there is an easy way to let the user select one of these objects by clicking on the row and viewing them in a separate <div>.
Here's the table:
<table class="table">
<tbody class="table-hover">
<tr>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Approver</th>
</tr>
<tr ng-repeat="campaign in campaigns | filter: query" contenteditable="true">
<td>{{ campaign.name }}</td>
<td>{{ campaign.type }}</td>
<td>{{ campaign.approver }}</td>
</tr>
</tbody>
</table>
Let's say the user clicked on the first row. He would now see a <div> that contains all the information in this row for that object.
<div>
{{campaigns[].name}}
...
</div>

It could be achieved by several way. One of them as below.
<table class="table">
<tbody class="table-hover">
<tr>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Approver</th>
</tr>
<tr ng-repeat-start="campaign in campaigns | filter: query" contenteditable="true" ng-click="campaign.showDetails = !campaign.showDetails">
<td>{{ campaign.name }}</td>
<td>{{ campaign.type }}</td>
<td>{{ campaign.approver }}</td>
</tr>
<tr ng-repeat-end ng-show="campaign.showDetails">
Your can dispalay here rest of the information from campaign object.
</tr>
</tbody>
You could seed the example http://codepen.io/anon/pen/beNbwp

Ok, so if I understand your problem, the solution could be to use ng-click :
(considering campaign.name unique for each campaigns)
<tr ng-repeat="campaign in campaigns | filter: query" contenteditable="true" ng-click="doSmth(campaign.name)">
<td>{{ campaign.name }}</td>
<td>{{ campaign.type }}</td>
<td>{{ campaign.approver }}</td>
</tr>
Then in your controller :
$scope.doSmth = function(campName) {
$state.go(campName); //example
};
Another solution, using ui-sref :
Considering you define a url: '/folder/campaignPage?name' in your $stateProvider.
<tr ng-repeat="campaign in campaigns | filter: query" contenteditable="true" ui-sref="campaignPage({ name: campaign.name })">
<td>{{ campaign.name }}</td>
<td>{{ campaign.type }}</td>
<td>{{ campaign.approver }}</td>
</tr>

Another way u can do it easily if u also create a button in ng-repeat like
<td><input type="button" value="select" class="btn btn-info btn-sm" ng-click="populate(campaign )" /></td>
And then
$scope.populate = function (campaign) {
$scope.Name = campaign.Name;
}
It's simple to use.

How to convert decimal tofixed foramt using javascript

My table has decimal values. My question is how to convert all decimal values after 2 digit decimal point.
Example:
1)My table column value is 11.9 and 6.0. how convert to this format 11.90 and 06.00
2)1045.7 to 1045.70
i am using django to display the value .my html table code using this format than how to convert tofixed
<table class="table table-striped table-condensed table-bordered " id="child_table">
<thead class="btn-primary" >
<tr>
<th >Year</th>
<th >Estimated Mid-Year-Population</th>
<th colspan="3" >Infanticide</th>
<th colspan="3" >Murder</th>
<th colspan="3" >Rape</th>
<th colspan="3" >Kidnapping & Abduction</th>
<th colspan="3" >Abetment Of Suicide</th>
<th colspan="3" >Child Marriage Restraint Act</th>
<th colspan="3" >Other Crimes</th>
</tr>
</thead>
<td></td>
<th></th>
<th>(I)ncidance</th>
<th>(R)ate</th>
<th>%</th>
<th>I</th>
<th>R</th>
<th>%</th>
<th>I</th>
<th>R</th>
<th>%</th>
<th>I</th>
<th>R</th>
<th>%</th>
<th>I</th>
<th>R</th>
<th>%</th>
<th>I</th>
<th>R</th>
<th>%</th>
<th>I</th>
<th>R</th>
<th>%</th>
</tr>
<tbody id="crimec">
{% for query_all in crime_filter %}
<tr id="crime_child">
<td>{{ query_all.year}}</td>
<td>{{ query_all.mid_year_population }}</td>
<td>{{ query_all.infanticide_incidence }}</td>
{% if query_all.infanticide_rate > 0 %}
<td>{{ query_all.infanticide_rate }}</td>
{% else %}
<td> </td>
{% endif %}
<td>{{ query_all.infanticide_percentage }}</td>
<td>{{ query_all.murder_incidence }}</td>
<td>{{ query_all.murder_rate }}</td>
<td>{{ query_all.murder_percentage }}</td>
<td>{{ query_all.rape_incidence }}</td>
<td>{{ query_all.rape_rate }}</td>
<td>{{ query_all.rape_percentage }}</td>
<td>{{ query_all.kidnapping_abduction_i }}</td>
<td>{{ query_all.kidnapping_abduction_r }}</td>
<td>{{ query_all.kidnapping_abduction_p }}</td>
<td>{{ query_all.abetment_suicide_i }}</td>
{% if query_all.abetment_suicide_r > 0 %}
<td>{{ query_all.abetment_suicide_r }}</td>
{% else %}
<td> </td>
{% endif %}
<td>{{ query_all.abetment_suicide_p }}</td>
<td>{{ query_all.child_marriage_act_i }}</td>
{% if query_all.child_marriage_act_r > 0%}
<td>{{ query_all.child_marriage_act_r }}</td>
{% else %}
<td> </td>
{% endif %}
<td>{{ query_all.child_marriage_act_p }}</td>
<td>{{ query_all.total_i }}</td>
<td>{{ query_all.total_r }}</td>
<td>{{ query_all.total_p }}</td>
</tr>
{% endfor %}
</tbody>
</table>

CODE:
var val=6;
var precision=2;
val = val.toFixed(precision);
if( val < 10.00 )
val = "0"+val
alert(val)
JSFIDDLE DEMO

You can use the Number.toFixed() method.
var num = 5.5;
console.log(num.toFixed(2)) // this will return 5.50

Use parseFloat in combination with toFixed():
parseFloat(6).toFixed(2);
JS Fiddle: http://jsfiddle.net/25hJC/

var value = 11.9;
if(!isInt(value)){
var changeValue = value.toFixed(2);
}
console.log(changeValue); // returns 11.90
// check int or float;
function isInt(n) {
return n % 1 === 0;
}