Question

我遇到了用于获取json数据的http get方法。 http get方法工作正常，它实际上是获取json数据，但是我无法将它与对象文字连接。

这里要清楚地解释一下我被卡住的代码。

   var x ={};
  $http.get('chart.json') //reading the studentRecord.json file
         .success 
       (function(data1){
       //alert(data1);
 $scope.x = data1;

       }); 

  var conversionChart = new FusionCharts({
    type: 'funnel',
    renderAt: 'chart-container',
    width: "100%",
    dataFormat: 'json',
    dataSource: x

 });

我正在尝试将http.get方法应用于dataSource:以获取json数据，但是它不起作用。我的主要任务是将http.get请求应用于dataSource:，这使我的代码正常工作。

让我给你整整一段代码以便更好地理解。

的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="script.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

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 : function(){



      $http.get('chart.json') //reading the studentRecord.json file
            .success 
        (function(data1){
        alert(data1);
       $scope.dataSource = 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"
                                        }

            ]





}

我的主要目的是使用http.get方法将json数据提取到

dataSource :

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

如果有人帮我这个，我会非常感激.Plz帮助我，因为我是新的蜜蜂角色

Answer 1

根据你的plunker，代码应该是：

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; 
$http.get('chart.json') //reading the studentRecord.json file 
.success 
(function(data1){ 
//alert(data1); 
$scope.dataSource = data1;// binding the data to the $scope variable 
conversionChart = new FusionCharts({ 
type: 'funnel', 
renderAt: 'chart-container', 
width: "100%", 
dataFormat: 'json', 
dataSource : $scope.dataSource 

}); 



conversionChart.render(); 

}); 

}); 

}; 
});

如何创建对象文字方法以使用http get请求获取json数据？

1 个答案: