Load json file in javascript

Question

I would like to use a external json file instead of my var states . Is this possible? I tried with something like var states = require('../config/states.json') but it does not work, neither with $.getJSON().

function configState($stateProvider, $urlRouterProvider, $compileProvider) {

    function resolveUrl(path){
        var loadUrl = { 
           loadModule: ['$ocLazyLoad', function($ocLazyLoad) {
               return $ocLazyLoad.load(path);
           }]
        };
        return loadUrl;
    }

    $compileProvider.debugInfoEnabled(true);
    $urlRouterProvider.otherwise("/dashboard");

    var states = {
        "dashboard": {
            "name": "dashboard",
            "url": "/dashboard",
            "templateUrl": "./views/dashboard.html",
            "data": {
                "pageTitle": "Dashboard",
            }
        },
        "users": {
            "name": "users",
            "url": "/users",
            "controller": "usersCtrl",
            "templateUrl": "/users/views/users.html",
            "resolve": "resolveUrl('/users/app/js/compiled/users_app.js')"
        },      
        "invoices": {
            "name": "invoices",
            "url": "/invoices",
            "controller": "invoicesCtrl",
            "templateUrl": "/invoices/views/invoices.html",
            "resolve": "resolveUrl('/invoices/app/js/compiled/invoices_app.js')"
        },
        "invoices.upload": {
            "name": "invoices.upload",
            "url": "/upload",
            "controller": "invoicesCtrl",
            "templateUrl": "/invoices/views/invoices.html",
            "resolve": "resolveUrl('/invoices/app/js/compiled/invoices_app.js')"
        },
        "reports": {
            "name": "reports",
            "url": "/reports",
            "templateUrl": "./views/reports.html",
            "data": {
                "pageTitle": "Reports",
            }
        }
    };

    for(var prop in states){
        $stateProvider.state(prop, states[prop]);      
    }

}

angular
    .module('homer')
    .config(configState)
    .run(function($rootScope, $state) {
        $rootScope.$state = $state;
    });

Answer 1

I think Browserify could be the solution here.

So you would have two files

data.js

module.exports = = {
        "dashboard": {
            "name": "dashboard",
            "url": "/dashboard",
            "templateUrl": "./views/dashboard.html",
            "data": {
                "pageTitle": "Dashboard",
            }
        },
        "users": {
            "name": "users",
            "url": "/users",
            "controller": "usersCtrl",
            "templateUrl": "/users/views/users.html",
            "resolve": "resolveUrl('/users/app/js/compiled/users_app.js')"
        },      
        "invoices": {
            "name": "invoices",
            "url": "/invoices",
            "controller": "invoicesCtrl",
            "templateUrl": "/invoices/views/invoices.html",
            "resolve": "resolveUrl('/invoices/app/js/compiled/invoices_app.js')"
        },
        "invoices.upload": {
            "name": "invoices.upload",
            "url": "/upload",
            "controller": "invoicesCtrl",
            "templateUrl": "/invoices/views/invoices.html",
            "resolve": "resolveUrl('/invoices/app/js/compiled/invoices_app.js')"
        },
        "reports": {
            "name": "reports",
            "url": "/reports",
            "templateUrl": "./views/reports.html",
            "data": {
                "pageTitle": "Reports",
            }
        }
    };

main.js

function configState($stateProvider, $urlRouterProvider, $compileProvider) {

    function resolveUrl(path){
        var loadUrl = { 
           loadModule: ['$ocLazyLoad', function($ocLazyLoad) {
               return $ocLazyLoad.load(path);
           }]
        };
        return loadUrl;
    }

    $compileProvider.debugInfoEnabled(true);
    $urlRouterProvider.otherwise("/dashboard");

    var states = require('data.js');

    for(var prop in states){
        $stateProvider.state(prop, states[prop]);      
    }

}

angular
    .module('homer')
    .config(configState)
    .run(function($rootScope, $state) {
        $rootScope.$state = $state;
    });

Then you can bundle everything in a single file with

browserify main.js -o bundle.js

Answer 2

jQUery's getJSON() method should work just fine. Then use the each() method to go over each item in the resulting data.

$.getJSON( "states.json", function( data ) {
  $.each( data, function( prop, val ) {
    $stateProvider.state(prop, val);      
  });
});