Как получить данные json из внешнего файла с помощью angularjs

Question

Я следил за этим url. Здесь я пишу переменную данных и присваиваю данные в самой директиве.

Но я имею JSon данные в отдельном sample.json file.Then как получить данные sample.json в угловую directive.Can кто-то пожалуйста, помогите мне по этому вопросу ...

Мои JS :

angular.module('myApp').directive('multiLine', [ 
    function() { 
    return { 
     restrict: 'E', 
     scope: { 
     data: '=' 
     }, 
     link: function(scope, element) { 


var data = [ 
    { 
     "City": "New York", 
     "Data": [ 
      { 
       "Date": "20111001", 
       "Value": "63.4" 
      }, 
      { 
       "Date": "20111002", 
       "Value": "58.0" 
      }, 
      { 
       "Date": "20111003", 
       "Value": "53.3" 
      } 
     ] 
    }, 
    { 
     "City": "San Francisco", 
     "Data": [ 
      { 
       "Date": "20111001", 
       "Value": "62.7" 
      }, 
      { 
       "Date": "20111002", 
       "Value": "59.9" 
      }, 
      { 
       "Date": "20111003", 
       "Value": "59.1" 
      } 
     ] 
    }, 
    { 
     "City": "Austin", 
     "Data": [ 
      { 
       "Date": "20111001", 
       "Value": "72.2" 
      }, 
      { 
       "Date": "20111002", 
       "Value": "67.7" 
      }, 
      { 
       "Date": "20111003", 
       "Value": "69.4" 
      } 
     ] 
    } 
]; 

var margin = { 
    top: 20, 
    right: 80, 
    bottom: 30, 
    left: 50 
}, 
width = 560 - margin.left - margin.right, 
    height = 300 - margin.top - margin.bottom; 

var parseDate = d3.time.format("%Y%m%d").parse; 

var x = d3.time.scale() 
    .range([0, width]); 

var y = d3.scale.linear() 
    .range([height, 0]); 

var color = d3.scale.category10(); 

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom"); 

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left"); 

var line = d3.svg.line() 
    .interpolate("basis") 
    .x(function (d) { 
    return x(d.Date); 
}) 
    .y(function (d) { 
    return y(d.Value); 
}); 

var svg = d3.select(element[0]).append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

color.domain(data.map(function (d) { return d.City; })); 

data.forEach(function (kv) { 
    kv.Data.forEach(function (d) { 
     d.Date = parseDate(d.Date); 
    }); 
}); 

var cities = data; 

var minX = d3.min(data, function (kv) { return d3.min(kv.Data, function (d) { return d.Date; }) }); 
var maxX = d3.max(data, function (kv) { return d3.max(kv.Data, function (d) { return d.Date; }) }); 
var minY = d3.min(data, function (kv) { return d3.min(kv.Data, function (d) { return d.Value; }) }); 
var maxY = d3.max(data, function (kv) { return d3.max(kv.Data, function (d) { return d.Value; }) }); 

x.domain([minX, maxX]); 
y.domain([minY, maxY]); 

svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis); 

svg.append("g") 
    .attr("class", "y axis") 
    .call(yAxis) 
    .append("text") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 6) 
    .attr("dy", ".71em") 
    .style("text-anchor", "end") 
    .text("Temperature (ºF)"); 

var city = svg.selectAll(".city") 
    .data(cities) 
    .enter().append("g") 
    .attr("class", "city"); 

city.append("path") 
    .attr("class", "line") 
    .attr("d", function (d) { 
    return line(d.Data); 
}) 
    .style("stroke", function (d) { 
    return color(d.City); 
}); 

city.append("text") 
    .datum(function (d) { 
    return { 
     name: d.City, 
     date: d.Data[d.Data.length - 1].Date, 
     value: d.Data[d.Data.length - 1].Value 
    }; 
}) 
    .attr("transform", function (d) { 
    return "translate(" + x(d.date) + "," + y(d.value) + ")"; 
}) 
    .attr("x", 3) 
    .attr("dy", ".35em") 
    .text(function (d) { 
     return d.name; 
}); 
} 
    }; 
    } 
]); 

Answer 1

Для этого вы можете использовать $http. Пример:

$http({method: 'GET', url:'path/to/file.json'}) 
    .then(
     function(json) { 
      console.log('result: ', json); 
     }, 
     function(error) { 
      Console.warn('An error occured'); 
     } 
    ); 

Вы также можете использовать $http.get в качестве вспомогательной функции.

Answer 2

Вводят $http в вашу директиву:

angular.module('myApp').directive('multiLine', ['$http', function($http) { 

Используйте это get метод для извлечения файла:

$http.get('file.json').then(
    function resolved (response) { 
     console.info('Resolved at ' + new Date()); 
     // response.data holds your JSON object 
    }, 
    function rejected (response) { 
     console.error('Rejected at ' + new Date()); 
    } 
); 

Ссылка: https://docs.angularjs.org/api/ng/service/$http#get

Answer 3

Если вы хотите, чтобы получить объект JSON от другого файла, вы можете использовать http Get Method следующим образом:

app.controller("testController", function($scope, $http) { 
    $scope.data= []; 
     $http.get('data.json').success(function(data) { 
     $scope.data = data.value; 
     console.log(data.value); 
     });  
}); 

Проверить эту ссылку: https://docs.angularjs.org/api/ng/service/ $ HTTP

Answer 4

Here I created sample for how to get data from external json. 

Sample Link

myApp.factory('Data', ['$http', function($http) { 
    var dataFactory = {}; 
    dataFactory.getdata = function() { 
       return $http.get('your.json'); 
     }; 
    return dataFactory; 
}]); 

myApp.controller('FirstCtrl', function($scope, Data){ 
    Data.getdata().then(function (data) { 
     $scope.Data = data.data; 
    }); 
});