Recently, I started learning AngularJS and encountered an issue with displaying objects from an array in my view.
This is the snippet of JavaScript code that I have:
// Initializing list:
vm.latestInvoices = { invoices: []};
....
// Adding function to viewmodel:
vm.getLatestInvoices = getLatestInvoices;
...
function getLatestInvoices() {
console.log("Test 1234");
var servicename = "GetLatestInvoicesRequest";
var params = {};
httpCall(servicename, params).then(function (data) {
vm.latestInvoices = data;
console.log(data);
return vm.latestInvoices;
})["catch"](function (data) {
console.log("getLatestInvoices error");
});
}
Here's the snippet of HTML view:
<div class="col-lg-12">
<p id="overview-headline">Invoices Overview</p>
<div class="scrollCustomers" ng-init="vm.getLatestInvoices()">
<table class="table table-hover">
<thead>
<tr>
<th>Client</th>
<th>Project</th>
<th>ID</th>
<th>Inv. Date</th>
<th>Start Date</th>
<th>End Date</th>
<th>DKK ex VAT</th>
<th>CIG</th>
<th>Attention</th>
<th>Cust. Manager</th>
<th>Regarding</th>
<th>Due Date</th>
<th>Finalized</th>
<th>Paid</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="invoice in invoices">
<td>{{invoice.CompanyName}}</td>
<td>Project Name</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Default</td>
<td></td>
<td></td>
<td></td>
<td>N/A</td>
<td>N/A</td>
<td>N/A</td>
</tr>
</tbody>
</table>
</div>
</div>
Although the Google Dev console displays the array and its objects correctly, the view doesn't show the default values for Project Name, Default, and N/A. It seems like the ng-repeat for invoices is not being called for some reason.
Thank you for your help!