How do I get the proper text form from the firebase realtime database after querying via expo

Question

This is a long issue so I would go thru one by one:

This are the part of the contents of my firebase realtime database:

{
  "food": {
    "Bakery": {
      "Bakery Cuisine": {
        "Description": "Within North Spine Plaza",
        "Halal": "Yes",
        "Location": "50 Nanyang Ave, #01-20 North Spine Plaza, Singapore 639798",
        "OH": "Mon - Sat : 8 AM to 7 PM, Sun Closed"
      },
      "TestBakery": {
        "Description": "A",
        "Halal": "B",
        "Location": "C",
        "OH": "D"
      }
    },
    "Beverage": {
      "Beverage": {
        "Description": "Within the South Spine food court",
        "Halal": "No",
        "Location": "21 Nanyang Link, Singapore 637371",
        "OH": "Mon - Fri: 7 30 am to 8 pm, Sat - Sun/PH Closed"
      },
      "Beverages": {
        "Description": "Within North Spine Koufu",
        "Halal": "No",
        "Location": "76 Nanyang Dr, #02-03 North Spine Plaza, Singapore 637331",
        "OH": "Mon - Fri : 7 am to 8 pm, Sat : 7 am to 3 pm, Sun Closed"
      },
      "Boost": {
        "Description": "Within North Spine Plaza",
        "Halal": "No",
        "Location": "50 Nanyang Ave, #01-11 North Spine Plaza, Singapore 639798",
        "OH": "Mon - Fri : 10 am to 9 pm, Sat - Sun: 10 am to 6 pm"
      },

As you can see from the database,

1st level: it is food

2nd level: it has Bakery & Beverage . This are what I called cuisine. It might be a bit weird but there are cuisine such as Japanese and many more

3rd level: It has names like Bakery Cuisine. This are the shop names under the cuisine.

4th level: Here contains the details of the shop

Next I will explain the tasks I am did and trying to do but failed.

Step 1: Page (Home) contains a drop down list that 
has contains all the different cuisines 
(Level 2 of my database) and a search button

What the user can do here is to choose a cuisine and press search.
What is done at the code is this cuisine value 
is passed down to another page (SubScreen1).

[Complete]

Step 2: Page (SubScreen1) receives the cuisine
value from page (Homepage). It 
then search the database for the shop 
names under that cuisine. Eg searching 
URL will be food/Bakery. According to 
the database I pasted on top, there are 
2 shop names under Bakery which are 
Bakery Cuisine & TestBakery. Now, I will 
display this 2 shop names in the screen as buttons.

[Complete]

Step 3: User at page (SubScreen1) now gets to
make a decision. To pick one of the shop
name and press it and will be transfer to another page (SubScreen3)

At the code side, this shop name's value that the user 
has pressed is passed on to another page(SubScreen3).

[Complete]

Step 4: By now the variable that is being passed from page(Homepage)
to page (SubScreen3) has become cuisine/store name. Example
will be Bakery/Bakery Cuisine. Finally what I want to do
here is to extract out the details under Bakery Cuisine
and paste it on the page for the user to see. Including the name 
Bakery Cuisine.

[Stuck]

The details are as follows:

"Bakery Cuisine": {
        "Description": "Within North Spine Plaza",
        "Halal": "Yes",
        "Location": "50 Nanyang Ave, #01-20 North Spine Plaza, Singapore 639798",
        "OH": "Mon - Sat : 8 AM to 7 PM, Sun Closed"
      },

Here comes the problem:

When I reach this step and I log my query to the database, I get this

It is no longer in long string of words like the data in the database. This happens because my database query is to the lowest level right now. Example for this will be food/Bakery/Bakery Cuisine

Currently my code in the step 4(SubScreen3):

import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'
import React,  {useEffect, useState}  from 'react'
import {db} from '../firebase'
import {ref, onValue} from 'firebase/database'
import { useNavigation } from '@react-navigation/core'

const SubScreen3 = ({route}) => {
  const paramKey = route.params.paramKey1
  //const paramKey1 = route.params.paramKey2
  
  console.log(paramKey)
  //console.log(paramKey1)
  const [todoData, setToDoData] = useState([])
  useEffect (() => {
    const starCountRef = ref(db, "food/" + paramKey );
    onValue(starCountRef, (snapshot) =>{
      const data = snapshot.val();
      const newPosts = Object.keys(data).map(key =>({
        id:key,
        ...data[key]
      })
      );
      console.log(newPosts);
      setToDoData(newPosts);
      
    })
  }, [])
  return (
    <View style = {styles.container}>
      
      <Text style = {styles.header}></Text>
      {
        todoData.map((item,index) => {
          return(
            <View key ={index}>
                <Text style = {styles.header}>{item.id}</Text>
                
                
              <Text style ={styles.text}>{item.Location}</Text>
              
              <Text style ={styles.text}>{item.Description}</Text>
              
              <Text style ={styles.text}>{item.Halal}</Text>
              
              <Text style ={styles.text}>{item.OH}</Text>
              
            </View>          
            )
        })
      }

    <TouchableOpacity
        //onPress={() => navigation.navigate("SubScreen1", {paramKey:value})}
        style = {styles.button}
      >
        <Text style = {styles.buttonText}>How to go?</Text>
      </TouchableOpacity>

      <TouchableOpacity
        //onPress={setRandomValue}
        style = {styles.button}
      >
        <Text style = {styles.buttonText}>Reviews</Text>
      </TouchableOpacity>
  
    </View>

So my questions:

1st - How do I change my code to get the long strings of words out? Eg, I cannot use item.Description to get the long string of Within North Spine Plaza as nothing appears.

2nd - How do I change my code so I can get the shop name out. In this case it is Bakery Cuisine

Tried the solution:

Code (SubScreen3):

import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'
import React,  {useEffect, useState}  from 'react'
import {db} from '../firebase'
import {ref, onValue} from 'firebase/database'
import { useNavigation } from '@react-navigation/core'

const SubScreen3 = ({route}) => {
  const paramKey = route.params.paramKey1
  //const paramKey1 = route.params.paramKey2
  
  //console.log(paramKey)
  //console.log(paramKey1)
  const [todoData, setToDoData] = useState([])
  useEffect (() => {
    const starCountRef = ref(db, "food/" + paramKey );
    onValue(starCountRef, (snapshot) =>{
      snapshot.forEach((child) => {
        console.log(child.key); // "Bakery Cuisine", "TestBakery"
        console.log(child.val().Description); // "Within North Spine Plaza", "A"
      });
    })
     
  }, [])
  return (
    <View style = {styles.container}>
      
      <Text style = {styles.header}></Text>
      {
        todoData.map((item,index) => {
          return(
            <View key ={index}>
                <Text style = {styles.header}>{item.id}</Text>
                
                
              <Text style ={styles.text}>{item.Location}</Text>
              
              <Text style ={styles.text}>{item.Description}</Text>
              
              <Text style ={styles.text}>{item.Halal}</Text>
              
              <Text style ={styles.text}>{item.OH}</Text>
              
            </View>          
            )
        })
      }

    <TouchableOpacity
        //onPress={() => navigation.navigate("SubScreen1", {paramKey:value})}
        style = {styles.button}
      >
        <Text style = {styles.buttonText}>How to go?</Text>
      </TouchableOpacity>

      <TouchableOpacity
        //onPress={setRandomValue}
        style = {styles.button}
      >
        <Text style = {styles.buttonText}>Reviews</Text>
      </TouchableOpacity>
  
    </View>
  )
}

export default SubScreen3

Here are the logs:

It is not logging correctly:

console.log(child.key); logs the following: Description, Halal, OH, Location

console.log(child.val().Description); gives me undefined

What I want to achieve at this page (SubScreen3) is getting the following:

Name of the stall
Description of the stall
Halal of the stall
Location of the stall
OH of the stall

How does the data in the screenshot relate to the `ref(db, "food/" + paramKey )` in your code? Can you show us the entire path, and preferably also show the JSON as text instead of as a screenshot? You can get this by clicking the "Export JSON" link in the overflow menu (⠇) on your [Firebase Database console](https://console.firebase.google.com/project/_/database/data). — Frank van Puffelen, Feb 08 '23 at 15:01
I have updated the post with the JSON you requested and added more details on the situation @FrankvanPuffelen — L.Calvin, Feb 08 '23 at 15:18
Thanks the JSON. The extra explanation is hard to follow. Can you reproduce the problem with a hardcoded value for `paramKey`? E.g. `ref(db, "food/Bakery")` — Frank van Puffelen, Feb 08 '23 at 15:30
Sorry about that. I have updated the post with a clearer explanation of what I am trying to do right now. If there is anything unclear, please let me know @FrankvanPuffelen — L.Calvin, Feb 08 '23 at 16:24

score 0 · Answer 1 · answered Feb 08 '23 at 15:32

0

To load the data for one of your food child nodes and then navigate the snapshot in your application code, you can do:

const foodRef = ref(db, "food/Bakery");
onValue(foodRef, (snapshot) => {
  snapshot.forEach((child) => {
    console.log(child.key); // "Bakery Cuisine", "TestBakery"
    console.log(child.val().Description); // "Within North Spine Plaza", "A"
  });
})

answered Feb 08 '23 at 15:32

Frank van Puffelen

565,676
79
828
807

Is my function impossible to edit to get the things I need? – L.Calvin Feb 09 '23 at 09:34
1

My answer tries to isolate a single problem, rather than working with your own use-case. This is a best practice here in Stack Overflow so that we end up with a knowledge base that is helpful to all users, rather than just a solution for your specific problem. --- Does the change I show in my answer make sense, did you try to run the code, and does it log the values you are looking for? If so, try to apply it to your own code instead of asking us to do that. If you get stuck on *that*, edit your question to [show where you got stuck](http://stackoverflow.com/help/mcve). – Frank van Puffelen Feb 09 '23 at 14:35
1

Oh okay. I have tried the code you provided but it is doing what my current code is doing. It is listing out all the shop names and all the description under the every shop. But what I need is the shop name that the user has selected and the details of that shop. I also tried adjusting the URL to my use case, example ```food/Beverage/Boost```. But it does not gives me the ```shop name: Boost``` or the details of the Shop Boost. But it can gives me the word of Description, Halal, Location, OH. How do I solve this? – L.Calvin Feb 10 '23 at 11:54
1

I just checked. It gives me multiple times of Description, Halal, Location, OH – L.Calvin Feb 10 '23 at 12:17

How do I get the proper text form from the firebase realtime database after querying via expo

1 Answers1

Linked