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

Question

我用Java脚本创建了一个漏斗图。 并转换为angular。现在，我尝试在angular中使用http.get方法来获取json数据。 我被困在这里，对此感到困惑

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

--- --- index.html的

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>FusionCharts - Funnel 3D Chart</title>




  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">

      <script data-require="angular.js@1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script> 
      <script type='text/javascript' src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
      <script type='text/javascript' src="http://static.fusioncharts.com/code/latest/fusioncharts.widgets.js"></script>
      <script type='text/javascript' src='/js/lib/dummy.js'></script>
      <script type='text/javascript' src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
      <script src="practice.js"></script>







</head>
<body ng-app="myApp">
  <!-- A funnel 3D Chart showing a conversion analysis in percentage of visiting to purchase in Harry's Supermart website last year 

Attribute :
# showPercentValues - set to 1 to show the values in percentage.

-->

<div id="chart-container" ng-controller="ParentCtrl"  ng-init='load()' ng-model="dataSource1">FusionCharts will render here</div>

</body>


</html>

--- ---的script.js

    // 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.json

{

        "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"
                                    }

        ]

}

Plunker：HTTP： http://plnkr.co/edit/HUKvROQv8wIiFfx6uZBk?p=preview

在这里，我需要获取dataSource :的json数据dataSource :但不能做到这一点

漏斗图的所有脚本和CSS都包含在index.html中。 我的工作是使用http.get方法获取json数据。请Plz帮助我完成此工作，并在此先感谢...

Answer 1

似乎您只是将错误的参数传递给了dataSource字段。 经过一番尝试之后，我没有将执行$ 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的成功回调中，因此我们知道数据在呈现时就存在。

您可以在这里看到正在工作的pl子。

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

问题描述

1 个解决方案

解决方案1
0 2015-07-24 14:41:25

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

问题描述

1 个解决方案

解决方案1 0 2015-07-24 14:41:25

解决方案1
0 2015-07-24 14:41:25