Javascript 如何使用angular中的http.get方法获取json数据？

我用java脚本创建了一个漏斗图。并转换为angular，现在我尝试使用angular中的http.get方法获取json数据。我被困在这里，被这部分弄糊涂了

现在让我向你展示我的代码部分

---index.html--

----chart.json----

{

}

Plunker:http:

在这里，我需要为

数据源：

获取json数据，但不能这样做

漏斗图的所有脚本和css都包含在index.html中。我的oly工作是使用http.get方法获取json数据

---

提前感谢…

您似乎只是将不正确的参数传递给了数据源字段。在玩了一些plunker之后，没有将执行$http调用的函数传递给它，而是将数据本身传递给它，如下所示

var myApp = angular.module("myApp", []);

//The below code will read the data from student.json file and will pass to     the $scope variable 
myApp.controller("ParentCtrl", function($scope, $http) {

  $http.get('./chart.json') //reading the studentRecord.json file
  .success(function(data1) {
    $scope.dataSource = data1; // binding the data to the $scope variable

    FusionCharts.ready(function() {
      //alert("1");
      var conversionChart = new FusionCharts({
        type: 'funnel',
        renderAt: 'chart-container',
        width: "100%",
        dataFormat: 'json',
        dataSource: $scope.dataSource
      });
      conversionChart.render();
    });
  });
});

注意，我将代码包装在$http的成功回调中，这样我们就知道数据在呈现时就存在了

您可以看到正在工作的plunker

    // Code goes here

//creating an application module
var myApp = angular.module("myApp", []);

//The below code will read the data from student.json file and will pass to the $scope variable 
 myApp.controller("ParentCtrl", function($scope, $http)
        {   

         $scope.load = function(){
           //alert("2");
    FusionCharts.ready(function () {
      //alert("1");
      var conversionChart = new FusionCharts({
        type: 'funnel',
        renderAt: 'chart-container',
        width: "100%",
        dataFormat: 'json',
        dataSource : "dataSource1"

      });   


      $http.get('chart.json') //reading the studentRecord.json file
            .success 
        (function(data1){
       $scope.dataSource1 = data1;// binding the data to the $scope variable





     }); 









   conversionChart.render();





});

};
});

        "chart": {
                    "caption": "Ensource sales report",
                    "subcaption": "Purchase - Conversion analysis for last year",
                    "decimals": "1",
                    "isHollow": "0",
                    "isSliced": "1",
                    "labelDistance": "15",
                    "plotTooltext": "Success : $percentOfPrevValue",
                    "theme": "fint",
                    "baseFontSize":"18"
        },
            "data": 
            [

                                    {
                                        "label": "Total",
                                        "value": "385634"
                                    },
                                    {
                                        "label": "Contacts",
                                        "value": "175631"
                                    },
                                    {
                                        "label": "Leads",
                                        "value": "84564"
                                    },
                                    {
                                        "label": "Sanctioned",
                                        "value": "35654"
                                    },
                                     {
                                        "label": "Disbursed",
                                        "value": "12342"
                                    }

        ]

var myApp = angular.module("myApp", []);

//The below code will read the data from student.json file and will pass to     the $scope variable 
myApp.controller("ParentCtrl", function($scope, $http) {

  $http.get('./chart.json') //reading the studentRecord.json file
  .success(function(data1) {
    $scope.dataSource = data1; // binding the data to the $scope variable

    FusionCharts.ready(function() {
      //alert("1");
      var conversionChart = new FusionCharts({
        type: 'funnel',
        renderAt: 'chart-container',
        width: "100%",
        dataFormat: 'json',
        dataSource: $scope.dataSource
      });
      conversionChart.render();
    });
  });
});