I have a an array of objects like this in angular:
$scope.data = [
{name:"John", group:"a"},
{name:"David", group:"a"},
{name:"Tom", group:"b"},
];
I want to present this data as something like this (in a template):
<h2>group a</h2>
John<br/>
David<br/>
<h2>groub b</h2>
Tom<br>
How would you suggest to do this? How can I go from the structure at the beginning to the structure at the end?
You could use grouby filter that would do group for you on basis of group property
Markup
<div ng-repeat="(key, value) in data | groupBy: 'group'">
<h1>group {{ key }}</h1>
<div ng-repeat="person in value">
{{ person.name }}
</div>
</div>
Related
I have the array of object but I don't know how to group by the id as order. I want to show it numerical order like 1,2,3 using ng-repeat
$scope.arrayofobject=[{name:"testMachne","id":1},{name:"testComputer","id":2},{name:"testCalc","id":3},{name:"testMac","id":2},{name:"testMachne","id":3},{name:"testMachne","id":1}]
You can use the orderBy filter:
angular.module('app',[]).controller('mainCtrl', function($scope){
$scope.arrayofobject=[{name:"testMachne","id":1},{name:"testComputer","id":2},{name:"testCalc","id":3},{name:"testMac","id":2},{name:"testMachne","id":3},{name:"testMachne","id":1}];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='mainCtrl'>
<div ng-repeat="json in arrayofobject | orderBy:'id' " ng-if='json.id !== 1'>
{{json.name}}
</div>
</div>
I'm dynamically loading templates which is working fine. Now my concern is I need to add a JavaScript logic to template
I need to use something like this in my template.
{{ var entries = 0; }}
{{ for(var r = 0; r < d; r++) }}
Suppose my template returns this HTML
<div ng-repeat="x in names" ><span>{{x.name}}</span>{{some logic here which is plain js. var a=[] if(a=b){}}}</div>
My question is how to achieve this.
<div ng-repeat="entry in entries track by $index">
{{entry}},{{$index}}
</div>
Use ng-repeat.
<div ng-repeat="entry in entries">
{{entry}}
</div>
If you need the index:
<div ng-repeat="entry in entries">
{{entry}},{{$index}}
</div>
Docs: https://docs.angularjs.org/api/ng/directive/ngRepeat
<div ng-init="entries[0,1,2,3,4]">//Use ng-int to initialize data
<div ng-repeat="data in entries">// use ng-repeat to loop over
{{data}}
</div>
</div>
I have an object with key value pairs that looks like this. You will see that the key has an array as its value.
$scope.testObj = {
"London":[
{"id":1,"city":"London","country":"GB","name":"Test1"},
{"id":4,"city":"London","country":"GB","name":"Test2"}
],
"Los Angeles":[
{"id":8,"city":"LA","country":"US","name":"Test3"}
]
}
I want to display the name next to the city in the front end using angular. To do this I have tried many approaches, and used track by $index, but cannot figure out how to get this working.
<div ng-repeat="(key, val) in jobsByCity track by $index">
{{key}}:{{val[$index].name}}
</div>
I have looked at this approach too, nesting ng-repeat
<div ng-repeat="(key, val) in testCity">
{{key}}
<div ng-repeat="test in val[$index].name">
{{test}}
</div>
</div>
Just use another ng-repeat to iterate over the value:
<div ng-repeat="(key, val) in jobsByCity">
<div ng-repeat="subValue in val track by $index">
{{key}}:{{subValue.name}}
</div>
</div>
Also note that your Los Angeles property needs to be in quotes, otherwise it isn't valid javascript.
See this jsfiddle
I have data returned from laravel in the following format. I store this in localstorage to be used by the users once he logs in.
I am using angular in frontend, this is how I store it
$http.get($scope.url).success(function(redata){
localStorage.setItem('session', JSON.stringify(redata));
$scope.fulldata = JSON.parse(localStorage.getItem("session"));
});
This is the json data
{
"tweets":[
{"id":"3","uid":"15","tweets":"Molly's first tweet"},
{"id":"4","uid":"15","tweets":"molly again here, second tweet"},
{"id":"5","uid":"15","tweets":"third tweet"}
],
"users":[
{"id":"1","name":"rob","email":"rob#gmail.com","password":""},
{"id":"2","name":"bob","email":"bob#gmail.com","password":""}
]
}
I am able to display the json using angular ng-repeat
<p ng-repeat="data in fulldata">
{{ data }}
</p>
But if I need to just display the content of tweets i.e "tweets" field of tweets, how do I do that.
I tried :-
<p ng-repeat="data in fulldata">
{{ data.tweets.tweets }}
</p>
but this did not work.
Thanks
you have to loop on tweets array.
<p ng-repeat="data in fulldata.tweets">
{{ data.tweets }}
</p>
You are looping through fulldata, which has just single tweets element. you need to loop through fulldata.tweets
<p ng-repeat="data in fulldata.tweets">
{{ data.tweets}}
</p>
or if you need to loop through all fulldata for all tweets
<div ng-repeat="data in fulldata">
<p ng-repeat="tweet in data.tweets">
{{ tweet.tweets }}
</p>
</div>
since the inner JSON is nested so you need two nested ng-repeat
<div ng-repeat="data in fulldata">
<p ng-repeat="tweets in data.tweets">
{{ tweets.tweets }}
</p>
</div>
<p ng-repeat="tweet in fulldata.tweets">
{{ tweet.tweets }}
</p>
This is what you want to do, no need for nested ng-repeats unless you specifically want that.
I have a large JSON file structured like the following which I'm trying to loop over in Angular:
{
"subject1":[
{
"title":"titlehere",
"info":"infohere."
}],
"subject2":[
{
"title":"titlehere",
"info":"infohere."
}],
"subject3":[
{
"title":"titlehere",
"info":"infohere."
}]
}
I want my page to grab the key for each 'category' and then the display the title underneath it. I'm able to get the key to display but I can't seem to figure out how to grab the string for each title. This is what I have in my HTML:
<div ng-repeat="(key, value) in faqs">
<h3>{{ key }}</h3>
<ul>
<li>{{ value }}</li>
</ul>
</div>
I'm not sure what I should be using instead of {{ value }} which grabs nothing but the entire JSON file as a string. I tried {{ value.title }} and still had no luck.
Any suggestions?
Use {{ value[0].title }}
your code be
<div ng-repeat="(key, value) in faqs">
<h3>{{ key }}</h3>
<ul>
<li ng-repeat="val in value">{{ val.title }}</li>
</ul>
</div>