how to use PHP/Mysql generated json in AngularJS Application

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

Answers


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
});

Need Your Help

Place icon container over image - top left and top right

html css

I am trying to create an element for a site-builder where I can place an icon on top of an image:

Difference between '{' and '[' when formatting JSON object

json

Is there any difference between '{' and '[' when formatting a JSON object?