I have a JSON file with this object:
{"software":[
{"name":"Eclipse", "version":"4.5"},
{"name":"Sublime Text", "version":"3.0"},
{"name":"ConEmu", "version":"1.5"}
]}
I want to get the values using the AngularJS built-in directives, I tried with ng-include and ng-repeat, but doesn't work:
<div ng-include="'software.JSON'" ng-repeat="sw in software">{{sw.name}} v{{sw.version}}</div>
Demo app:
var MyApp = angular.module("MyApp",[]); // Inject app dependencies here
Declare service to fetch JSON file:
MyApp.factory("ConstantsService", ["$http", function($http){
var ConstantsService = {};
ConstantsService.getConstants = function(){
return $http({
method: "GET",
url: "constants.json", //JSON file location
headers: {
'Content-Type': 'application/json'
}
})
.then(function(data){
return data;
});
}
return ConstantsService;
}]);
Inject ConstantsService into your controller and access JSON content:
MyApp.controller('FetchJsonController', ['$scope', 'ConstantsService', function($scope, ConstantsService){
ConstantsService.getConstants().then(function(response){
console.log(response.data.software); //Software object declared in JSON file
$scope.software = response.data.software;
});
}]);
Finally define template:
<div ng-controller="FetchJsonController">
<div ng-repeat="sw in software">{{sw.name}} v{{sw.version}}</div>
</div>
then(function(response) { return response.data; }): that would make it return a promise of data instead of a promise of response. The content-type header is also useless: application/json is the default, set automatically by angular. I'd reduce the service to return $http.get('constants.json').then(function(response) { return response.data; });ng-include directive is not made for this purpose.
ngInclude
- directive in module ng Fetches, compiles and includes an external HTML fragment.
Try achieving it with an $http.get in your controller. But if you really need a directive for it...
http://jsfiddle.net/U3pVM/22528/
JS
(function() {
var app = angular.module('app', []);
app.controller("IncludeJsonController", IncludeJsonController);
app.directive("includeJson",[function() {
return {
template: "<div ng-repeat=\"sw in vm.software\"><p>{{ sw.name }} v{{ sw.version}}</p></div>",
controller: "IncludeJsonController",
restrict: "E",
link: function(scope, element, attr, ctrl) {
scope.vm = {};
scope.vm.filename = attr.filename;
scope.vm.software = ctrl.getSoftwares();
}
}}]);
IncludeJsonController.$inject = ['$scope', '$http'];
function IncludeJsonController($scope, $http) {
var self = this;
self.getSoftwares = getSoftwares;
function getSoftwares() {
//in your case, use $http.get('path/to' + $scope.vm.filename);
return [
{"name":"Eclipse", "version":"4.5"},
{"name":"Sublime Text", "version":"3.0"},
{"name":"ConEmu", "version":"1.5"}
];
}
}
}());
HTML
<div ng-app="app">
<include-json filename="software.json"></include-json>
</div>
