Try to present all data with ng-repeat from web service.
This is my controller JS (GetAllCtrl.js):
I get JSON data:
Now I want to get only company data without coupons data
(Company structure in JSON is: compName, id, email, coupons[])
In GetAllCtrl.js I have put the data in allComp variable.
This is GetAllCtrl.html:
I do ng-repeat in tr tag and use $index for loop on the array with data.
But in output, I get only 2 companies instead 4.
In clonsole.log I see 4 objects.
I'm new in AngularJS and JS and can't understand why it happened.
You are iterating over the wrong variable. It should be ng-repeat="c in getAllCtrl.allComp.data" and correspondingly change your td elements.
<tr ng-repeat="c in getAllCtrl.allComp.data track by $index">
<td align="center"><b>c.compName</b></td>
<td align="center"><b>c.id</b></td>
<td align="center"><b>c.email</b></td>
</tr>
Related
JSFiddle here
<tr ng-repeat="item in schedule.days[0].entries" scope="row">
<th>{{item.name}}</td>
<td ng-repeat="x in schedule.days.entries">{{x.value}}</td>
</tr>
I am trying to create a dynamic table in angularjs. I got to a point where I am able to display the name and table row but in table data I am not able to bind the value object property. Can someone please guide me what I am doing wrong on my ng repeat. I have been stuck on this for two days now some guidence would be really appreciated. Thank you
You're trying to access schedule.days.entries, but days is an array, not an object. You're missing the index, e.g.
<td ng-repeat="x in schedule.days[0].entries">{{x.value}}</td>
https://jsfiddle.net/0xsv2aq3/
Edit:
I was just showing how to access the values. If you want to take the values for the same name in different days and show it in the table, you can do something like this.
https://jsfiddle.net/bray3gmd/
I have an array that looks like the following:
I want to display that using angularJS ng-repeat, showing both count and value for each.
This is currently the HTML and angular I have but nothing displays.
I also don't need to display the 0 index in the array, I want to start from 1 if possible.
<tr ng-class="" ng-repeat="x in vm.data | filter: searchArray">
<td>{{x.value}}</td>
<td>{{x.count}}</td>
</tr>
I went back to the basics and understood that an ng-repeat is just a loop in javascript, and what do you need to do if you want to access data in JavaScript if your array is multi-dimensional? well you do a nested for loop, and thats exactly what I'm doing in this case.
This is the updated html/angularjs that displays the data I need:
<tbody>
<tr ng-repeat="x in vm.data">
<td ng-repeat="y in x">{{y.value}} {{y.count}}</td>
</tr>
</tbody>
Thank you guys again!
I´m currently trying to create some kind of dynamic template, which fetches data and meta information from two separate services. The final result should be an table showing the data with the correct labels. My plan was to create HTML-templates with different basic designs like a table with 3,4 or 5 columns. Then a matching controller should fetch the meta data from a service which should return an array with the id of an attribute and its name which should be displayed in the table. So far so good but now comes the tricky part:
The second service fetches the matching data for the template and the id of the meta data and the id of the actual data matches, so that you can match them correctly.
Here is the Code on plunkr: Link
The Main problem is the following piece of code:
<tr ng-repeat="person in persons">
<td>{{person.name}}</td>
<td>{{person.age}}</td>
<td>{{person.postal}}</td>
</tr>
In between the <td>-tags the data doesn´t get fetched dynamic but static. I don´t want to explicitly say how my attributes are called but use the fetched data from the meta service to know how my attributes are called.
So in the end the template should get the names of the attributes as well as the matching data. Do you guys have any good idea for me how to solve this?
EDIT
To make things a little more clear:
At the moment the data between the <td> tags is fetched static because the term {{person.name}} stands there hard coded. Let´s assume that the structure of the data chenges and there will be a country-attribute instead of the postal one. The template which stays the same still tries to get data from person.postal and not from person.country. So undefined or even an error would be the consequence.
To prevent this the names of the attributes should get fetched from a meta service and build in the HTML page.
The workflow should look somehow like this:
fetch the metadata --> get the names of the attributes
Set the names of the attributes inside the 'HTML' to call the correct attribute
fetch the actual data with the attributes defined before
Create the table
http://jsfiddle.net/Lt024p9h/1/
<div ng-controller="MyCtrl">
<table border="1">
<tr ng-repeat="person in persons">
<td ng-repeat="attr in query.attribs">
{{person[attr.id]}}
</td>
</tr>
</table>
</div>
Right so what is going on here?
So going by your fiddle, what we do if get the attributes you wish to display then using the object as an associative array.
This does require that the attr.id and the properties match up.
I am making a CRUD in angular + Php + MySql where I am facing a problem.
I have some data in database and want to show it on listing page.
To achieve this I made a ajax call in Angular and put the response in Scope Variable. If I print response its showing me below response but not able to show it in HTML. I am getting a problem i.e., :-
Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: person in crew, Duplicate key: string:", Duplicate value: "\""
Below is the Angular and HTML code :-
.controller('wrapperController', ['$scope','$rootScope','$http', function(scope,rootScope,http){
http.post("server/viewRecords.php")
.success(function(response){
console.log(response);
scope.crew = response;
});
}])
<tr ng-repeat="person in crew">
<td>{{person.name}}</td>
<td>{{person.desc}}</td>
<td> Edit </td>
<td> Delete </td>
</tr>
Please suggest why I am getting this error?
Thanks!!
AngularJS does not allow duplicates in a ng-repeat directive. Therefore, you can add track by $index into the ng-repeat as following:
<tr ng-repeat="person in crew track by $index">
<td>{{person.name}}</td>
<td>{{person.desc}}</td>
<td> Edit </td>
<td> Delete </td>
</tr>
Track by $index tells angular to use $index, which is auto increment, as a key instead of each individual element in the array. So, it won't be duplicate anymore.
I have an angularjs application that basically takes JSON and creates a HTML table, with the keys in the <thead> and the values as table rows.
I have a JSFiddle here where I take the JSON and create table rows based on the values. But I can't figure out how to take the keys and align them with the values as table headers.
My angular code:
<tr ng-repeat='row in rows'>
<td ng-repeat="data in row.data">
{{data}}
</td>
</tr>
and:
function TableController($scope){
$scope.rows = data;
}
Take a look here: How can I iterate over the keys, value in ng-repeat in angular
<tr ng-repeat="(key, value) in data">
<td> {{key}} </td> <td> {{ value }} </td>
</tr>
====EDIT==== Since you're doing it all in the same table, you'll need to do it a different way. You need to separate the header values while you're still in the controller so that you have a clean way to iterate over your list. Here the fiddle: http://jsfiddle.net/L93v5/1/
Your revised way looks bad because there are two different tables and the cell sizes are different. This will keep it all in the same table and make things a bit cleaner.