CODEWITHSUNDEEP
javascriptangularjsfirebaseangularfirefirebase-realtime-database
Truextacy
Truextacy

Reputation: 562

Concat firebase arrays?

I am creating a function in angular that I want to grab all the blog posts with a category matching the button clicked, there are 3 different fields in my firebase titled category1, category2, and category3. Wehn a user clicks newsletter for example I want to see all posts that have the category newsletter whether it is stored in category1, category2, or category3. I thought I could concat()them. But it is not working. here is my function where I am trying this.

$scope.sortByNewsletter = function() {
        var postsNumNews1 = $firebaseArray(ref.child('pPosts').orderByChild("category1").equalTo("Newsletters"));
        var postsNumNews2 = $firebaseArray(ref.child('pPosts').orderByChild("category2").equalTo("Newsletters"));
        var postsNumNews3 = $firebaseArray(ref.child('pPosts').orderByChild("category3").equalTo("Newsletters"));
        console.log(postsNumNews1);
        console.log(postsNumNews2);
        console.log(postsNumNews3);
        var $scope.postsNum = postsNumNews1.concat(postsNumNews2,postsNumNews3);
        console.log($scope.postsNum);
    }

I am then ng-repeating on postsNum to display them to the page like this.

<div class="blog-item" dir-paginate="post in postsNum | orderBy: 'postedDate': true | filter:searchPosts | itemsPerPage: 1">
                        <img class="img-responsive img-rounded" src="{{ post.imageOne }}" width="100%" alt="" />
                        <div class="blog-content">
                            <h3><strong>{{ post.title }}</strong></h3>
                            <h4><strong>{{ post.subTitle }}</strong></h4>
                            <div class="entry-meta">
                                <span><i class="fa fa-user"></i> {{ post.postedBy }}</span>
                                <span><i class="fa fa-folder"></i> {{ post.category1 }} {{ post.category2 }} {{ post.category3 }}</span>
                                <span><i class="fa fa-calendar"></i> {{ post.datePosted }}</span>
                            </div>
                            <br>
                            <p>{{ post.paragraph1 }}</p>                            
                            <p>{{ post.paragraph2 }}</p>
                            <p>{{ post.paragraph3 }}</p>
               </div>
             </div>

I also thought I could maybe pass in multiple "categories" into my orderByChild() but that isn't working either.

Upvotes: 1

Views: 1310

Answers (1)

fishermanswharff
fishermanswharff

Reputation: 125

You're trying to concat a Firebase Synchronized Array, which is probably why it's not working. What you'll need to do is push those elements into an array that's not bound to the values in Firebase. Also, you say "there are 3 different fields in my firebase", are you referring to a post that lives under root/pPosts/? It's helpful to understand the data structure when querying, so below notice I created the ref by pointing it at '/pPosts':

$scope.sortByNewsletter = function() {
  $scope.posts = [];
  var ref = new Firebase('https://whatever.firebase.com/pPosts');
  ref.orderByChild('category1').on('value', function(snapshot){
    posts = posts.concat(snapshot);
  });
  ref.orderByChild('category2').on('value', function(snapshot){
    posts = posts.concat(snapshot);
  });
  ref.orderByChild('category3').on('value', function(snapshot){
    posts = posts.concat(snapshot);
  });

  console.log($scope.postsNum);
}

Upvotes: 1

Related Questions