AngularJS直接使用json数据

Question

我正在尝试使用JS文件中来自MySQL的数据来创建图表。

因此：

• 我在调用PHP文件的JS脚本中收到数据。
• 我的连接有效（PHP）。
• 我将数据转换为JSON。
• 我在JS文件中得到了数据。
• 我可以将它们显示到我的HTML文件/页面中

与：

`<div ng-repeat="x in users" align="center">
          <div class="col-md-4" >
            <div class="showProfile">
               {{x.TotalCall}}
            </div>
           </div>
         </div>`

我的PHP代码：

    <?php

  $dbhost="localhost";
    $dbuser="root";
    $dbpass="";
    $dbname="callstats";
    $dbh = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);
    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  $query = $dbh->query("SELECT extension, COUNT(*) AS TotalCall, COUNT(CASE WHEN billsec >= 20 THEN billsec END) AS 'moreThanTwenty' FROM pbx GROUP BY extension");
  $query = $query->fetchAll(PDO::FETCH_ASSOC);
  $myJson = json_encode($query);
  echo "{\"records\":".$myJson."}";

?>

我的AngularJS文件：

    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $http) {
        $http.get("php/DBbitrix.php")
        .then(function(response) {
          $scope.users = response.data.records;
        });

    var ctxP = document.getElementById("pieChart").getContext('2d');
    var myPieChart = new Chart(ctxP, {
        type: 'pie',
        data: {
            labels: ["Red", "Green", "Yellow", "Grey", "Dark Grey"],
            datasets: [
                {
                  //data: [angular.forEach($scope.userListe, function(value){console.log(value.TotalCall)})],
                    data: [ angular.forEach($scope.users, function (value,TotalCall){TotalCall + ": " + value})],
                    backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
                    hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"]
                }
            ]
        },
        options: {
            responsive: true
        }
    });

});

因此，在我的饼图中，例如，如果数据为[20,50,60,80,100]，它将可以正常工作。

在我的数据库中，我有一个TotalCall表，其中包含要在“数据：[]”中使用的数字值。 因为在我的HTML中，值可以正确显示，所以我想知道如何在JS文件中直接使用JSON数据。

我尝试了3天以来，发现了很多解决方案，例如使用angular.foreach，但它不起作用。 我不明白为什么仅使用JSON字段就这么复杂。

我尝试使用以下命令在控制台中显示值：

var users = $scope.users;
console.log(users);
console.log("t");
console.log($scope.users);
angular.forEach($scope.users, function (value,TotalCall){console.log(TotalCall + ": " + value.TotalCall);})
console.log(angular.forEach($scope.users, function (value,TotalCall){TotalCall + ": " + value}));
console.log(angular.forEach($scope.users, function (value,TotalCall){value}));
console.log(angular.forEach($scope.users, function (value,TotalCall){value.TotalCall}));

但是值是“ undefined”，我没有得到想要的数据。

抱歉，如果我犯了错误，我仍在学习英语，这是我关于stackoverflow的第一篇文章。

Answer 1

echo "{\"records\":".$myJson."}"

您没有收到JSON。 您正在接收一个表示JSON的字符串。 您需要解析它：

.then(function(response) {
    var myJson = JSON.parse(response)
    $scope.users = myJson.records;
});

Answer 2

感谢你们对我的帮助。

解析是解决问题的第一步。 我还对“}）”犯了一个愚蠢的错误； 在错误的地方。

所以这是我的解决方案，希望它可以对某人有所帮助！

AngularJS：

    //pie
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $http) {
    $http.get("php/DBbitrix.php")
    .then(function(response) {
    var myJson = jQuery.parseJSON(JSON.stringify(response));

    $scope.users = myJson.data.records;
    $scope.data = [];
    for (var i = 0;i < $scope.users.length; i++) {
    $scope.data.push($scope.users[i].TotalCall);
    }

    //pie
    var ctxP = document.getElementById("pieChart").getContext('2d');
    var myPieChart = new Chart(ctxP, {
        type: 'pie',
        data: {
            labels: ["Red", "Green", "Yellow", "Grey", "Dark Grey","Red", "Green", "Yellow", "Grey", "Dark Grey","Red", "Green", "Yellow", "Grey", "Dark Grey"],
            datasets: [
                {
                    data : $scope.data,

                    backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360","#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360","#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
                    hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774","#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774","#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"]
                }
            ]
        },
        options: {
            responsive: true
        }
    });
});
});