how to use PHP/Mysql generated json in AngularJS Application

Question

I generated some Json data from Mysql Database with PHP as below:

equipments.php

<?php

    require("config.inc.php");

    //initial query
    $query = "Select * FROM equipment";

    //execute query
    try {
          $stmt   = $db->prepare($query);
          $result = $stmt->execute($query_params);
         }
    catch (PDOException $ex) {
          $response["success"] = 0;
          $response["message"] = "Database Error!";
          die(json_encode($response));
         }

     // Finally, we can retrieve all of the found rows into an array using fetchAll 
     $rows = $stmt->fetchAll();


     if ($rows) {
         $response["success"] = 1;
         $response["message"] = "Equipment Available!";
         $response["equipments"]   = array();

     foreach ($rows as $row) {
         $post             = array();
    $post["EquipmentId"]  = $row["EquipmentId"];
         $post["Name"] = $row["Name"];
         $post["Ip"]    = $row["Ip"];
         $post["Brand"]  = $row["Brand"];
         $post["Location"]  = $row["Location"];

         //update our repsonse JSON data
         array_push($response["equipments"], $post);
        }


         // echoing JSON response
         echo json_encode($response);

       } else {
                $response["success"] = 0;
                $response["message"] = "No Equipment Available!";
                die(json_encode($response));
           }

       ?>

this returned the following data:

//localhost/equip/equipments.php (on my local apache server)

{
 success: 1,
 message: "Equipment Available!",
 equipments: [
   {
    EquipmentId: "1",
    Name: "UCH-NET",
    Ip: "172.16.32.4",
    Brand: "Engenius",
    Location: "Top of ITD"
   },

   {
     EquipmentId: "2",
     Name: "UCH-PHOUSE",
     Ip: "172.16.32.5",
     Brand: "Mikrotik",
     Location: "Top of ITD"
   },

   {
     EquipmentId: "3",
     Name: "UCH-SON",
     Ip: "172.16.32.9",
     Brand: "MIkrotik",
     Location: "SON"
   },

  {
   EquipmentId: "4",
   Name: "UCH-GERIATRIC",
   Ip: "172.16.32.10",
   Brand: "Mikrotik",
   Location: "Geriatric"
  }
  ]
  }

But when i try to use the returned Json like this in my AngularJS application no data is returned in the web page

services.js

'use strict';

 var equipServices = angular.module('equipServices', ['ngResource']);

 equipServices.factory('Equip', ['$resource',
            function($resource){
            return $resource( '/equip/equipments.php/');

       }]);

equipment.js

    function EquipmentsCtrl ($scope, Equip) {
    $scope.setActive('equipments');

    $scope.sidebarURL = 'partials/equipment.html';
    $scope.currentEquipment = null;

        $scope.setEquipment = function (EquipmentId) {
        $scope.currentEquipment = $scope.equipments[EquipmentId];
    };

    $scope.equipments = Equip.query();

    }


}

index.html

    <title>IP Library</title>
        <script type="text/javascript" src="js/lib/angular.min.js"></script>
        <script type="text/javascript" src="js/lib/angular-resource.min.js"></script>
    <script type="text/javascript" src="js/controllers/app.js"></script>
    <script type="text/javascript" src="js/controllers/equipments.js"></script>
    <script type="text/javascript" src="js/controllers/admins.js"></script> 
    <script type="text/javascript" src="js/app.js"></script>    
    <script type="text/javascript" src="js/services.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css">
 </head>
 <body>
    <div class="container" ng-controller="AppCtrl" >
     <h1>IP Library</h1>
     <ul class="nav nav-pills">
        <li ng-class="equipmentsActive">
            <a href="#equipments" >Equipments</a>
         </li>
        <li ng-class="adminsActive">
           <a href="#/admins">Administrators</a>
       </li>
   </ul>

   <div ng-view></div>
 </div>

</body>
</html>

Is there something wrong with the way I am calling the php generated Json in my services.js? Thanks

or is there a better way to generate json from database in Linux OS for use in AngularJS application, in Windows OS i would have used ASP.NET web api. — Femzy
– Femzy, Commented Jan 30, 2014 at 20:52

karaxuna · Accepted Answer · 2014-01-30 20:55:21Z

3

Use Equip.get() instead of Equip.query() because you are getting from server an object, not an array:

Equip.get(function(result){
    if(result.success === 1) // isn't better to return boolean?
        $scope.equipments = result.equipments;
    // else handle error
});

answered Jan 30, 2014 at 20:55

karaxuna

26.9k13 gold badges86 silver badges120 bronze badges

Thanks your suggestion fixed it. Would appreciate if you could give me hint on the best way to save new equipment back to mysql server from the angularjs app.

Femzy
– Femzy

01/30/2014 21:19:16
Commented Jan 30, 2014 at 21:19

Add a comment |

Collectives™ on Stack Overflow

how to use PHP/Mysql generated json in AngularJS Application

1 Answer 1

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related