Create states from array object in Angular ui-router - angularjs

Question

I am able to create a state from an object like so...
var stateTest = {
name: '2',
views: {
'video': {
templateUrl: 'templates/2_video.html',
controller: 'VideoCtrl'
},
'content': {
template: '{{content}}',
controller: 'VideoCtrl'
}
}
};
$stateProvider.state(stateTest);
but what I need to do is create states from an array. This was my attempt and it is not working.
var stateList = [
{
name: '3',
views: {
'video': {
templateUrl: 'templates/3.html',
controller: 'VideoCtrl'
},
'content': {
template: '{{content}}',
controller: 'VideoCtrl'
}
}
},{
name: '4',
views: {
'video': {
templateUrl: 'templates/4.html',
controller: 'VideoCtrl'
},
'content': {
template: '{{content}}',
controller: 'VideoCtrl'
}
}
}
];
$stateProvider.state(stateList);
Then I thought I needed to try the foreach item approach...
var stateList = [
{
name: '3',
templateUrl: 'templates/3.html',
controller: 'VideoCtrl',
template: 'content'
},{
name: '4',
templateUrl: 'templates/4.html',
controller: 'VideoCtrl',
template: 'content'
},
];
stateList.forEach(function (item) {
VideoTest.stateProvider.state(item[0],{
views: {
'video': {
templateUrl: item[1],
controller: item[2]
},
'content': {
template: item[3],
controller: item[2]
}
}
});
});
Still no good :( Ideas!?
------- EDIT ------
As Craig pointed out in the answer, my array call was jacked up but I also didn't need to call the main module, but rather just place this in a module config like so:
VideoTest.config(function($stateProvider) {
var stateList = [
{
name: '3',
views: {
'video': {
templateUrl: 'templates/3.html',
controller: 'VideoCtrl'
},
'content': {
template: '{{content}}',
controller: 'VideoCtrl'
}
}
},{
name: '4',
views: {
'video': {
templateUrl: 'templates/4.html',
controller: 'VideoCtrl'
},
'content': {
template: '{{content}}',
controller: 'VideoCtrl'
}
}
}
];
stateList.forEach(function (item) {
$stateProvider.state(item.name,{
views: {
'video': {
templateUrl: item.views.video.templateUrl,
controller: item.views.video.controller
},
'content': {
template: item.views.content.template,
controller: item.views.content.controller
}
}
});
});
});

Answer 1

Your problem with your forEach implementation is indexing the item[0]. The item passed to the forEach callback (i.e. arg[0]) is the element itself so indexing this as an array doesn't make sense.
Your data:
var stateList = [
{
name: '3',
views: {
'video': {
templateUrl: 'templates/3.html',
controller: 'VideoCtrl'
},
'content': {
template: '{{content}}',
controller: 'VideoCtrl'
}
}
},{
name: '4',
views: {
'video': {
templateUrl: 'templates/4.html',
controller: 'VideoCtrl'
},
'content': {
template: '{{content}}',
controller: 'VideoCtrl'
}
}
}
];
and state setup:
stateList.forEach(function (item) {
VideoTest.stateProvider.state(item.name,{
views: {
'video': {
templateUrl: item.views.video.templateUrl,
controller: item.views.video.controller
},
'content': {
templateUrl: item.views.content.templateUrl,
controller: item.views.content.controller
}
}
});
});