score:1
if you want to show the list of friends for a certain event, and you know the key of that event, you can do something like:
let eventkey = '-lrufqaslescaek2mqxu';
let eventref = firebase.database().ref('events').child(eventkey);
eventref.child('friends').once('value').then((snapshot) =>{
let allfriendlist = [];
snapshot.foreach((friendsnapshot) => {
let data = friendsnapshot.val();
alluserlist.push(data);
});
this.setstate({allfriendlist: allfriendlist});
});
some of the changes:
- this code only listens for the specific path
/events/-lrufqaslescaek2mqxu/friends
. in fact, it could have used that path to listen to, i.e. firebase.database().ref('/events/-lrufqaslescaek2mqxu/friends').once('value'...` - the
snapshot
we get from this contains multiple friends, so we loop over them withsnapshot.foreach()
. - once we've added all friends to the list, we call
setstate
to inform react of them.
in the comments you indicate you want all friends lists combined, which you can do with:
let eventsref = firebase.database().ref('events');
eventref.once('value').then((snapshot) =>{
let allfriendlist = [];
snapshot.foreach((eventsnapshot) => {
eventsnapshot.child('friends').foreach((friendsnapshot) => {
let data = friendsnapshot.val();
alluserlist.push(data);
});
});
this.setstate({allfriendlist: allfriendlist});
});
but i highly recommend changing/augmenting your data model for this use-case. this code may work, but reads way more data than is needed. it also may be reading duplicate friends, if the same friend is present in more events. if you want a global list of friends, i'd store precisely that in the database: a list of users, with possibly the event ids of the events they're friends with.
score:0
personal preference, using the [key]
approach works well for custom key names.
for instance, data.[key].name
will yield your results if you know the key.
if you don't know that key (lrjsl...
) you can iterate over the friends
object:
for (var key in data) {
data[key].name //will be shabnam
}
score:2
you can just do the full path in the ref:
firebase.database().ref('/events/friends/whatever-key')
.once('value').then((snapshot) =>{
/// whatever code
});
Source: stackoverflow.com
Related Query
- Error fetching the right path from firebase
- Use state from useContext component and access it from other component. It's fetching ok, but in the child component it gives an error
- mapStateToProps state returns 'undefined' two times before fetching the data from firebase
- Passing error from Nodejs but not receiving the right one
- How can i fetch the error from the firebase backend?
- weird error shows up when moving files from path to another - firebase storage- react js-redux
- Cannot signUp with login module created with firebase and got the error 'TypeError: Cannot read property 'email' of null' from the client sidee
- am fetching data from firebase but authData is empty when the app renders once
- Typescript Error fetching data from firebase and store into array [IONIC]
- Is there a right way to pass data into a React component from the HTML page?
- Error when creating new object from existing one using `...`: In this environment the sources for assign MUST be an object
- Mocking react-router-dom for useHistory hook causes the following error - TS2698: Spread types may only be created from object types
- Webpack loads from the wrong URL when the path changes
- How can I get a variable from the path in react router?
- Unable to catch and log the Error response from an axios request
- "Rendered more hooks than during the previous render" error when the initial value for the hook is a query result from a database
- Whether all error messages should come from the backend in a form that can be shown to the user?
- Firebase web 9.0.1 error Package path . is not exported
- Error while trying to use the following icon from the Manifest
- React and Flux: "dispatch in the middle of a dispatch" to show error message from an API call
- How to fix the error 'alpha' is not exported from '@material-ui/core/styles' when using Skeleton in Material UI
- Cannot resolve module "firebase" from 'firebase.js' : Firebase could not be found within the project
- React what's the right way to get a parent props from its children
- Getting an error trying to start React right after (There might be a problem with the project dependency tree....)
- react/redux:Get the latest props value from state after updating props with dispatch right away
- React-router error accessing directly by the path or refreshing the page
- Images in React: is it possible to use a string from an imported object as the source path for an image?
- Passing Error Data from Firebase OR Server respose to Formik
- what's the right way to remove dynamic DOM Nodes from an event handler in React?
- React, fetching from an API logs the data, but rendering it doesn't?
More Query from same tag
- Assign new value to object via spread operator
- Use CSS-modules variables in Jacascript
- how to display buffer images in react
- React does not re-render updated array state
- update to hook causes Invalid attempt to destructure non-iterable instance
- React frontend not receiving response from Django HttpResponse after successful request
- Why from new component my old component useEffect calls are going
- Why is react returning a TypeError: Cannot read properly 'join' of undefined?
- Call NodeJS API With REACT
- How to style elements outside root node
- date picker component not changing date using onChange
- React multiple imports of same file
- Prevent Material UI Typography Text from going outside its parent
- React function to only run once after re-visiting page
- React js navigator implemented in web app
- react jsx expression with style
- Which unit test set up is correct? Are both tests checking if the function is right and working correctly?
- How to make owl-carousel responsive in React?
- Is it possible to get the source (key/keyCode) of a (onClick) Proxy/Synthetic event in React?
- React: Trying to set an API JSON response to state object and pass it to component for mapping and rendering
- Typescript: Enforce that generic T has some property if another prop is present
- block statement surrounding arrow body error with map
- Why one function fires but the other one dosn't? [React]
- Does not show API fetch response data in the page - React Redux
- Expose Loader does not export module globally
- React - check if a object is in state variable
- How to place a component relative to a mapped div? React Redux CSS
- why is form not submitting when using create-react-app?
- Routing to a specific view based upon a JSON return value in React using React Router
- Testcafe Selector does not get element in React Modal