Adding and accessing a json file as an external reference in JSFiddle

Question

Can you add a json file as an external reference in JSFiddle.

Has anyone got an example of this? I tired Googleing it but could not find anything.

Thanks

score 1 · Answer 1 · edited May 23 '17 at 12:30

Here is another thread in stackoverflow: How to add local json file in jsfiddle?

The above mentioned solution worked for me: Sample JSON display. (Just Fyi in case you are wondering about the code).

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) {
                    var i = 0;
                    for (k1 in result) {
                        json_data_hash[k1] = result[k1];
                        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();
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body data-ng-app="sampleJSONApp">
<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>

</body>

Adding and accessing a json file as an external reference in JSFiddle

1 Answers1