Ad

AngularJS & Firebase - Get Specific Values From Database

Sorry to bother you with this, I have thoroughly searched for this but I have been actively trying to resolve this for over 20hrs. Im about to abandon working with angularjs and firebase. Just cant get my head around it..

I am trying to add database values to the page from an array. Its working for other data but not this.

My firebase database: Firebase I have included the freebets related code which is all good but the bookie deatils just wont work. There is other bookie details in the array which I will call aswell just wanted to get one working..

  myApp.controller('BetsController',
  ['$scope', '$rootScope', '$location', '$routeParams', '$firebaseObject', '$firebaseArray',
  function($scope, $rootScope, $location, $routeParams, $firebaseObject, $firebaseArray) {

    //Values passed throu routeparams are assigned to variables and then used to search the firebase database.

  var ref, freeBetList, test;
  $scope.whichoffer = $routeParams.oId;
  $scope.whichuser = $routeParams.uId;

  ref = firebase.database().ref()
    .child('users').child($scope.whichuser)
    .child('offers').child($scope.whichoffer)
    .child('freeBets');

  freeBetList = $firebaseArray(ref);
  $scope.freeBets = freeBetList;


  test = firebase.database().ref()
    .child('users').child($scope.whichuser)
    .child('offers');

//.child('offerbookie')
//  testing = $firebaseObject(test);
testing = $firebaseArray(test);
$scope.test = testing;
<div class="card meetings cf">
  <h2>Free Bets</h2>
  <div class="meeting" ng-repeat="(key, freeBets) in freeBets">
        <a href="#">
        <span class="text">{{freeBets.eventname}}</span>
      </a>
      <button class="btn btn-delete tooltip"
        ng-click="deleteOffer(key)"><span>Delete this offer</span></button>
      </div>
    </div>

    <div class="card meetings cf">
      <h2>Offer Details</h2>
      <div class="meeting" ng-repeat="(key, value) in test">
        <a href="#">
          <p>{{whichoffer.offerbookie}}</p>
        </a>
      </div>
    </div>

Console.log:

[]
​
"$$added": function added()
​
"$$error": function error()
​
"$$getKey": function getKey()
​
"$$moved": function moved()
​
"$$notify": function notify()
​
"$$process": function process()
​
"$$removed": function removed()
​
"$$updated": function updated()
​
"$add": function add()
​
"$destroy": function destroy()
​
"$getRecord": function getRecord()
​
"$indexFor": function indexFor()
​
"$keyAt": function keyAt()
​
"$loaded": function loaded()
​
"$ref": function ref()
​
"$remove": remove()
​​
length: 1
​​
name: "bound $remove"
​​
__proto__: function ()
​
"$resolved": true
​
"$save": function save()
​
"$watch": function watch()
​
0: Object { date: 1529091671870, offerbookie: "Coral", offermarket: "Betfair", … }
​
1: Object { date: 1529150480309, offerbookie: "SkyBet", offermarket: "Smarkets", … }
​
length: 2
​
__proto__: Array []
bets.js:42:4

I just want to display the one offerbookie value relevent to $scope.whichoffer.

Current output:

enter image description here

enter image description here

Ad

Answer

If you want to show bookie details of your ref then, save $firebaseArray value directly into scope variable (instead of using another local var testing). edit your controller code to:

$scope.test = $firebaseArray(test);

And now after successful request it'll have array of two objects which you can show on DOM using ng-repeat as:

<div class="card meetings cf">
  <h2>Offer Details</h2>
  <div class="meeting" ng-repeat="bookie in test | filter: {'$id' : whichoffer}">
    <a target="_blank" rel="nofollow noreferrer" href="#">
      <p>{{bookie.offerbookie}}</p>
    </a>
  </div>
</div>

Here I've changed ng-repeat expression. The one which you've used is for looping over object properties not an array.

Update:

Actually for this case you don't even need ng-repeat because it will always be one unique value. Although above code will work, You can just use .filter method of pure JS on $scope.test after getting successful response & it'll also still work.

Ad
source: stackoverflow.com
Ad