List not rendering in v-for directive - javascript

I have what seems to be a pretty straightforward list rendering situation but can't seem to get it to work. I have a component that when the mounted event fires sends an async call to an API to get data. Upon fetching the data, it sets the packages array with the value of the data. However, the list never actually renders in Vue. I've done this a number of times before without issue. Not sure what the problem is now.
Vue.component("tech-editing-queue", {
props: [],
data: function () {
return {
packages: []
};
},
template: `
<div>
<div class="table-responsive">
<table id="package-table" class="table table-striped">
<thead>
<tr>
<th>Package</th>
<th>Submitter</th>
<th>Status</th>
<th>Pages</th>
<th>Review Type</th>
<th>Description</th>
<th>Document Name(s)</th>
<th>Submission Date</th>
<th>Requested Due Date</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="package in packages">
<td>
<button type="button" class="btn btn-link">
<span class="glyphicon glyphicon-duplicate"></span>
<span style="margin: 0px 6px;">{{ package.PackageName }}</span>
<span class="label label-primary" style="border-radius: 50%;">1</span>
</button>
</td>
<td>{{ package.Submitter.LastName }}, {{ package.Submitter.FirstName }}</td>
<td>
<h4 style="margin: 0px;">
<span class="label label-info">
{{ package.StateString }}
</span>
</h4>
</td>
<td>{{ package.Pages }}</td>
<td>{{ package.ReviewType }}</td>
<td>{{ package.DocumentType.Description }}</td>
<td><span>{{ package.DocumentNames }}</span></td>
<td><span>{{ package.SubmissionDate }}</span></td>
<td><span>{{ package.RequestedDueDate }}</span></td>
<td><button id="package-menu-7112" type="button" class="btn btn-link"><i class=" fa fa-ellipsis-h fa-1x undefined" aria-hidden="true"></i></button></td>
</tr>
</tbody>
</table>
</div>
</div>
`,
mounted: function () {
fetch("/api/tech-editing-packages")
.then(res => res.json())
.then(response => this.packages = response)
.catch(error => console.log("Packages Error: ", error));
},
watch: {},
methods: {}
});
This packages list looks like this:
list view
The page looks like this after rendering.
page view
I expect the page to render the packages in table form but it doesn't.

I figured this out eventually. I inherited this project from someone else and they had several other javascript libraries being loaded other than Vue. After removing all the libraries other than the ones I needed specifically for my own code, it worked fine. Apparently another library was interfering. I'm not sure which at this point. Thanks for the help.

Try check if has items before redder the items:
<tr v-if="packages.length > 0" v-for="package in packages">
or
<tr v-if="packages[0].Submitter !== undefiend" v-for="package in packages">

Related

Want to bundle Laravel foreach data

I have a foreach loop that i am using to show the dataset, but i want to show specific dataset under a single button so that button click leads to showing that particular data.
My code is the following:
#foreach($new_records as $new_recordss)
<tr>
<td scope="col">{{ $new_recordss['Mob'] }}</td>
<td scope="col"><div class="btn-group">
<button type="button" class="btn btn-primary btn-xs shownum_class"> <span class=" glyphicon glyphicon-earphone" aria-hidden="true"> </span> show/hide</button><div class="numero_class"><td scope="col">{{ $new_recordss['PreferredDate'] }}</td><td scope="col">{{ $new_recordss['PreferredCity'] }}</td><td scope="col">{{ $new_recordss['BookingId'] }}</td><td scope="col">{{ $new_recordss['Documents'] }}</td><td scope="col">{{ $new_recordss['Age'] }}</td><td scope="col">{{ $new_recordss['Gender'] }}</td></div></div></td>
</tr>
#endforeach
Jquery code :
<script type="text/javascript">
$(document).ready(function() {
$(".numero_class").hide();
$(".shownum_class").click(function(){
$(this).next(".numero_class").toggle();
});
});
</script>
Currently this is not working.Any pointers will be useful.Plz help

Need help fetching data JSON to scope AngularJS

i am newbie at AngularJS and in now trying to learn it. This time i am learning how to create one page app using codeigniter and angular with RESTful lib.
I have JSON like this :
[{"id":"25","title":"abc","description":"sss"},{"id":"26","title":"sd","description":"sdsd"}]
i just cannot fetch it to $scope with ng-repeat working no matter what i do. This is my function :
$http.get('Api/items').then(function(response)
{
$scope.items = response;
console.log(response);
});
and this is my table view :
<table class="table table-bordered pagin-table">
<thead>
<tr>
<th>No</th>
<th>Title</th>
<th>Description</th>
<th width="220px">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in items">
<td>{{ $index + 1 }}</td>
<td>{{ x.title }}</td>
<td>{{ x.description }}</td>
<td>
<button data-toggle="modal" ng-click="edit(x.id)" data-target="#edit-data" class="btn btn-primary">Edit</button>
<button ng-click="remove(x,$index)" class="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
This is what happen when those all executed :
no array fetched by $scope at all. weird thing is the <tr> is repeated 5 time without any value. but when i call array[0] the $scope can fetch it :
<table class="table table-bordered pagin-table">
<thead>
<tr>
<th>No</th>
<th>Title</th>
<th>Description</th>
<th width="220px">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in items">
<td>{{ $index + 1 }}</td>
<td>{{ x[0].title }}</td>
<td>{{ x[0].description }}</td>
<td>
<button data-toggle="modal" ng-click="edit(x.id)" data-target="#edit-data" class="btn btn-primary">Edit</button>
<button ng-click="remove(x,$index)" class="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
Where did i go wrong?? can someone help me??
It is because the promise returning raw HTTP response from the server rather than parsed result data. You should try this instead :
$http.get('Api/items').then(function(response)
{
$scope.items = response.data;
console.log(response);
});
#digit already pointed the issue in you $hhtp call. Now For this JSON:
[{"id":"25","title":"abc","description":"sss"},{"id":"26","title":"sd","description":"sdsd"}]
.
No need to give index number inside ng-repeat. //{{ x[0].title }}
<tr ng-repeat="x in items">
<td>{{ $index + 1 }}</td>
<td>{{ x.title }}</td>
<td>{{ x.description }}</td>
<td>
<button data-toggle="modal" ng-click="edit(x.id)" data-target="#edit-data" class="btn btn-primary">Edit</button>
<button ng-click="remove(x,$index)" class="btn btn-danger">Delete</button>
</td>
</tr>

Unwanted <span class="ng-scope"> s</span>

I keep on getting an unwanted span tag with and "s" in it when viewing in Chrome. I've searched online but I am still stumped. Help please?
Stop AngularJS inserting <span class="ng-scope"></span> using ng-include
Looked at that post. Similar problem but I think my issue is caused by something else. I am not using ng-include.
Let me know if I can provide more details!
Here is the code https://github.com/benhbaik/crm
Here is public/views/users/all.html and a screenshot of the issue below it.
<div class="page-header">
<h1>
Users
<a href="/users/create" class="btn btn-default">
<span class="glyphicon glyphicon-plus"></span>
New User
</a>
</h1>
</div>
<div class="jumbotron text-center" ng-show="user.processing">
<span class="glyphicon glyphicon-repeat spinner"></span>
<p>Loading Users...</p>
</div>
<!-- GETTING RANDOM SPAN TAG HERE w/ "s" -->
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>_id</th>
<th>Name</th>s
<th>Username</th>
<th class="col-sm-2"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in user.users">
<td>{{ person._id }}</td>
<td>{{ person.name }}</td>
<td>{{ person.username }}</td>
<td class="col-sm-2">
Edit
Delete
</td>
</tr>
</tbody>
</table>
Here is a picture in dev tools.
There's a typo in your code:
<th>Name</th>s

refresh datatable after database update

In my html page,I have a table that displays data that come from my database. I want refresh the datatable when my database is updated without refresh all the page. I'm using PHP framwork Laravel.
<table id="example" class="table">
<thead>
<tr class="headings">
<th>ID </th>
<th>first name </th>
<th>last name </th>
<th>E-mail </th>
<th>birthday </th>
</tr>
</thead>
<tbody>
#foreach ($users as $user)
<tr class="even pointer">
<td class=" ">{{ $user->id }}</td>
<td class=" ">{{ $user->name }}</td>
<td class=" ">{{ $user->name2 }}</td>
<td class=" ">{{ $user->email }}</td>
<td class=" ">{{ $user->birthday }}</td>
</tr>
#endforeach
</tbody>
</table>
setTimeout(function(){
$( "#mytable" ).load( "your-current-page.html #mytable" );
}, 2000);
<button id="refresh-btn">Refresh Table</button>
<script>
$(document).ready(function() {
function RefreshTable() {
$( "#mytable" ).load( "your-current-page.html #mytable" );
}
$("#refresh-btn").on("click", RefreshTable);
// OR CAN THIS WAY
//
// $("#refresh-btn").on("click", function() {
// $( "#mytable" ).load( "your-current-page.html #mytable" );
// });
});
</script>
How to refresh table contents in div using jquery/ajax
Use this package, its great and i use it all the time. Which is a laravel wrapper for datatables.net
Github DataTables
Example using jQuery. Note this is but one of 1000 ways to do this. This just outlines the basic idea of the process of building a table using AJAX and Laravel. It's not meant to be a drop-in code segment.
Basic table code
<table id="example" class="table">
<thead>
<tr class="headings">
<th>ID </th>
<th>first name </th>
<th>last name </th>
<th>E-mail </th>
<th>birthday </th>
</tr>
</thead>
<tbody>
<?php // empty for now ?>
</tbody>
</table>
tablecontents.blade.php
<?php // Requires the $users table ?>
#foreach ($users as $user)
<tr class="even pointer">
<td class=" ">{{ $user->id }}</td>
<td class=" ">{{ $user->name }}</td>
<td class=" ">{{ $user->name2 }}</td>
<td class=" ">{{ $user->email }}</td>
<td class=" ">{{ $user->birthday }}</td>
</tr>
#endforeach
AjaxController.php (or similar)
function getUpdatedTable() {
$users = //get users
return view("tablecontents", [ "users", $users ]);
}
JavaScript
function updateTable() {
$.ajax({
url: "ajax/getUpdatedTable",
success: function (data) {
$("#example tbody").html(data);
}
});
}
$(document).ready(function () {
updateTable();
setInterval(updateTable, 5000); //Re-update every 5 seconds
});
Like mentioned inside the comments, you can use frameworks like jQuery to build a real-time module.
$( document ).ready( function () {
$.get('generic-handler.php')
.done( function (data) {
$('#realtime').innerHTML = data;
});
});
Inside your PHP file you put your code to display the database and then you can wrap it in a setInterval so your request is sent every X number of seconds.
Documentation:
$.get - jQuery
setInterval - JS

Set ng-checked value from two expressions

Here are my controller scopes
$scope.all = [
{'ID':'1','NAME':'BOB','BMW':1,'AUDI':'0'},
{'ID':'2','NAME':'PETE','BMW':'0','AUDI':'1'}
];
$scope.cars = [
{'ID':'1','CAR':'BMW'},
{'ID':'2','CAR':'AUDI'}
];
Here is my view
<table class="table">
<thead>
<tr>
<th>Name</th>
<th ng-repeat="c in cars">{{c.CAR}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="u in all">
<td>{{ u.NAME }}</td>
<td ng-repeat="c in cars">
<input type="checkbox" ng-checked="{{ u.c.CAR }}">
</td>
</tr>
</tbody>
</table>
Now i want to check the checkboxes based on the value of the cars ng-checked="{{ u.c.CAR }}" but i am not able to set it. And i am not getting any errors in firebug. Does angularjs provide such expressions or not? If now, what is other solution?? I want it to be set in the view itself
Update: I should have done this long back. Here is my JSFIDDLE
If I understand correctly, you want to resolve the 1 or 0 as true and false. You should be able to do something like this:
<tr ng-repeat="u in all">
<td>{{ u.NAME }}</td>
<td ng-repeat="c in cars">
<input type="checkbox" ng-checked="u[c.CAR] == 1">
</td>
</tr>
*Note: you don't need to interpolate { } inside ng-checked.
Here is an updated fiddle.
Yes, your expression is just a bit off:
ng-checked="u[c.car] == 1"
There is a mistake in your expression. Try this:
<tr ng-repeat="u in all">
<td>{{ u.NAME }}</td>
<td ng-repeat="c in cars">
<input type="checkbox" ng-checked="u[c.CAR].toString() == '1'">
</td>
</tr>
I would also suggest ensuring that your data is either all strings or all integers, rather than a mix of both.
Maybe you can solve your problem revisiting your ng-repeat, if you write something like u as object in all, instead of u in all, you can use the u items in the way you're trying to, whatever take a look at this module of angular ui ng-grid it has a lot of option and it can acomplish your needs
#vishwakumar that's a plunker for you, youneed to download the css too to setting in the right way the row height but that's a way to solve you're problem and trust me, ng-grid can solve a lot of problems other than that plunker
EDIT
i have put on it the check too, if you need the comment to understand the code in the plunker write it in the comment of the answer and i'll do it
That is your answer. You have some lame quote in your "all" list! Plus, your ng-repeat template is wrongly written.
Your $scope should be initialized as
function DefaultCtrl($scope) {
$scope.all = [
{'ID':'1','NAME':'BOB','BMW':'1','AUDI':'0'},
{'ID':'2','NAME':'PETE','BMW':'0','AUDI':'1'}
];
$scope.cars = [
{'ID':'1','CAR':'BMW'},
{'ID':'2','CAR':'AUDI'}
];
}
Your $scope's DOM should be
<div ng-app="" ng-controller="DefaultCtrl">
<table class="table">
<thead>
<tr>
<th>NAME</th>
<th ng-repeat="c in cars">{{c.CAR}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="u in all">
<td>{{ u.NAME }}</td>
<td ng-repeat="c in u.BMW">
<input type="checkbox" ng-checked="{{ c }}">
<td ng-repeat="c in u.AUDI">
<input type="checkbox" ng-checked="{{ c }}">
</td>
</td>
</tr>
</tbody>
</table>
</div>
Your answer should be

Categories