在JSFiddle中添加和访问json文件作为外部引用

时间:2014-12-14 16:47:50

标签: angularjs jsfiddle

你可以在JSFiddle中添加一个json文件作为外部引用。

有没有人有这方面的例子?我累了谷歌但却找不到任何东西。

由于

1 个答案:

答案 0 :(得分:1)

这是stackoverflow中的另一个线程:How to add local json file in jsfiddle?

上述解决方案对我有用:Sample JSON display。 (只是你想知道代码的情况)。

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>