0

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>
Mustapha Aoussar
  • 5,833
  • 15
  • 62
  • 107
  • That's not how you would do that. You should use $http from the controller to get the JSON, store the object in the scope and then iterate over the elements of its software array. – JB Nizet Feb 19 '16 at 12:12
  • Take a look at: http://stackoverflow.com/questions/16930473/angularjs-factory-http-get-json-file – Italo Ayres Feb 19 '16 at 12:34

2 Answers2

1

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>
MrNobody007
  • 1,827
  • 11
  • 32
  • The then() callback is useless that way: it transforms a promise of http response into a promise of http response. It would be useful if it was `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; });` – JB Nizet Feb 19 '16 at 12:59
0

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>
Hotwer
  • 150
  • 9