如何在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