How can I loop through an array of keys and do query for each using firebase-query in a declarative manner?

Question

As title suggests, I am trying to use firebase-query element to do query for an array of keys which in return I should get bunch of objects per each key from the query. This can easily be done in java or swift , but when it comes to polymer elements I can't figure it out.

I have tried putting firebase-query in a dom-repeat but doesn't seem to work. I also tried changing the equal-to key which it doesn't seem to initiate the query for the new key.

See below for code :

<!doctype html>
<html>
<head> 
</head> 
<body>
  <template is="dom-bind" id="scope">

       <!-- .......other code -->
      <!-- condKey is from the array I need to loop -->
      <!--through and array comes from another query-->

      <firebase-query
        id="myQuery"
        app-name="ProjectName"
        order-by-child="childName" 
        path = "/nodeKey"   
        equal-to=[[condKey]]  
        data="{{results}}">
      </firebase-query>

    <!-- ***data comes from another query -->

    <div id="listContainer">       
      <template is="dom-repeat" items=[[data]] as="item">    
        <div class="item">
        <div class$="{{_computeItems(item.key)}}"></div>
          <template is="dom-repeat" items={{results}} as="myresult">
            <div>[[myresult.key]]</div>
          </template>
        </div>    
      </template>
    </div>  


    <script> 
    scope._computeItems =  function(key) {
          console.log("key of query is: " , key); 
          scope.condKey = key ;                 
        }; 
    </script>
    </template> 

    <!-- .......other code -->
    </body>

score 0 · Answer 1 · answered Feb 17 '17 at 00:06

0

You're going to use js Promise.all to achieve that. You push each XHR/.once() into an array then run Promise.all against that.

answered Feb 17 '17 at 00:06

Ronnie Royston

16,778
6
77
91

Hey Ron, thanks for your reply. I would appreciate it if there's any way you can expand on that a bit more, even a snippet or something would help. Thanks again – TheBen Feb 17 '17 at 00:53
I think this might be the link http://stackoverflow.com/questions/35879695/promise-all-with-firebase-datasnapshot-foreach – Ronnie Royston Feb 17 '17 at 00:58

score 0 · Answer 2 · answered Feb 17 '17 at 13:53

Passing the value to a new-element, with a template is="dom-repeat" will solve your problem.

  <div id="listContainer">       
      <template is="dom-repeat" items=[[data]] as="item">    
        <div class="item">
        <div class$="{{_computeItems(item.key)}}"></div>

          <template is="dom-repeat" items={{results}}>
            <new-element results="{{results}}"></new-elements>
          </template>

        </div>    
      </template>
    </div>

New Element

      <template is="dom-repeat" items={{results}} as="myresult">
        <div>[[myresult.key]]</div>
      </template>

hmm, not sure exactly if this solves my problems, since there's still a loop in the New Element that I would need to do query for each item and that's essentially what I'm trying to figuring out , how can I do query using firebase-query for each element of a dom-repeat? It doesn't seem to work so far .. — TheBen, Feb 17 '17 at 18:00

score 0 · Accepted Answer · answered Nov 08 '17 at 16:07

So I was trying to achieve this using Polymer data binding and by nesting children that each do it's own query to get what it needs and I was a rookie back then. Here is how to do it easily via Polymer data binding and in a declarative manner.

<parent-element>
  <template is="dom-repeat" items="[[keyArrays]]">
        <child-element key="[[item]]"></child-elements>
  </template>
</parent-element>

and then in each child-element you do a query via firebase-query in child-element definition:

<dom-module id="child-element">

    <template>
     ....

     <firebase-query path="/path/[[key]]" data="{{_queryResult}}></firebase-query>

     <element-to-bind-result-with data="[[_queryResult]]"></element-to-bind-result-with>

    </template>
      ....
<dom-module>

Hope it helps someone.

How can I loop through an array of keys and do query for each using firebase-query in a declarative manner?

3 Answers3