使用 PHP 和 AngularJS 显示的 JSON 文件

Question

我一直试图从 Phpmyadmin 的数据库中显示一个 json 文件，但徒劳无功。谁能告诉我我做错了什么？

这是我的代码：

json.php

    <?php
    header("Access-Control-Allow-Origin: *");
    $con = mysqli_connect("localhost","root","","test");
    // Check connection
    if (mysqli_connect_errno())
    {
        echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }

    $data=array();
    $q=mysqli_query($con, "select * from mesures");
    while ($row=mysqli_fetch_object($q)){
     $data[]=$row;
    }
    echo json_encode($data);
    mysqli_close($con);
?>

index.html

<div ng-controller="measureController as measureCtrl" style="margin-top:170px; border:0">
    <h1>ok</h1>
    <div ng-repeat="record in measureCtrl.records" class="row">
        {{record.test}}
    </div>
</div>

mesure-controller.js

angular.module('mesure', [])

.controller('measureController', ['$scope', 'recordService',
        function($scope, recordService) {

        this.records = new Object();


        function getData(){
            $(document).ready(function() {
            recordService.getAll(function(callback){
                if (callback != null){
                    //location.reload();
                    //console.log(callback);
                    this.records = callback;
                    return callback;
                }
            });

        })
        }
        this.records = getData();

        //console.log(this.records);
}]);

recordService.js

angular.module('recordService', []).factory('recordService', ["$timeout", function ($timeout) {

    var RecordService = {};

    var recordList = new Array();

    return {
        getAll : function (callback) {
            $(document).ready(function()
             {
                 var url="http://localhost/Effienergy/Effi-Prove/www/database/json.php";
                 $.getJSON(url,function(result){
                     //console.log(result);
                     $.each(result, function(i, field){
                         var record =
                         {
                            "test" : field.test,
                            "test2" : field.test2,
                         };
                         recordList.push(record);
                         //console.log(record)
                     });
                 }).done(function(){callback(recordList)});
             });
        },

        get : function (id) {
            for (record in this.recordList) {
                if ((this.recordList[record]).id == id) {
                    return (this.recordList[record]);
                }
            }
            return null;
        },

        add : function (record) {
            this.recordList.push(record);
        }



//        //5 secondes après le chargement de la page, la valeur d'une propriété change dans le service.
//        //La view est mise à jour automatiquement
//        $timeout(function() {
//            userData.userName = "NATNAT";
//        }, 5000);


    };

}]);

当我在开发人员控制台中检查 Json 时，它似乎是有效的，所以我认为它与我正在尝试做的范围有关..

这是我的 json：here

提前致谢

Answer 1

我看到我的评论没有再次发布。让我尝试第三次。 $.getJson 不是 Angular 并且更改对 Angular 不可见。请替换为 $http({url:url}).then(functiom(rs){console.log(rs)},functiom(err){ console.log(err)}) 消失的数组可能正在缓存。在 chrome 开发工具中，请禁用网络选项卡下的缓存

编辑： 好的，看看你的 pastebin，$http 没有返回结果：

您的服务应如下所示：

angular.module('recordService', []).factory('recordService', ['$http', function($http) {
    var recordService = [];
    recordService.getAll = function (callback) {
        var url = "http://localhost/Effienergy/Effi-Prove/www/database/json.php";
        $http({url: url}).then(function (rs) {
            callback(rs.data);
            console.log(rs)

        }, function (err) {

            console.log(err)
        })

    }
    return recordService;
}]);

然后在你的控制器中保持简单：

angular.module('mesure', [])

.controller('measureController', function($scope, recordService) {

        $scope.records = [];       
        recordService.getAll(function(rs) {
            $scope.records = rs;
            console.log(rs);
        });
}]);

您的索引看起来不错

<div ng-controller="measureController as measureCtrl" style="margin-top:170px; border:0">
    <h1>ok</h1>
    <div ng-repeat="record in measureCtrl.records" class="row">
        {{record.test}} - {{record.test2}}
    </div>
</div>

Answer 2

请尝试更改此行

$data [] = $row;

到

array_push ($data,$row);