CODEWITHSUNDEEP
javascriptangularjsfirebasefirebase-realtime-database
Truextacy
Truextacy

Reputation: 562

Dynamically grabbing Firebase data inside nested ng-repeat for whatever object I am on

I am creating a blog feature on a website I am building, I created a basic template that the admin must use to create their posting. The issue I am having is I cannot figure out how to dynamically grab the list items inside each blog posting and display them inside of another ng-repeat. here is my sample JSON inside Firebase

JSON

"pPosts": {
        "2015Newsletter": {
            "title": "2015 Newsletter",
            "subTitle": "Bringing Hope to Families in Iquitos, Peru",
            "datePosted": "6/21/16",
            "paragraph1": "random text.",
            "listTitle1": "Other Highlights of 2015 Trip",
            "subListTitle1": "",
            "listItem1s": {
                "list1Item1": "Meen for 2016!",
                "list1Item2": "Buonsored children",
                "list1Item3": "Worector, Violeta",
                "list1Item4": "Gi needy families",
                "list1Item5": "Prfamily business",
                "list1Item6": "Pu a family bakery business",
                "list1Item7": "Suing party",
                "list1Item8": "Tehildren",
                "list1Item9": "Scd Animal Rescue Center.",
                "list1Item10": "Serusalen School.",
                "list1Item11": "Adren.",
                "list1Item12": "",
                "list1Item13": "",
                "list1Item14": "",
                "list1Item15": "",
                "list1Item16": "",
                "list1Item17": "",
                "list1Item18": "",
                "list1Item19": "",
                "list1Item20": ""
            },
            "listTitle2": "Be an active pa",

I am providing support for up to 20 list items, and don't want to have to specify the child("2015Newsletter") in my controller, as there will be multiple postings and I don't want to have to write code every time an admin creates a post. Here is my controller

Javascript Controller

bridgeTheGapControllers.controller('presidentsPageCtrl', function($scope, $firebaseArray, $firebaseObject) {
    var ref = new Firebase("firebaseUrl");
    //first layer post info
    $scope.postsNum = $firebaseArray(ref.child('pPosts'));
    //THIS DOES NOT WORK
    $scope.listItem1s = $firebaseArray(ref.child('pPosts').child('listItem1s'));

});

HTML

<div class="blog-item" ng-repeat="post in postsNum">
                        <img class="img-responsive img-rounded" src="{{ post.imageOne }}" width="100%" alt="" />
                        <div class="blog-content">
                            <a href="blog-item.html"><h3>{{ post.title }}</h3></a>
                            <h4>{{ post.subTitle }}</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>
                            <p>{{ post.paragraph1 }}</p>                            

                            <h4>{{ post.listTitle1 }}</h4>
                            <ul>
                                <li ng-repeat="listItem in listItem1s">{{ listItem.listItem}}</li>
                            </ul>
                            <hr>

                        </div>
                    </div><!--/.blog-item-->

Maybe I am thinking of this completely wrong, but it seems there would be a way to do something in my controller like this $scope.listItem1s = $firebaseArray(ref.child('pPosts').child(INDEX FOR WHATEVER POST IM IN).child('listItem1s');

Upvotes: 1

Views: 331

Answers (1)

adolfosrs
adolfosrs

Reputation: 9389

You won't need that additional $firebaseArray.

Just make sure you do the logic in your inner ng-repeat.

<li ng-repeat="listItem in postsNum.post.listItem1s">

Controller

bridgeTheGapControllers.controller('presidentsPageCtrl', function($scope, $firebaseArray, $firebaseObject) {
    var ref = new Firebase("firebaseUrl");
    //first layer post info
    $scope.postsNum = $firebaseArray(ref.child('pPosts'));
});

HTML

<div class="blog-item" ng-repeat="post in postsNum">
    <img class="img-responsive img-rounded" src="{{ post.imageOne }}" width="100%" alt="" />
    <div class="blog-content">
        <a href="blog-item.html"><h3>{{ post.title }}</h3></a>
        <h4>{{ post.subTitle }}</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>
        <p>{{ post.paragraph1 }}</p>                            

        <h4>{{ post.listTitle1 }}</h4>
        <ul>
            <li ng-repeat="listItem in postsNum.post.listItem1s">{{postsNum.post.listItem1s.listItem}}</li>
        </ul>
        <hr>
    </div>
</div><!--/.blog-item-->

Upvotes: 2

Related Questions