时间戳

首页 > 解决方案 > 无法从 api 获取数据，尽管它已连接

angularjs - 无法从 api 获取数据，尽管它已连接

问题描述

我尝试使用 api 和 ajax $http 方法连接后端 laravel 和前端 angularjs。api已连接，但在ng-repeat方法中无法查看数据。我不知道是什么错误。希望任何人都可以帮助解决。提前致谢。

你好.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel + Angularjs</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="Todoctrl">
        <li ng-repeat="x in todos">
            {{ x.name }}
        </li>
    </div>
<script>
    var app = angular.module('myApp',[])
    .controller('Todoctrl',['$scope','$http',function($scope,$http){
        var onStatsComplete = function(response){
            $scope.todos = response.data;
        }
        $http.get("api/todos").then(onStatsComplete);
    }

]);
</script>
</body>
</html>

api.php

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});
Route::get('/todos','HomeController@todos');

家庭控制器.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Http\Response;

class HomeController extends Controller
{
    public function todos(){
        $data = [ 
        "name" => "sithi",
        "mobile" => "0108817531",
        "email"  =>  "check",
        "status" => 0
    ];

        return response()->json($data)->header('Access-Control-Allow-Origin','*')
        ->header('Access-Control-Allow-Credentials','true')
        ->header('Access-Control-Allow-Methods','GET,POST,OPTIONS')
        ->header('Access-Control-Allow-Headers','DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type');
    }
}

标签： angularjslaravel

解决方案

你检查过response.data包含的内容吗？使用资源集合的典型 Laravel api 响应会将数组置于其自己的数据键下，这使得response.data.data在这些情况下从 JS 访问值所需的最终键。

推荐阅读