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

请尝试更改此行

$data [] = $row;

要

array_push ($data,$row);

Answer 2

我看到我的评论没有重新发布。让我试试第三次。 $ .getJson不是Angular，Angular不会看到更改。请用$ http（{url：url}）替换。然后（functiom（rs）{console.log（rs）}，functiom（err）{console.log（err）}）消失的数组可能是缓存。在chrome dev工具中请禁用网络选项卡下的缓存

编辑：好看看你的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>

使用PHP和AngularJS显示JSON文件

2 个答案: