javascript - Getting a specific objectitem by id in Firebase - Stack Overflow

I am currently building a small web app with Firebase and React, but I am having trouble fetching for s

I am currently building a small web app with Firebase and React, but I am having trouble fetching for specific items in the Firebase from the React client-side.

That being said, I'm used to javascript, where a simple fetch might look something like:

const url = 'www.example/api/'
const id = '123'
fetch(url + id) <---specific
  .then(res => res.json())
  .then(result => this.setState({results: result})
  .catch(err => console.log(err))

However, I haven't been able to find any documentation on something that looks similar with firebase.

A more specific issue below:

class StoryItem extends Component {
   constructor(props) {
   super(props);
    this.state = {
      story: this.props.location.myCustomProps
    };
   }
 ponentDidMount() {
   //this should do a fetch request based on the 
  //params id to get the specific item in the firebase
  //right now it is being passed as prop which is unreliable because when page refresh state is reset

  //user should be able to access content 
  //without having to go to previous page
console.log(this.state.story)
}

One way I've tried to get the specific object from the firebase is this:

 ponentDidMount(props) {
   const ref = firebase.database().ref("items");
   ref.on("value", snapshot => {
    let storiesObj = snapshot.val();
     storiesObj
      .child(this.props.match.params.id)
      .then(() => ref.once("value"))
      .then(snapshot => snapshot.val())
      .catch(error => ({
         errorCode: error.code,
         errorMessage: error.message
       }));

     });
   }

In this case, the error is

Any help would be appreciated, also, if anyone knows of any good documentation on firebase, feel free to send me a link.

Thank you

I am currently building a small web app with Firebase and React, but I am having trouble fetching for specific items in the Firebase from the React client-side.

That being said, I'm used to javascript, where a simple fetch might look something like:

const url = 'www.example./api/'
const id = '123'
fetch(url + id) <---specific
  .then(res => res.json())
  .then(result => this.setState({results: result})
  .catch(err => console.log(err))

However, I haven't been able to find any documentation on something that looks similar with firebase.

A more specific issue below:

class StoryItem extends Component {
   constructor(props) {
   super(props);
    this.state = {
      story: this.props.location.myCustomProps
    };
   }
 ponentDidMount() {
   //this should do a fetch request based on the 
  //params id to get the specific item in the firebase
  //right now it is being passed as prop which is unreliable because when page refresh state is reset

  //user should be able to access content 
  //without having to go to previous page
console.log(this.state.story)
}

One way I've tried to get the specific object from the firebase is this:

 ponentDidMount(props) {
   const ref = firebase.database().ref("items");
   ref.on("value", snapshot => {
    let storiesObj = snapshot.val();
     storiesObj
      .child(this.props.match.params.id)
      .then(() => ref.once("value"))
      .then(snapshot => snapshot.val())
      .catch(error => ({
         errorCode: error.code,
         errorMessage: error.message
       }));

     });
   }

In this case, the error is

Any help would be appreciated, also, if anyone knows of any good documentation on firebase, feel free to send me a link.

Thank you

Share Improve this question edited Sep 21, 2018 at 4:20 Frank van Puffelen 601k85 gold badges890 silver badges860 bronze badges asked Sep 21, 2018 at 2:09 LullabyLullaby 1191 gold badge3 silver badges11 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 5

The trick is, you don't have to get the value of all items first, as you do. You should locate the items ref, then lookup a child that you want and get the value of that child with .on or .once.

Something like that, based on your example code:

ponentDidMount() {
   firebase.database().ref("items");
      .child(this.props.match.params.id)
      .once("value")
      .then(snapshot => snapshot.val())
      .catch(error => ({
         errorCode: error.code,
         errorMessage: error.message
       }));
   }

For better understanding, let's take a look at the original code and try to figure out why it errors out:

ponentDidMount(props) {
   // ⬇️ this ref points to ALL items
   const ref = firebase.database().ref("items");

   // ⬇️ here we're asking for the value stored under the above ref
   ref.on("value", snapshot => {
    let storiesObj = snapshot.val();
     /* so firebase gives us what we ask for, storiesObj
      * is probably a huge js object with all the items inside.
      * And since it's just a regular js object, 
      * it does not have a `child` method on it, thus calling .child errors out.
      */
     storiesObj
      .child(this.props.match.params.id)
      .then(() => ref.once("value"))
      .then(snapshot => snapshot.val())
      .catch(error => ({
         errorCode: error.code,
         errorMessage: error.message
       }));

     });
   }

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1744790782a4593900.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信