Question 177749 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Iterating through Firebase Database without Google Firebase Cloud Functions?

since my goal to create a userlist i need to iterate through Firebase Realtime Database the individual UIDs that are in /users/.
How to accomplish this in Vue3 and Firebase for Web even being able to get the data inside the UIDs for each block i want to display?

Thank.

I tried

<script setup>
import { getDatabase, ref as dbref, set, child, get, push } from "firebase/database";
import { getAuth } from "firebase/auth";
import { ref, reactive } from "vue";
import "firebase/database";

    const auth = getAuth();
    const database = getDatabase();
    const dbRef = dbref(getDatabase());
    
    const name = reactive({ value: "" });
    const email = reactive({ value: "" });
    const story = reactive({ value: "" });
    const data5 = reactive({ value: '' });
    
    const target = {
      message1: "",
      message2: "",
    };  
    const handler3 = {
      get(target, prop, receiver) {
        if (prop === "message2") {

        get(child(dbRef, 'users/')).then((snapshot) => {
        if (snapshot.exists()) {
        let data4 = (JSON.stringify(snapshot.val()));
        data5.value = data4
        } else {
        console.log("No data available");
        }
        }).catch((error) => {
        console.error(error);
        });
        }
        return Reflect.get(...arguments);
      },
    };
    const proxy3 = new Proxy(target, handler3);
    proxy3.message2;

</script>

<template>{{ data5.value }}
<li v-for="email in data5.value">{{ data5.value }}</li>
</template>

It only repeats the whole database with the individual entries in sequence.
Does it work? Else i need to go the steps to activate Cloud Functions and actually pay for the Blaze plan, and learn them. I will do that anyway but i want to also try it first because it is essential to what i try.

It is what i try because everything else seems to fail as a concept.

thx.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    No, it works all perfectly well, that is why i ask. Because after applieing The console outputs all perfectly as this image

    Unfortunate, the v-for iteration still display only the currently logged only user. It still outputs only this Vue3 output

    Is there a way to read the console...? I need actually to have the data enabled for the unregistered users too, to be available after end. I would need a script that logs the default user, but this is not elegant.


  2. 0

    If I understand correctly, you have data for individual users under /users in your database. If that is the case, you can show the data for each user with:

    get(child(dbRef, 'users/')).then((snapshot) => {
  snapshot.forEach((userSnapshot) => {
    console.log(userSnapshot.key);                // show the key of the user node
    console.log(userSnapshot.val());              // show the entire value of the user node
    console.log(userSnapshot.child("uid").val()); // show only property of the user node
  })
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search