SampleJSONApp

Trying out a sample AngularJS to read external JSON file and display in html through jsfiddle

HTML

<h1 style=bold>Sample JSON display</h1>

<br/>
<div data-ng-controller='displayJSON'> 
    <span data-ng-model='json_data_arr'>
        JSON Data Array: {{json_data_arr}}
        <br/>
        <ul data-ng-repeat='ele in json_data_arr'>
        <li>{{ele}}</li>
        </ul>
    </span>

    <br/> 
    <span data-ng-model='json_data_hash'>
        JSON Data Hash: {{json_data_hash}}
    </span>
    <br/> 
    <span data-ng-repeat='(k1,k2_v2) in json_data_hash'>
        <ul data-ng-repeat='(k2,v2) in k2_v2'>
            <li>{{k1}}</li>
            <li>{{k2}}</li>
            <li>{{v2}}</li>
        </ul>
    </span>

</div>

JavaScript

var app = angular.module("sampleJSONApp", []);

app.service("sharedProperties", function ($http, $q) {
    var json_data_arr = [];
    var json_data_hash = {};
    return {
        getJSONDataHash: function () {
            if (0 == json_data_arr.length) {
                var sample_json = "https://dl.dropboxusercontent.com/s/i9pu80k962g6d3u/sample.json";
                return $http.get(sample_json).success(
                    function (result) {
                        json_data_hash = result;
                        var i = 0;
                        for (var k1 in json_data_hash) {
                            for (var k2 in json_data_hash[k1]) {
                                json_data_arr[i] = k1 + ":" + k2 + ":" + json_data_hash[k1][k2];
                                i++;
                            }
                        }
                        return json_data_hash;
                    }
                );
            }
            else {
                return $q.when(json_data_hash);
            } 
        },
        getJSONDataArr: function () {
            return json_data_arr;
        }
    }
});

app.controller("displayJSON", function ($scope, sharedProperties) {
    $scope.json_data_arr = sharedProperties.getJSONDataArr();
    sharedProperties.getJSONDataHash().then(function(data) {
        $scope.json_data_hash = data;
    });
});