shubgpt shubgpt - 4 months ago 29
AngularJS Question

AngularFire searching key node and assign to variable

I 'm working on my AngularFire project. I've a database something like this https://dinosaur-facts.firebaseio.com/. What I'm doing is first searching the key like the dinosaurs child such as "linhenykus" and storing its keys and values to other $scope variable.

my code in controller

var ref = new Firebase("https://dinosaur-facts.firebaseio.com/dinosaurs" + "/" + $scope.dinoID); //$scope.dinoID is variable containg dino keys

$scope.detRef = $firebaseArray(ref);


I'm getting the output like

[{"$value":-85000000,"$id":"appeared","$priority":null},{"$value":0.6,"$id":"height","$priority":null},{"$value":1,"$id":"length","$priority":null},{"$value":"theropoda","$id":"order","$priority":null},{"$value":-75000000,"$id":"vanished","$priority":null},{"$value":3,"$id":"weight","$priority":null}]


How to fetch the keys and values?

Answer

Use ngRepeat directive, as below:

<tr ng-repeat="obj in array track by $index">

To filter the array you can use the filter of Angular:

<tr ng-repeat="obj in array | filter: criteria track by $index">

Here's an example:

(function() {
  angular
    .module('app', [])
    .controller('MainCtrl', MainCtrl);

  MainCtrl.$inject = ['$scope', '$filter'];

  function MainCtrl($scope, $filter) {
    $scope.criteria = {};
    $scope.array = [  
       {  
          "$value":-85000000,
          "$id":"appeared",
          "$priority":null
       },
       {  
          "$value":0.6,
          "$id":"height",
          "$priority":null
       },
       {  
          "$value":1,
          "$id":"length",
          "$priority":null
       },
       {  
          "$value":"theropoda",
          "$id":"order",
          "$priority":null
       },
       {  
          "$value":-75000000,
          "$id":"vanished",
          "$priority":null
       },
       {  
          "$value":3,
          "$id":"weight",
          "$priority":null
       }
    ];

    $scope.getObj = function(value, id) {
      $scope.obj = $filter('filter')($scope.array, {
        "$value": value,
        "$id": id
      })[0];
    }

     $scope.getObj("theropoda", "order");
  }
})();
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>

<body ng-controller="MainCtrl">
  <input type="text" placeholder="Search by value" ng-model="criteria.$value">
  <input type="text" placeholder="Search by id" ng-model="criteria.$id">
  <!-- Note that this button is just as an example to change the object displayed below -->
  <button type="button" ng-click="getObj()">Change the value of object</button>
  <hr>
  Obj: <span ng-bind-template="Value: {{obj.$value}}, Id: {{obj.$id}}"></span>
  <p></p>
  <table width="100%">
    <thead>
      <tr>
        <th>Value</th>
        <th>Id</th>
        <th>Priority</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="obj in array | filter: criteria track by $index">
        <td ng-bind="obj.$value"></td>
        <td ng-bind="obj.$id"></td>
        <td ng-bind="obj.$priority"></td>
      </tr>
    </tbody>
  </table>
</body>

</html>