CODEWITHSUNDEEP
javascripthtmlfirebaseionic-frameworkfirebase-realtime-database
user2904491
user2904491

Reputation: 11

Retrieving Specific data on click with ionic and firebase

I'm currently in the process of trying to learn the ionic framework and Firebase using AngularFire.

Right now I'm trying to work on a simple(or so I thought) contacts application with multiple user accounts. The app would then display that users contacts in a list. Upon clicking on one of the contacts in the list the data for that contact (name,address,phone etc) would be displayed in a modal or other page.

I am able to display a list of contacts based on the uid from the logged-in user, the problem is how do I rerieve the data for that individual contact and display it on screen?

Here is my code so far:

This is the ion-list that holds the contacts retrieved from the items factory. 

 <ion-list option-buttons="itemButtons" can-swipe="true"  class="item-remove-animate"  show-delete="data.showDelete" show-reorder="data.showReorder">
  <ion-item class="item-divider">Contacts(from fire):</ion-item>
  <ion-item ng-repeat="item in items track by $index" id="contactItem" ng-click="clickContact(); getAllContacts()">{{item.contactName}}

    <ion-delete-button class="ion-minus-circled" ng-click="onItemDelete(item)"> </ion-delete-button>

    <ion-option-button class="button-assertive" ng-click="edit(item)">Edit </ion-option-button>

    <ion-option-button class="button-calm" ng-click="share(item)">Share</ion-option-button>

    <ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button>

  </ion-item>

</ion-list>

This is the items factory (I removed the firebase database name and replaced it with *****)

 .factory("items", function($firebaseArray) {// factory for getting contact items
   var userContacts=currentU.uid;// grab current user
   var itemsRef = new     Firebase("https://******.firebaseio.com/users/"+userContacts+"/contacts");
    return $firebaseArray(itemsRef);
  })

Here is the controller for when the user clicks on an individual contact. It currently doesn't do much besides open an empty modal.

$scope.clickContact = function(){// function when clicking on single contact for single contact view
      $scope.oModal2.show();// show/open contact modal when clicked on single contact };

Lastly here is an example of the Firebase structure.In the future their will be more information for each contact.

 users{
     63efb2b1-9b39-4cdb-9d57-b721e45f97c4{ //user id key
     contacts{
     -K8q4YOETVNh_LujTZD7 { //key for that specific contact
      contactName: "first contact"
      }
     -K8qE2LjUMK9IOd1OXQQ{ //key for that specific contact
     contactName: "second contact" 
     }
      }
     }
    }

I have tried researching this but haven't quite found the answers I'm looking for, maybe I'm not asking the right questions.

Any help and advice would be greatly appreciated. Thanks a bunch!

Upvotes: 0

Views: 913

Answers (1)

Nikhil
Nikhil

Reputation: 1186

To find a specific contact of a user you can do

var refUserContacts = new Firebase("https://******.firebaseio.com/users/"+userContacts+"/contacts");

refUserContacts.orderByChild("contactName").equalTo("first contact").on("value", function(data){
   console.log(data.val());
});

This will give you the contact you need. You should consider adding indexon contactName for better query performance.

Upvotes: 1

Related Questions