title: Using a firebase storage image URL with CSS background property and url()
body: <p><strong>UPDATE</strong></p>
  
  <p>I wrapped the <code>forEach</code> in a promise to fix the intermediary error I was facing, but I am back to where I began. I was just trying to pass <code>self.data</code> as a parameter between functions but it didn't solve anything.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I think I am returning <code>self.data</code> incorrectly to <code>loadData</code> but I am not sure what I am doing wrong.</p>
  
  <pre><code>this.loadData = async function() {
      var db = firebase.firestore();
  
      // Disable deprecated features
      db.settings({
        timestampsInSnapshots: true
      });
  
      var docsRef = db.collection("pools").doc(window.currentPoolId).collection("list").where("active", "==", true).orderBy("date").limit(8);
  
      var counter = 0;
  
      var result = await docsRef.get();
  
      console.log("querySnapshot result: "+result);
      result.forEach(function(doc) {
          // doc.data() is never undefined for query doc snapshots
          console.log(doc.id, " =&gt; ", doc.data());
          self.data.push(doc.data());
  
          console.log("result.size: "+result.size);
          console.log("self.data.length: "+self.data.length);
          console.log("counter in loadData: "+counter);
          if(result.size - 1 == counter) {
              console.log("returning self data: "+JSON.stringify(self.data));
              return self.data;
          }
  
          counter++;
      });
  }
  </code></pre>
  
  <p>The above function is called like this (I think it needs to be window.pool.loadData because of scope, instead of <code>this.loadData</code>):</p>
  
  <p>var result = await window.pool.loadData();
  console.log("result in populate else: "+result);</p>
  
  <p>It outputs:</p>
  
  <pre><code>result in populate else: undefined
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I'm pretty sure this is happening because the <code>pool</code> <code>global</code> hasn't been created yet when I am referencing <code>window.pool</code> - I think I had a problem using <code>this</code> inside the <code>pool</code> <code>global object</code> (as this code is inside the <code>pool</code> <code>global object</code>, but I am going to try it again.</p>
  
  <p>After using <code>this.data[this.total_boxes].downloadURL</code>, I get the same results - it is printed correctly in the <code>console.log</code> message, but I get the same error saying it is <code>undefined</code>.</p>
  
  <p>I'm not sure if there is a problem with my instantiation order or not.</p>
  
  <hr>
  
  <p>I am trying to use the <code>downloadURL</code> I retrieved after uploading an image to <code>firebase storage</code>. I am trying to use it in the <code>url()</code> <code>css</code> function, and I am getting an error that says:</p>
  
  <pre><code>TypeError: undefined is not an object (evaluating 'window.pool.data[window.pool.total_boxes].downloadURL')
  </code></pre>
  
  <p>I am building for <code>iOS</code> right now with <code>cordova</code>. I use the <code>downloadURL</code> like this in my <code>javascript/css</code>:</p>
  
  <pre><code>var item_box = document.createElement("div");
  item_box.style.flex = "1 0 50%";
  item_box.style.display = "flex";
  item_box.style.flexDirection = "column";
  item_box.style.justifyContent = "flex-end";
  item_box.style.borderBottom="2px solid #9a9a9a";
  
  //THIS IS WHERE  I USE THE `downloadURL`, ALL OTHER CODE IS FUNCTIONAL
  item_box.style.background = "no-repeat center/100% url("+window.pool.data[window.pool.total_boxes].downloadURL+")";
  
  item_box.id = "item_box_"+this.total_boxes;
  </code></pre>
  
  <p>I have these three console messages before the above code:</p>
  
  <pre><code>console.log("window.pool.data: "+JSON.stringify(window.pool.data));
  console.log("window.pool.total_boxes: "+window.pool.total_boxes);
  console.log("window.pool.data[0].downloadURL: "+JSON.stringify(window.pool.data[window.pool.total_boxes].downloadURL));
  </code></pre>
  
  <p>They output:</p>
  
  <pre><code>[Log] window.pool.data: [{"active":true,"date":"1544583167324","description":"Comp","downloadURL":"https://firebasestorage.googleapis.com/v0/b/pool-3f2de.appspot.com/o/share_images%2FpvxqKsDK3OelIMvWdnogYGmdqt33%2F1544583167324.jpg?alt=media&amp;token=xxx","item":"Computer"}] (cordova.js, line 1732)
  [Log] window.pool.total_boxes: 0 (cordova.js, line 1732)
  [Log] window.pool.data[0].downloadURL: "https://firebasestorage.googleapis.com/v0/b/pool-3f2de.appspot.com/o/share_images%2FpvxqKsDK3OelIMvWdnogYGmdqt33%2F1544583167324.jpg?alt=media&amp;token=xxx" (cordova.js, line 1732)
  </code></pre>
  
  <p>I have this console message after the <code>item_box</code> element is instantiated (not yet added to the <code>DOM</code>):</p>
  
  <pre><code>console.log("item_box.style.background: "+item_box.style.background);
  </code></pre>
  
  <p>It outputs:</p>
  
  <pre><code>item_box.style.background: url("https://firebasestorage.googleapis.com/v0/b/pool-3f2de.appspot.com/o/share_images%2FpvxqKsDK3OelIMvWdnogYGmdqt33%2F1544583167324.jpg?alt=media&amp;token=xxx") center center / 100% no-repeat
  </code></pre>
  
  <p>So it appears that <code>window.pool.data[window.pool.total_boxes].downloadURL</code> is not undefined.</p>
  
  <p>Why am I getting the <code>undefined is not an object</code> error when I can see that the object has the correct data?</p>