SampleJSONApp_Array&Hash

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

by Abhijith DA

HTML

<h1 style=bold>Sample JSON display using Array & Hash</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) {
    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";
                $http.get(sample_json).success(

                function (result) {
                    json_data_hash = result;
                    var i = 0;
                    for (k1 in json_data_hash) {
                        for (k2 in json_data_hash[k1]) {
                            json_data_arr[i] = k1 + ":" + k2 + ":" + json_data_hash[k1][k2];
                            i++;
                        }
                    }
                });
            }
            return json_data_hash;
        },
        getJSONDataArr: function () {
            return json_data_arr;
        }
    }
});

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