I cant seem to pass value from controller to view, Laravel 8 - javascript

I can't seem to parse data that i got from db on controller to view, i have tried multiple solutions that i got from similiar question but none seem to work.
i simply want to show my employee list on my admin page.
Here's my login controller
The login function works just fine, its just doenst seem to parse the data i got from db to view
public function postLogin(Request $request){
$list = "";
$list = \DB::table('users')->where('role','1')->get();
if(Auth::attempt($request -> only('username','password'))){
if (Auth::user()->role == '0') {
return view('admin',['daftar' => $list]);
}else if (Auth::user()->role == '1') {
return redirect('/EPage');
}
}
return redirect('/');
}
Here's my admin blade view
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">name</th>
<th scope="col">email</th>
<th scope="col">phone</th>
</tr>
</thead>
<tbody>
<tr>
#foreach($list as $lists)
<th scope="row">1</th>
<td>{{ $lists->name }}</td>
<td>{{ $lists->email }}</td>
<td>{{ $lists->phone }}</td>
#endforeach
</tr>
</tbody>
Please help me understand my mistake, Thank you in advance.
i'm expecting the admin page with show user list with role equals to 1

After i tinker here and there, i finally found that i forgot to put an "s" on my user(s) table name. silly mistake but crucial hahaha
it seems previously the variable that i parse are actually empty.
Here are my final controller that worked
public function postLogin(Request $request){
if(Auth::attempt($request -> only('username','password'))){
if (Auth::user()->role == '0') {
$daftar = \DB::table('users')->where('role',1)->get();
return view('admin',['daftar' => $daftar]);
}else if (Auth::user()->role == '1') {
return redirect('/EPage');
}
}
return redirect('/');
}
and here's my blade view
<tbody>
#foreach($daftar as $lists)
<tr>
<th scope="row">1</th>
<td>{{ $lists->name }}</td>
<td>{{ $lists->email }}</td>
<td>{{ $lists->Phone }}</td>
</tr>
#endforeach
</tbody>
also thanks to waqar for correcting my previous mistakes

You can send list data with view using compact like:
public function postLogin(Request $request){
$list = "";
$list = \DB::table('users')->where('role','1')->get();
if(Auth::attempt($request -> only('username','password'))){
if (Auth::user()->role == '0') {
return view('admin',compact('list'));
}else if (Auth::user()->role == '1') {
return redirect('/EPage');
}
}
return redirect('/');
}
then you can use $list on your blade easily.

Related

How to sort columns in Vue when the values to sort are the result of calculations

I've found many resources for sorting data that is already in an array but can't find anything on sorting dynamically generated data.
<table>
<thead>
<tr>
<th>Program</th>
<th>Rewards</th>
</tr>
</thead>
<tbody>
<tr v-for="program in programs" :key="program.id">
<td>{{ program.program_name }}</td>
<td>{{ pointValue(program) | percent }}</td>
</tr>
</tbody>
</table>
pointValue() is a method which calculates and returns a value which is displayed as a %. this is the Rewards column. i would like the table to be sortable by Programs and by Rewards. (Program is just a string).
Create computed array for programs using map and sort method and iterate it instead
computed: {
computedPrograms() {
return this.programs
.map(program => {
return {
...program,
value: this.pointValue(program)
}
})
.sort((a, b) => a.value - b.value)
}
}
<tr v-for="program in computedPrograms" :key="program.id">
<td>{{ program.program_name }}</td>
<td>{{ program.value | percent }}</td>
</tr>

ng-repeat takes too much time to render data

I know there are many questions already posted for the same issue but none of the solutions work in my case.
On calling a web service I get JSON response. In this JSON, there are around 2000+ objects from which I need to display data on the table. I want to display all (2000+) records in the table and Yes, I cannot limit or paginate, need to display it on a single page (I know it's stupid but it's the business requirement). I don't need sorting or searching.
Data transfer is about 2MB and the request completes in about 2-4 secs approx. but it takes around 10-15 secs to data render on the page.
Now, what I am looking for is either speed ng-repeat binding things up (if possible) or display the data as soon as I receive it and keep on adding it until all rows are displayed.
Check out the code below :
HTML
<table class="table table-bordered table-striped cf">
<thead style="color: #333;">
<tr>
<td>Asset Name</td>
<td>Date/ Time</td>
<td>Location</td>
<td>Ignition</td>
<td>Speed</td>
<td>Heading</td>
<td>Direction</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="cols in tableData">
<td>{{ cols.aN }}</td>
<td>{{ cols.dT }}</td>
<td>{{ cols.Lat }}, {{ cols.Lon }}</td>
<td>{{ cols.I }}</td>
<td>{{ cols.S }}</td>
<td>{{ cols.H }}</td>
<td>{{ cols.D }}</td>
</tr>
</tbody>
</table>
JS
var ignition_text = '';
var lat = '';
var lon = '';
for (var i = 0; i < data.length; i++) {
if (data[i].ignition = 1) {
ignition_text = "On";
} else {
ignition_text = "Off";
}
$scope.$apply(function() {
$scope.tableData.push({
aN: name,
dT: data[i].eventUTCTime,
Lat: data[i].latitudeDegrees,
Lon: data[i].longitudeDegrees,
I: ignition_text,
S: data[i].speedMPH,
H: data[i].longitudeDegrees,
D: data[i].latitudeDegrees
});
});
}
Thanks in advance!
You probably wont need $scope.$apply at all. And even if you need it, you should only use it once you pushed all data to the table. Otherwise, every added entry will force an digest-cycle. Just build your array and assign the finished array to the scope-variable. Then angular will only build the table once.
Depending on the nature of your variable name you may be able to eliminate the array building as well and just use the data you are downloading. Apart from nameyou just use that data anyway.
Here is a plunk that has a similar data size but loads much faster http://plnkr.co/edit/I4rN1ZMaR3e1mbcsJ9Ka. If you were to make a quick plunk I could use your data and edit your code but from the looks you just need the main assignment to the scope without the apply for the data and add a track by to the ng-repeat. SN: You would want to manipulate your data inside the for loop then do the assignment to the scope.
for (var i = 0; i < data.length; i++) {
if (data[i].ignition = 1) {
ignition_text = "On";
} else {
ignition_text = "Off";
}
}
$scope.tableData=data;
JS
$http.get("largeData.json").then(function(response) {
vm.test = response.data;
});
HTML
<tbody>
<tr ng-repeat="(key, value) in main.test track by $index ">
<td>{{ value.ask }}</td>
<td>{{ value.bid }}</td>
<td>{{ value.volume_btc }}, {{ value.volume_percent }}</td>
<td>{{ value.last }}</td>
<td>{{ value.timestamp }}</td>
</tr>
</tbody>

angularjs - ngTable not sorting

im using ngTable. Sorting is not working.
Pagination works nice and it shows all my data as I need. But I can't sort.
I'm using $data (I dont know what is for) but still can't sort.
My html:
<div class="panel-heading">
<table ng-table="vm.tableParams">
<tbody>
<tr ng-repeat="event in $data">
<td data-title="'Nombre'" sortable="'name'"> {{ event.phone ? "Tex1" : Text2 }}</td>
<td data-title="'Dia Entero'" sortable="'entero'">{{ event.allDay ? '√' : 'X' }}</td>
<td data-title="'F. Inicio'" sortable="'inicio'">{{ event.start | date:'dd-MM-yyyy' }}</td>
<td data-title="'F. Fin'" sortable="'fin'"> {{ event.end | date:'dd-MM-yyyy' }}</td>
<td data-title="'Telf.'" sortable="'telf'"> {{ event.phone ? event.phone : '--' }}</td>
</tr>
</tbody>
</table>
</div>
My js:
// My data
[{
"title":"Cerrado",
"start":"2015-12-24T23:00:00.000Z",
"allDay":true,
"backgroundColor":"#f05050",
"borderColor":"#f05050"
},
{
"title":"Abierto",
"start":"2016-04-10T04:00:00.000Z",
"end":"2016-04-10T08:00:00.000Z",
"backgroundColor":"#43d967",
"borderColor":"#43d967"
},
{
"title":"Mi Guardia",
"start":"2015-12-24T01:00:00.000Z",
"end":"2015-12-24T08:00:00.000Z",
"backgroundColor":"#5d9cec",
"borderColor":"#5d9cec"
},
{
"title":"super farmacias",
"phone":"677889966",
"address":"Calle badajoz 200",
"start":"2016-01-06T02:00:00.000Z",
"end":"2016-01-06T09:00:00.000Z",
"backgroundColor":"#dde6e9",
"borderColor":"#dde6e9",
"textColor":"#555"
}]
var data = vm.events;
vm.tableParams = new ngTableParams({
page: 1, // show first page
count: 8, // count per page
sorting: {
name: 'asc'
}
},
{
total: data.length,
counts: [],
getData: function($defer, params) {
// use build-in angular filter
var orderedData = params.sorting() ?
$filter('orderBy')(data, params.orderBy()) :
data;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
I have been trying for 2 hours with a lot of examples and changing $data for vm.values and creating other variables and stuffs.
Any idea why sort is broken?
Thanks
After checking your data, you have to modified the HTML code sortable = the object key.
Because when you sort some data in the table using ng-table, it is based on what data is displaying in the table. In this case, it will be the data you just posted. And in your data, you don't have a field called name, entero and etc. Therefore, the sort function is not working for you.
<tr ng-repeat="event in $data">
<td data-title="'Nombre'" sortable="'title'"> {{ event.phone ? "Tex1" : Text2 }}</td>
<td data-title="'Dia Entero'" sortable="'allDay'">{{ event.allDay ? '√' : 'X' }}</td>
<td data-title="'F. Inicio'" sortable="'start'">{{ event.start | date:'dd-MM-yyyy' }}</td>
...
</tr>
Usually for sorting, reverseSort feature is handy, Please try this to sort
<th>Field Name</th>

How can I pass date value to WebAPI from Angular Client?

I'm using a dynamic value to pass data from database. I'm not sure how to pass the value from the client to the server to get the expected data result.
Here the WebAPI Ctrl:
[HttpGet]
public IQueryable<getAllDayReps_Result> GetRepsByDate(DateTime datum)
{
//var dayReps = db.getAllDayReps(new DateTime(2014,05,13)).AsQueryable();
var dayReps = db.getAllDayReps(datum).AsQueryable();
return dayReps;
}
When I'm testing the commented static value, then it works fine and I'm getting the data from date 2014-05-13. But with the dynamic value I don't get data from the database.
Angular Ctrl:
//Button Send
$scope.sending = function (sel) {
$scope.selected = new Date(sel);
$scope.repDay = ResourceService.ds021.query({
'datum': $scope.selected
});
};
Service for REST:
return {
ds021: $resource(baseUrl + '/api/qr_ds021/:Id', {
Id: '#Id'
}, {})
};
View:
<div>
<input type="date" ng-model="selected" />
<button type="button" ng-click="sending(selected)">Send</button>
</div>
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>F_1 </th>
<th>F_2 </th>
<th>F_3 </th>
<th>F_4 </th>
<th>F_5 </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="rep in repDay>
<td>{{ rep.datum }}</td>
<td>{{ rep.isin }}</td>
<td>{{ rep.NameId }}</td>
<td>{{ rep.time_quot }}</td>
<td>{{ rep.num_quot }}</td>
</tr>
</tbody>
....
How you can see I'm typing an value in the input field. The ngModel value will sending with the button "send" to the service. But something is wrong in the service and I don't know what..
EDIT:
Here is the method from the Context.tt:
public virtual ObjectResult<getAllDayReps_Result> getAllDayReps(Nullable<System.DateTime> datumOut)
{
var datumOutParameter = datumOut.HasValue ?
new ObjectParameter("DatumOut", datumOut) :
new ObjectParameter("DatumOut", typeof(System.DateTime));
return ((IObjectContextAdapter)this).ObjectContext.ExecuteFunction<getAllDayReps_Result>("getAllDayReps", datumOutParameter);
}

A javascript function isn't taken into account in html

I have some javacript functions that I have defined in one scope variable like this:
$scope.salma = {
selectedRestaurants: accounts.selectedRestaurants,
findAllAccountsByRestaurant: function(restaurant) {
angular.forEach(accounts.AllRestaurantAccounts, function(CurrentAllrestaurantAccount) {
if(CurrentAllrestaurantAccount.nameRestaurant === restaurant) {
accounts.currentRestaurantNumberAllAccount = CurrentAllrestaurantAccount.accountNumber;
}
});
return accounts.currentRestaurantNumberAllAccount;
},
findAccountsOptInMAIL: function(restaurant) {
angular.forEach(accounts.AllOptInMAILRestaurantAccounts , function(CurrentAllrestaurantAccountOptInMAIL) {
if(CurrentAllrestaurantAccountOptInMAIL.nameRestaurant === restaurant) {
accounts.currentRestaurantNumberOptInMAIL = CurrentAllrestaurantAccountOptInMAIL.accountNumber;
}
});
return accounts.currentRestaurantNumberOptInMAIL;
}
};
I make a call to these function in my html like this:
<tbody>
<tr ng-repeat="restaurant in salma.selectedRestaurants">
<td>{{ restaurant }}</td>
<td>{{ salma.findAllAccountsByRestaurant(restaurant) }}</td>
<td>{{ salma.findAccountsOptInMAIL(restaurant) }}</td>
</tr>
</tbody>
The first function take effect in the html but the second one doesn't take effect and I don't know why.Have you any suggestions, please?

Categories