Search code examples
jsonfirebasefirebase-realtime-databasevuejs2vuefire

Is it possible to get the length of a firebase JSON object when using vuefire?

I have the following firebase JSON object: 

"items" : {
  "111111111111" : {
      "ins" : {  <<<<<<<<< I want to display the length of this
        "1523878813443" : true,
        "1523878891312" : true,
        "1523878911379" : true,
        "1523879091312" : true
      },
      "name" : "10",
      "outs" : {  <<<<<<<<< and this one too
        "1523878813443" : true,
        "1523878891312" : true,
        "1523878911379" : true
      },
      "ownerID" : "QpMHsVHHRrMvk92rbSQvcYEv4en1"
    }
}

Here is the template part on where I am trying to get these values to update:

<tbody>
  <tr v-for="item in items" >
     <td>
        {{item.childone - door.childtwo}}
     </td>
     <td>    
        {{item.childone}} 
      </td> 
      <td>
        {{item.childtwo}}
      </td>
   </tr>
</tbody>

I got it to display the JSON object like this:

enter image description here

The "In's" column should display 4, the "Out's" should display 3 and the "Balance" column should display 1. This is the firebase setup and data code on my component:

import firebase { doorsRef } from '../firebase-config';
export default {
  firebase() { 
    return {
      items: itemsRef,
    }
  },
...etc
}

Any kind soul out there who would be willing to help?

Solution

  • Knowing that a JSON object has keys (and values) I have used this on my template instead:

    {{Object.keys(JSON.Object).length}}

    So in my case this did the trick:

    <tbody>
   <tr v-for="item in items" >
      <td>
         {{Object.keys(item.childone).length - Object.keys(item.childtwo).length}}
      </td>
      <td>    
         {{Object.keys(item.childone).length}} 
      </td> 
      <td>
         {{Object.keys(item.childtwo).length}} 
      </td>
    </tr>
</tbody>

    Alternative you you can also count the number of values: {{Object.values(JSON.Object).length}}