How do I load sub array from Realtime Database using React?

Question

There are records in real-time DB that have a subarray:

And I'm not sure how do I load it in my hook. I also created the type to receive it in an array. I found some examples, however, I'm looking for a way to do it easier.

type EventType = {
    id: string,
    autorID: string,
    autorNome: string,
    titulo: string,
    categoria: string,
    dateS: string,
    dateE: string,
    descricao: string,
    cancelado: string,
    confirmCount: number,
    confirmadosList: Record<string,{
        confirmedByUserID: string,
        confirmedByUserName: string,
        confirmedByUserAvatar: string
    }>
}

useEffect(()=>{
        const eventRef = database.ref(`eventos/${eventID}`)

        eventRef.once('value', evento =>{
            //console.log(evento.val());
            const eventValue = evento.val();

            const vari:EventType = {
                id: eventValue.key,
                autorID: eventValue.authorID,
                autorNome: eventValue.authorName,
                titulo: eventValue.title,
                categoria: eventValue.category,
                dateS: eventValue.startDate,
                dateE: eventValue.endDate,
                descricao: eventValue.description,
                cancelado: eventValue.canceled,
                confirmCount: eventValue.confirmados.length,
                confirmadosList: {
                    
                }
            }

            setEvento(vari)
            
            //setCountConfirm(Object.values(eventValue.confirmados ?? {}).length)
            //setHasConfirm(Object.values(eventValue.confirmados ?? {}).some(confirmado => confirmado.confirmedByUserID === user?.id))
        })
    },[eventID])

Frank van Puffelen · Accepted Answer · 2022-03-12 17:09:10Z

1

The confirmados node in your database is a Map, not a list. While you can get just the values of the keys under confirmados, that means you're throwing away the keys themselves.

If that is what you want, it'd be:

eventRef.once('value', snapshot =>{
  ...
  const confirmadosValues = [];
  snapshot.child('confirmados').forEach((confirmado) => {
    confirmadosValues.push(confirmadosValues.val());
  });
  ...

If you only want the value of confirmedByUserID, that inner line would be:

confirmadosValues.push(confirmadosValues.val().confirmedByUserID);

answered Mar 12, 2022 at 17:09

Frank van Puffelen

603k85 gold badges895 silver badges869 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Gabriel Donada Over a year ago

Thanks for sharing. I'm wondering to get both, the 'Eventos' node info and 'confirmados' node info.

Frank van Puffelen Over a year ago

Didn't the rest of your code work yet? Is eventValue not what you need for the rest of the data? If not, what value does it have?

Gabriel Donada Over a year ago

The first part where I take the first node below of 'Evento' that does work, what is not working is the part that I try to take the 'confirmados' node. I'm wondering to take them in the same query (if not possible, then I have ideas about how to get it in another query, however, I would like to see if is there any possibility to take the data on the same query).

Frank van Puffelen Over a year ago

My code takes the confirmados from the read operation you already had. What didn't work about it when you tried my code?

Gabriel Donada Over a year ago

Doesn't work on that way

|

Collectives™ on Stack Overflow

How do I load sub array from Realtime Database using React?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related