fire.firestore().collection('Customer').get()
.then(data=>{
data.docs.forEach(doc=>{
let db = fire.firestore().collection(`Customer`)
db.where("updated", ">=", 0).limit(100).onSnapshot(async doc=>{
try {
await doc.docs.map(each=>{
setDatas([...datas, {...each.data()}])
})
}
})
})
I am trying to append the object in the array to query from firestore.
However, somehow it only reads last document.
Please help me if you could store state without using array.
Checking your code and running this data as sample I could notice your code is getting all the results and not just the last one, so there could be something else. Also it seems like a double unnecessary query.
Instead you can query all the docs you may want to get them using .. where("updated", ">=", 0).limit(100) .. and not a query inside a query.
You can use the sample code from here to make something more simpler:
const admin = require('firebase-admin');
admin.initializeApp();
let db = admin.firestore();
const citiesRef = db.collection('Customer');
const snapshot = await citiesRef.where('updated', '>=', 100).limit(100).get();
if (snapshot.empty) {
console.log('No matching documents.');
return;
}
snapshot.forEach(doc => {
//Your code here to add to your array
});
This code is for NodeJS but you can adapt it to ReactJS
Related
I am self taught and very new, so please excuse any dumb questions.
I am trying to fetch a stored document using getDoc, map that data to an array, and use that array as data in a table. I believe I correctly stored my data as a document that contains an object(dataExcel) that contains an array of maps in Firestore.
const submitGrades = async () => {
await setDoc(doc(db, 'EventData', 'Game 1' + ' PlayData'), {dataExcel})
await setDoc(doc(db, "EventData", 'Game 1' + ' PlayerData'), {playerData})
}
I know that this isn't ideal for complex querying, but it works for me as I have no problem pulling the entire document anyway. Then using JavaScript to sort the data the way I want. I am able get the document successfully using:
const Fetch = async () => {
const dataRef = doc(db, 'EventData', 'Game 1 PlayData');
const data = await getDoc(dataRef);
console.log(data);
}
, however I can't figure out how to pull out the array of maps, set them in state and make them usable as data in a table.
My current data structure
I need it to look like this once passed to a table:
enter image description here
Iam trying to store a list of product ids in an array in database and retrieve the latest array.
this is my server side code
router.post("/scannedproducts",async(request,response)=>{
console.log(request.body)
const Scannedproducts = new scannedproducts({
ids:request.body
})
Scannedproducts.save()
console.log(Scannedproducts)
const getLatestProduct =await scannedproducts.find().sort({ createdAt: -1 }).limit(1) // 10 latest docs
console.log(getLatestProduct)
})
but it consolelogs an empty array of ids.
please help...
The mistake in your code is you should have used await while calling the save() method
Solution should be :
router.post("/scannedproducts",async(request,response)=>{
const Scannedproducts = new scannedproducts({
ids:req.body
})
await Scannedproducts.save()
console.log(Scannedproducts)
const getLatestProduct =await scannedproducts.find().sort({ createdAt:-1 }).limit(1) // 10 latest docs
console.log(getLatestProduct)
})
it would fix your issue,
But anyways You should have provided the scannedProducts model in your question, and assigning the whole request body object to a property is a bad practice. you should take an ids array as user input and store it in server
i would suggest you to write your code as:
router.post("/scannedproducts",async(request,response)=>{
const Scannedproducts = new scannedproducts({
ids:req.body.ids
})
await Scannedproducts.save()
console.log(Scannedproducts)
const getLatestProduct =await scannedproducts.find().sort({ createdAt:-1 }).limit(1) // 10 latest docs
console.log(getLatestProduct)
})
Thank you
I am looking to fetch the data of collection named users which has documents with an id of logged-in users' uid. Further, these documents contain some data and a subCollection called posts.
which looks like -
So now, I need to fetch all four(4) of these documents along with the posts collection data together so that I can display it.
My approach -
( here I fetched the document ids - middle section of image IDs)
// Fetching Firestore Users Document IDs
const [userDocs, setUserDocs] = React.useState([]);
React.useEffect(() => {
try {
const data = firestore.collection('users')
.onSnapshot(snap => {
let docIDs = [];
snap.forEach(doc => {
docIDs.push({id: doc.id});
});
setUserDocs(docIDs);
})
}
catch(err) {
console.log(err);
}
}, [])
Now, I have tried to fetch the entire data using the following way (which isn't working)
// Fetching Firestore Posts Data
const [postData, setPostData] = useState([]);
React.useEffect(() => {
try {
userDocs.map(data => {
const data = firestore.collection('users/'+currentUser.uid+'/posts')
.onSnapshot(snap => {
let documents = [];
snap.forEach(doc => {
documents.push({...doc.data(), id: doc.id});
});
setPostData(documents);
})
})
}
catch(err) {
console.log(err);
}
}, [])
Finally, I should end up with postData array which I can map on my card component to render all posted images and captions to the UI.
I am not sure if this is the right way to achieve what I am doing here, please help me correct this error and if there's a more subtle and easy way to do it please let me know. Thank You.
I have tried to fetch the entire data
Looking at the code you wrote for fetching "the entire data" (i.e. the second snippet) it seems that you don't need to link a post document to the parent user document when fetching the post documents. In other words, I understand that you want to fetch all the posts collection independently of the user documents.
Therefore you could use a Collection Group query.
If you need, for each post document returned by the Collection Group query, to get the parent user doc (for example to display the author name) you can do as explained in this SO answer, i.e. using the parent properties.
thanks in advance!
In summary, I am using React's WYSIWYG rich text editor, and saving the text written in the editor to a MongoDB, data is sent to a server which does the insertion. My issue is that I am unable, after following recommended code, to retrieve the stored data back successfully to display it on my page. This is for a prospective blog post site.
Below I've provided all relevant code:
My Component which sends the data to the server to insert it into MongoDB, (not in order, only relevant code):
<Editor
editorState={editorState}
onEditorStateChange={handleEditorChange}
wrapperClassName="wrapper-class"
editorClassName="editor-class"
toolbarClassName="toolbar-class"
/>
const Practice = () => {
const [editorState, setEditorState] = useState(
() => EditorState.createEmpty(),
);
const [convertedContent, setConvertedContent] = useState(null);
const handleEditorChange = (state) => {
setEditorState(state);
convertContentToRaw();
}
const convertContentToRaw = () => {
const contentState = editorState.getCurrentContent();
setEditorState(editorState: {convertToRaw(contentState)});
}
const stateToSend = JSON.stringify(editorState);
try {
const response = await axios.post('http://localhost:8080/api/insert', {
content: stateToSend
})
} catch(error) {
}
In MongoDB, I've initialized 1 column for storing the WYSIWYG data, I've initialized as an empty JS object:
const wysiwygtest = new mongoose.Schema({
content: {
type: {}
}
});
As a result, my data is inserted into MongoDB as such, with everything desired clearly in data type such as RGBA etc. correct me if I'm wrong but I believe Mongo uses BSON, a form of binary based JSON, so this looks doable for retrieval:
Lastly, the code which is not working correctly, the retrieval. For this, I have no interest just yet in placing the data back into the text editor. Rather, I'd like to display it on the page like a typical blog post. However, I'm unable to even log to the console as of yet.
I am parsing the data back to JSON using JSON.parse, converting JSON to JS object using createFromRaw and using EdiorState (even though I don't have the text editor in this component but this seems to be needed to convert the data fully..) to convert fully:
useEffect( async () => {
try {
const response = await axios.get('http://localhost:8080/api/query', {
_id: '60da9673b996f54d507dbfc5'
});
const content = response;
if(content) {
const convertedContent =
EditorState.createWithContent(convertFromRaw(JSON.parse(content)));
console.log('convertedContent - ', convertedContent);
}
console.log('response - ', content);
} catch(error) {
console.log('error!', error);
}
}, [])
My result for the past day and last night has been the following:
"SyntaxError: Unexpected token o in JSON at position 1" and so I'm unsure what I'm doing wrong in the data retrieval, and possibly even the insertion.
Any ideas? Thanks again!
Edit: For more reference, here is what the data looks like when output to the console without a JSON.stringify, this is the full tree of data. I can see all of the relevant data is there, but how do I convert this data and display it into a div or paragraph tag, for example?
More or less figured this out, see my solution below given the aforementioned implementation:
Firstly, I think my biggest mistake was using JSON.parse(); I did away with this with success. My guess as to why this does not work (even though I inserted into MongoDB as JSON) is because we ultimately need the draft-js.Editor Object to convert the data from the DB into an object type it can understand, in order to subsequently convert into HTML successfully, with all properties.
Below is the code with captions/descriptions:
Retrieve data (in useEffect before React component is rendered:
useEffect( async () => {
console.log('useeffect');
try {
const response = await axios.get('http://localhost:8080/api/query', {
_id: '60da9673b996f54d507dbfc5' //hard-coded id from DB for testing
});
const content = response.data; //get JSON data from MongoDB
if(content) {
const rawContent = convertFromRaw(content); //convert from JSON to contentstate understood by DraftJS, for EditorState obj to use
setEditorState(EditorState.createWithContent(rawContent)); //create EditorState based on JSON data from DB and set into component state
let currentContentAsHTML = draftToHtml(convertToRaw(editorState.getCurrentContent())); //create object which converts contentstate understood by DraftJS into a regular vanilla JS object, then take THAT and convert into HTML with "draftToHtml" function. Save that into our 2nd state titled "convertedContent" to be displayed on page for blog post
setConvertedContent(currentContentAsHTML);
}
} catch(error) {
console.log('error retrieving!', error);
} },[convertedContent]) //ensure dependency with with convertedContent state, DB/server calls take time...
In component render, return HTML which sets the innerHTML in the DOM using/passing the convertedContent state which we converted to proper HTML format in step 1.
return (
<div className="blog-container" dangerouslySetInnerHTML={createMarkup(convertedContent)}></div>
</div>
);
In step 2, we called a function entitled, "createMarkup"; here is that method. It essentially returns HTML object using the HTML converted data originally from our database. This is a bit vulnerable it terms of malicious users being able to intercept that HTML in the DOM, however, so we use a method, "purify" from "DOMPurify" class from 'isomorphic-dompurify" library. I'm using this instead of regular DOMPurify because I am using Next JS and NEXT runs on the server side as well, and DOMPurify only expects client side:
const createMarkup = (html) => {
return {
__html: DOMPurify.sanitize(html)
}
}
I've been trying to save data from my form in my MongoDB for some time.
I also get a response from the database.
See also: create object in mongo db api onclick sending form
Unfortunately there are not enough tutorials in my mother tongue and I don't seem to understand everything in English.
I've tried some of the documentation, but I always fail.
What is missing in my webhook function so that the form data can be stored?
exports = function(payload) {
const mongodb = context.services.get("mongodb-atlas");
const mycollection = mongodb.db("created_notifications").collection("dpvn_collection");
return mycollection.find({}).limit(10).toArray();
};
The Webhookfunction was totally wrong.
READ THE DOCUMENTATION FIRST
exports = function(payload, response) {
const mongodb = context.services.get("mongodb-atlas");
const requestLogs = mongodb.db("created_notifications").collection("dpvn_collection");
requestLogs.insertOne({
body: EJSON.parse(payload.body.text()),
query: payload.query
}).then(result => {
})
};