angular.js consume data from mysql db

Question

I'm tryping to consume data from a mysql db in a angular.js application. I've read several tutorials but none of them worked for me.

I have a php script which returns a JSON array. Example result:

[{"id":"1","name":"Fran","text":"21-15-9 Reps for Time:\r\nThruster (95lbs\/ 44kg)\r\nPull-Ups","wodtype":"Benchmark"},{"id":"2","name":"Angie","text":"1 Round for Time:\r\n100 Pull-Ups\r\n100 Push-Ups\r\n100 Sit-Ups\r\n100 Air Squats","wodtype":"Benchmark"},{"id":"3","name":"Barbara","text":"5 Rounds for Time:\r\n20 Pull-Ups\r\n30 Push-Ups\r\n40 Sit-Ups\r\n50 Air Squats\r\n\r\n3 Minute Rest","wodtype":"Benchmark"},{"id":"4","name":"Chelsea","text":"30 Minutes EMOM\r\n5 Pull-Ups\r\n10 Push-Ups\r\n15 Air Squats","wodtype":"Benchmark"},{"id":"5","name":"Cindy","text":"20 Minute AMRAP\r\n5 Pull-Ups\r\n10 Push-Ups\r\n15 Air Squats","wodtype":"Benchmark"}]

My application looks like this:

<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>

<body>
    <div ng-controller="GetWodList"> 
                <div ng-repeat="x in wodList">
                    {{x.id}}<br />
                    {{x.name}}<br />
                    {{x.text}}<br />
                    {{x.wodtype}}<br />
                </div>
        </div>

    </body>

<script>
    function GetWodList($scope, $http) {
    $http.get('https://foo.com/getList.php').
        success(function(data) {
            $scope.wodList = data;
        });
    }
</script>

Well the result is an empty page. I followed this tutorial: http://www.phpro.org/tutorials/Consume-Json-Results-From-PHP-MySQL-API-With-Angularjs-And-PDO.html#5

GetWodList was not declared as a controller docs.angularjs.org/guide/controller github.com/johnpapa/angular-styleguide/blob/master/a1/… Check this links on how to declare them — Anonymous Duck
– Anonymous Duck, Commented Mar 9, 2016 at 9:37

Meiko Rachimow · Accepted Answer · 2016-03-09 09:54:30Z

0

declare the app module
register GetWodList as a controller

var appname = angular.module('appname', []);
appname.controller('GetWodList', ['$scope', '$http', function($scope, $http) {
    $http.get('https://foo.com/getList.php')
         .success(function(data) {
             $scope.wordList = data;
          });
    }]);

<!DOCTYPE html>
<html ng-app="appname">

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
  </head>

  <body>
    <div ng-controller="GetWodList">
      <div ng-repeat="x in wordList">
        {{x.id}}<br />
        {{x.name}}<br />
        {{x.text}}<br />
        {{x.wodtype}}<br />
      </div>
    </div>
  </body>

</html>

answered Mar 9, 2016 at 9:54

Meiko Rachimow

4,7642 gold badges28 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3728976 Over a year ago

Thanks. That helped!

Collectives™ on Stack Overflow

angular.js consume data from mysql db

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related