Angular JS and JSON files

[atkins.chrisw]

So I am thinking that it would be possible to use a JSON file to give the references to my HTML sheet for data points, labels, etc. DO you have a good example on how to incorporate a custom JSON file for that integration?

[Jared Wiltshire]

You would need to load the JSON file from your app.js file and insert the data structure onto your scope or something.

Add the $http service to your run function and use it to fetch the JSON file and store the resulting data on your root scope.

mdAdminApp.run([
    ...
    ...
    '$http',
function(..., ..., $http) {

    $http({
        method: 'GET',
        url: './path/to/jsonData.json'
    }).then(function(result) {
        $rootScope.jsonData = result.data;
    });

[atkins.chrisw]

Is there a way I could reference a JSON for each separate page? Would I do that in the app.js, or do I need to make a new folder for all the JSON's.with a refence or controller

[Jared Wiltshire]

Hey @atkins-chrisw
Add this to your app.js -

mdAdminApp.directive('getJson', ['$http', function($http) {
    return {
        scope: {
            url: '@',
            output: '='
        },
        link: function($scope, $element, $attrs) {
            $http({
                method: 'GET',
                url: $scope.url
            }).then(function(result) {
                $scope.output = result.data;
            });
        }
    }
}]);

You can then use something like this on your page -

<get-json url="/modules/dashboards/web/mdAdmin/manifest.json" output="myData"></get-json>
<pre ng-bind="myData|json"></pre>

[atkins.chrisw]

Thanks Jared. Would I do this same process to add a way to link new controllers to each page? I have a carousel controller I found to make a carousel window in one of my pages.

[atkins.chrisw]

Sorry Jared,

I am getting the following errors.

GET http://demo.systemvitality.com:8080/js/loaderConfig.js?_=1478807675744 404 (Not Found) jquery.js4

Uncaught Syntax Error : Unexpected Token <

And the json is showing up on the screen itself. The whole thing. Am I referencing it wrong? Ill attach the files. 0_1478807875151_admiss.json 0_1478807890064_test.html 0_1478807902844_app.js

[Jared Wiltshire]

@atkins.chrisw said in Angular JS and JSON files:

Thanks Jared. Would I do this same process to add a way to link new controllers to each page? I have a carousel controller I found to make a carousel window in one of my pages.

Yes you can add controllers this way. I'll post the details in the other thread you started.

@atkins.chrisw said in Angular JS and JSON files:

I am getting the following errors.

GET http://demo.systemvitality.com:8080/js/loaderConfig.js?_=1478807675744 404 (Not Found) jquery.js4

This is the wrong location for loaderConfig.js, that belongs in /resources/loaderConfig.js so I'm not sure why its being referenced at /js/loaderConfig.js

Uncaught Syntax Error : Unexpected Token <

This is a different error to above, where is this occurring?

And the json is showing up on the screen itself. The whole thing. Am I referencing it wrong?

That is correct, I put a pre tag in the example to display the loaded JSON so you could check it was being loaded properly.