Is there a way to perform nested loops in an AngularJS view without creating hidden dummy elements?
Something like this:
<ul>
<li ng-repeat="gem in activeHero.gems"
ng-repeat="(key, value) in gem.attributes"
ng-repeat="attr in value">
{{attr.text}}
</li>
</ul>
or this
<ul>
<li ng-repeat-start="gem in activeHero.gems"
ng-repeat-start="(key, value) in gem.attributes"
ng-repeat="attr in value">
{{attr.text}}
</li ng-repeat-end
ng-repeat-end>
</ul>
Neither of these is possible AFAIK.
I basically want my HTML to have a different structure than the JSON it's based on.
How could I achive this? Is there a way to create loops inside a view without an HTML element?
The examples above would loop over a JSON structure like this:
JSON (stripped out a lot for clarity)
"activeHero" = {
"gems" : [ {
"attributes" : {
"primary" : [ {
"text" : "+220 Intelligence"
} ],
"secondary" : [ ],
"passive" : [ ]
}
}, {
"attributes" : {
"primary" : [ {
"text" : "+220 Intelligence"
} ],
"secondary" : [ ],
"passive" : [ ]
}
}, {
"attributes" : {
"primary" : [ {
"text" : "+160 Intelligence"
} ],
"secondary" : [ ],
"passive" : [ ]
}
} ]
}
(This is an actual JSON response from the Blizzard API for the video game "Diablo 3")
Try format your json before render;
$scope.formattedData = [];
angular.forEach(activeHero.gems, function(value, key){
var item = {
//set filed you want
}
angular.forEach(value.atrtibutes, function(value2, key2){
item['propyouwant'] = value2[propyouwant]
angular.forEach(value2.primary, function(value3, key3){
item['propyouwant'] = value3[propyouwant]
$scope.formattedData.push(angular.extend({}, item));
})
})
})
//now you can render your data without somersould
EDIT
For increasing performance and avoid to use angular extend;
$scope.formattedData = [];
angular.forEach(activeHero.gems, function(value, key){
angular.forEach(value.atrtibutes, function(value2, key2){
angular.forEach(value2.primary, function(value3, key3){
//start build your item here
var item = {
prop1: value['prop'],
prop2: value2['prop']
}
//not required extend item;
$scope.formattedData.push(item);
})
})
})
Related
I am trying to parse my Twitter Archive Data.
The data in my Contact list is as follows:
window.YTD.contact.part0 = [ {
"contact" : {
"emails" : [ "mail#gmail.com" ],
"phoneNumbers" : [ ]
}
}, {
"contact" : {
"emails" : [ "mail#gmail.com" ],
"phoneNumbers" : [ ]
}
}, {
"contact" : {
"emails" : [ "mail#gmail.com" ],
"phoneNumbers" : [ ]
}
}, {
"contact" : {
"emails" : [ ],
"phoneNumbers" : [ "+1234" ]
}
}
And I want to parse this data like this:
Contact 1:
Email: Email here.
Phone Number: Phonenumber here.
File type: JS.
I tried to parse it using the json library in Python, but I couldn't. Could you help? Thank you.
You can store this is in a variable let's say data. Than,
for d in data:
print(d['contact']['emails'])
print(d['contact']['phoneNumbers'])
//list 'data' stores contact list
for current in range(len(data)):
contact = dict(data[current]['contact'])
print('Contact '+ (str)(current + 1) + ':')
if( len(contact['emails']) > 0):
print('Email:' + contact['emails'][0])
else:
print('Email:')
if(len(contact['phoneNumbers']) > 0):
print('Phone Number:' + contact['phoneNumbers'][0])
else:
print('Phone Number:')
I need to map my List that's with in list but couldn't do it .
I tried using hasmany but it wont help .
Unless its mapping i'm unable to loop my tpl as its not detecting the proper objects.
Below is my Json:
{
"containers":[
{
"count":654,
"week":47
},
{
"count":779,
"week":48
}
],
"vessels":[
{
"count":44,
"week":47
},
{
"count":39,
"week":48
}
]
}
My model :
Ext.define('ContainerChartStore', {
extend : 'Ext.data.Model',
fields : [{
name : "containers",
type : Ext.data.Types.List
},{
name : "vessels",
type : Ext.data.Types.List
}],
hasMany: {
model: 'InboundObjects',
name: 'inboundObjects'
}
});
Ext.define('InboundObjects', {
extend: 'Ext.data.Model',
config: {
fields : [{
name : "count",
type : Ext.data.Types.NUMBERARRAY
},{
name : "week",
type : Ext.data.Types.NUMBERARRAY
}]
}
});
I receive the below data from my REST API
[
{
// restaurant details
},
"city": {}, // city details
"location": {}, // location details
"menu_categories": [
{
// menu_categories details
"menu_items": [
{
// menu_items details
"menu_modifier_groups": [
{
// menu_modifier_groups details
"menu_modifier_items": []
}
]
}
]
}
]
}
]
In this data, I'm fetching a single restaurant with its menu_categories that then has a child menu_items which then has a child menu_modifier_groups which then has a child menu_modifier_item.
As you can see I have arrays nested within each other.
I want to use ng-repeat to group menu_items under menu_categories. something like below;
menu_category 1
menu_item 1
menu_item 2
menu_category 2
menu_item 3
menu_item 4
Also how can I use ng-repeat on just one for the array? I have the data assigned to $scope.restuarant
Any guidance appreciated
You can try this (instead of title you can use whatever property you have set):
<ul>
<li data-ng-repeat="category in restaurant.menu_categories">
{{ category.title }}
<ul data-ng-if="category.menu_items">
<li data-ng-repeat="item in category.menu_items">{{ item.title }}</li>
</ul>
</li>
</ul>
You can use a tree view to display the data
Take a look at this : http://ngmodules.org/modules/angular.treeview
or this link https://github.com/eu81273/angular.treeview ( it the same )
it take for example this data :
$scope.treedata =
[
{ "label" : "User", "id" : "role1", "children" : [
{ "label" : "subUser1", "id" : "role11", "children" : [] },
{ "label" : "subUser2", "id" : "role12", "children" : [
{ "label" : "subUser2-1", "id" : "role121", "children" : [
{ "label" : "subUser2-1-1", "id" : "role1211", "children" : [] },
{ "label" : "subUser2-1-2", "id" : "role1212", "children" : [] }
]}
]}
]},
{ "label" : "Admin", "id" : "role2", "children" : [] },
{ "label" : "Guest", "id" : "role3", "children" : [] }
];
You can easly adapt the rest api data to this
Working plunker - http://plnkr.co/edit/fjDsJbmd7DIlBK3xrdyu.
To group menu_items under menu_categories using ng-repeat
<ul ng-repeat="(key, value) in restaurant" ng-init="outerIndex = $index">
menu_category {{$index + 1}}
<li ng-init="innerIndex = $index" ng-repeat="menu_cat in value.menu_categories">
menu_item {{($parent.$index*value.menu_categories.length)+($index+1)}}
</li>
</ul>
And the output would be:
menu_category 1
- menu_item 1
- menu_item 2
menu_category 2
- menu_item 3
- menu_item 4
menu_category 3
- menu_item 5
- menu_item 6
Hope this answered your question.
I am trying to display multiple "unread" alerts, but need to attach the organizations label to it if the organizations id is equal to the unread domainId.
How can I acheive this while displaying the results in a handlebars #each function?
JSON
"alerts" : {
"organizations" : [ {
"id" : 165,
"label" : "Label #1"
}, {
"id" : 170,
"label" : "Label #2"
}],
"unread" : [ {
"id" : 20022,
"domainId" : 170,
"created" : "2015-10-13T16:48:08Z",
}, {
"id" : 20022,
"domainId" : 165,
"created" : "2015-10-13T16:48:08Z",
}]
};
Backbone.js:
context: function() {
var d = this.options.data
return {
welcomeAlerts: d.alerts,
welcomeOrg: d.alerts.organizations.label
}
},
Handlebars//HTMl
{{#each welcomeAlerts.unread}}
<li class="alert-item stripe-list-item">
<h4 class="org">{{welcomeOrg}}</h4>
<h4 class="timestamp">{{created}}</h4>
</li>
{{/each}}
Simply transform the data beforehand
var data = {
"alerts" : {
"organizations" : [ {
"id" : 165,
"label" : "Label #1"
}, {
"id" : 170,
"label" : "Label #2"
}],
"unread" : [ {
"id" : 20022,
"domainId" : 170,
"created" : "2015-10-13T16:48:08Z",
}, {
"id" : 20022,
"domainId" : 165,
"created" : "2015-10-13T16:48:08Z",
}]
}
};
var organizationDict = _.groupBy(data.alerts.organizations, 'id');
var unreadWithOrganizations = _(data.alerts.unread)
.map((message) => {
return {
...message,
organization: organizationDict[message.domainId]
}
})
.value();
and display your data
{{#each unreadWithOrganizations}}
<li class="alert-item stripe-list-item">
<h4 class="org">{{organization.label}}</h4>
<h4 class="timestamp">{{created}}</h4>
</li>
{{/each}}
Demo: http://jsbin.com/sadoluhepu/edit?js,console
I've made an example using lodash library and es6. You might want to stick with ES6 and underscore, which implementation might differ.
How I Sort a nested Array (2D Array) array from filter of angularjs. It's very Complicated for Me. anybody can help. appreciated for me. thanks...
I have a 2D Array. now how I sort it within ng-repeat.
Template File...
<ul>
<span ng-repeat="list in lists">
<li ng-repeat="list_ in list.list1 | orderBy:'name'">{{list_.name}}</li>
</span>
</ul>
JS file...
$scope.lists = [
{
no : 1,
list1 : [{
name : 'A'
},
{
name : 'M'
}]},
{
no : 2,
list1 : [{
name : 'B'
}]},
{
no : 5,
list1 : [{
name : 'Z'
}]},
{
no : 3,
list1 : [{
name : 'X'
},
{
name : 'T'
}]}
]
plunker here
It could achievable by flatten the array will all the inner object at the same level using custom filter
Markup
<body ng-app="myApp" ng-controller="myCon">
<ul>
<span ng-repeat="list in lists | flatten | orderBy:'+name'">
<li>{{list.name}}</li>
</span>
</ul>
</body>
Filter
app.filter('flatten', function(){
return function(array){
var flattenArray = [];
angular.forEach(array, function(value, index){
angular.forEach(value.list1, function(val, index){
flattenArray.push(val);
})
})
return flattenArray;
}
})
Plunkr Here
to answer your question of how to sort a nested Array array with an angularjs filter, you actually are already doing so. It isn't clear with your data, so I expanded it to make it show what is happening already:
http://plnkr.co/edit/8SjuLc?p=preview
js
var app = angular.module("myApp", []);
app.controller("myCon", myConFun);
myConFun.$inject = ['$scope'];
function myConFun($scope) {
$scope.lists = [{
no: 1,
list1: [{
name: 'Z'
}, {
name: 'X'
}, {
name: 'Y'
}, {
name: 'A'
}, {
name: 'M'
}, {
name: 'C'
}, {
name: 'B'
}]
}, {
no: 2,
list1: [{
name: 'B'
}]
}, {
no: 5,
list1: [{
name: 'Z'
}]
}, {
no: 3,
list1: [{
name: 'X'
}, {
name: 'T'
}]
}
]
}
html
<ul>
<span ng-repeat="list in lists">
<li ng-repeat="sublist in list.list1 | orderBy:'name'">
{{sublist.name}}
</li>
----------
</span>
</ul>
output:
You may need to expand your question further if this isn't the behavior you need