AngularJs - 无法从外部文件中获取数据答案

【问题标题】：AngularJs - not able to get data from external fileAngularJs - 无法从外部文件中获取数据
【发布时间】：2016-10-12 06:34:40
【问题描述】：

无法从 PHP 文件和 JSON 文件中获取数据

timesheet.php

require 'dbconnect.php';

$array_data = array();
$query = "SELECT * FROM timesheet";

$stmt = $conn->prepare($query);
$stmt->execute($array_data);
$result_data = $stmt->fetchAll( PDO::FETCH_ASSOC );

if( !empty($result_data) ) {    

    header('Content-type: application/json');
    $json = json_encode($result_data);
    // echo $json;
    echo preg_replace("/null/", '""', $json); // replace null to ""

}

timesheet.json

[
    {
        "id": 1,
        "date": "20th August 2016",
        "day": "Sat",
        "in1": "10:30",
        "out1": "02:30",
        "in2": "04:00",
        "out2": "08:00",
        "in3": "",
        "out3": "",
        "total_hours": "8:00",
        "status": "1"
    },
    {   
        "id": 2,
        "date": "20th August 2016",
        "day": "Sat",
        "in1": "10:30",
        "out1": "02:30",
        "in2": "04:00",
        "out2": "08:00",
        "in3": "",
        "out3": "",
        "total_hours": "8:00",
        "status": "1"
    }
    ...
]

controller.js

.controller('tableCtrl', function($filter, $sce, ngTableParams, tableService) {

        var data = tableService.data
    //Editable
        this.tableEdit = new ngTableParams({
            page: 1,            // show first page
            count: 10           // count per page
        }, {
            total:data.length, // length of data
            getData: function($defer, params) {
                $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
            }
        });
    })

script.js

.service('tableService', ['$http', function($http){

        this.data = $http.get("data/timesheet.php")
        //this.data = $http.get("data/timesheet.json")

    }])

html

<table ng-table="tctrl.tableEdit" class="table table-striped table-vmiddle">
       <tr ng-repeat="w in $data"  ng-class="{ 'active': w.$edit }">
          <td data-title="'ID'">
             <span ng-if="!w.$edit">{{ w.id }}</span>
             <div ng-if="w.$edit"><input class="form-control" type="text" ng-model="w.id" /></div>
          </td>
          ...
       </tr>                        
   </table>

当我像 this.data = [{..}] 这样将 json 数据放入 service.js 时，它可以工作，但现在我需要从外部文件中获取数据，该文件可以是 JSON 文件或 PHP 文件，但它不能作为我的桌子空了。谁能帮帮我吗？我对 AngularJs 很陌生

【问题讨论】：

我认为您正在尝试访问尚不存在的文件。所以你应该对那个php文件使用promise或callback，因为只有在php完成处理后数据才准备好。它适用于 JSON，因为数据是静态的，随时准备就绪，但是 php 需要从 db 计算数据并创建一个 json 响应（与 json 内容相同），但这需要时间。
Http 请求不会立即返回。这是一个异步调用，必须与您正在做的事情不同地处理。 (docs.angularjs.org/api/ng/service/$http)
@DincaAdrian 它也不适用于 timesheet.json。它仅在我直接在 service.js 中编写 json 数据时才起作用。请您提供一些示例代码，我如何在这里使用承诺或回调？
@VladimirM 好的！但你能告诉我我该如何处理吗？我对此一无所知。
@User7 您是否点击了我附在他评论中的链接？有一个角度获取请求的示例。它返回一个承诺。如果您打算在项目中使用 Angular，您真的必须阅读有关这些的文档。

标签： javascript php angularjs json angular-ui-bootstrap

【解决方案1】：

尝试让它与成功和错误函数一起作为回调工作：

http://www.w3schools.com/angular/angular_http.asp

在该页面的底部有一个 JSON 响应的示例。首先，如果您在浏览器中对该 php 文件进行请求，您可以将其放在问题中（查看输出）

【讨论】：