Create states from array object in Angular ui-router

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
            }
        }
    });
});