CODEWITHSUNDEEP
javascriptphpangularjs
wobsoriano
wobsoriano

Reputation: 13462

$http.get AngularJS not returng data

I'm learning AngularJS and I can't get the data on my mysql database to show up in my view. My codes:

todoController.js

angular
    .module('todoApp')
    .controller('todoController', todoController)
    .config(config);


function config($routeProvider) {
    $routeProvider
    .when('/', {
        controller: 'todoController',
        templateUrl: 'app/views/todo-list.html'
    });
}

function todoController($http, $scope) {
    $http.get('app/endpoints/todo-list.php')
    .then(function successCallback(data) {
        $scope.todos = data;
        console.log(data);
    }, function errorCallback(data) {
        console.log(data);
    });
}

todo-list.html

<table cellpadding="4">
  <tr ng-repeat="t in todos">
    <td>{{ t.name }}</td>
    <td>Remove</td>
  </tr>
</table>

index.html

<!DOCTYPE html>
<html lang="en" ng-app="todoApp">
<head>
    <meta charset="UTF-8">
    <title>AngularJS</title>
</head>
<body>
        <div ng-view><!-- data will be loaded here--></div>

    <script type="text/javascript" src="assets/jquery/jquery.js"></script>
    <script type="text/javascript" src="assets/angular/angular.js"></script>
    <script type="text/javascript" src="assets/angular/angular-route.js"></script>
    <script type="text/javascript" src="app.js"></script>

    <!--controllers-->
    <script type="text/javascript" src="app/controllers/todoController.js"></script>
</body>
</html>

todo-list.php

<?php
require '../../connection.php';
$statement = $db->prepare("SELECT * FROM todo_list");
$statement->execute();
$results=$statement->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($results);

When I check my console, it returns the objects enter image description here

but then the data from my database doesn't show up in the view. My connection is correct. Am I missing something here? Thank you.

Upvotes: 1

Views: 54

Answers (1)

Rabi
Rabi

Reputation: 2220

the correct syntax would be -

function todoController($http, $scope) {
    $http.get('app/endpoints/todo-list.php')
    .then(function successCallback(response) {
        $scope.todos = response.data;
        console.log(response);
    }, function errorCallback(reason) {
        console.log(reason);
    });
}

Note - the success function takes the response (data in your case) object. the actual value returned should be response.data (data.data in your case).

Upvotes: 2

Related Questions