I am creating MongoDB records based on user inputs, and then for each new object created, I am pushing the object ID into an array. My problem is my console.log statement in the last line returns empty. So How I could wait on the forEach execution to be over so I have the updated assetsArray, any help is appreciated!
Here is my code:
let assetsArray = [];
if (assets) {
JSON.parse(assets).forEach(asset => {
Image.create({
organization: organizationID,
imageName: asset.imageName,
imageDescription: asset.imageDescription ?? null,
imagePath: asset.imagePath
}).then(record => {
console.log(record)
assetsArray.push(record._id)
})
})
}
console.log(assetsArray)
You can use Promise.all for your case
const tasks = JSON.parse(assets).map(asset => {
return Image.create({
organization: organizationID,
imageName: asset.imageName,
imageDescription: asset.imageDescription ?? null,
imagePath: asset.imagePath,
})
});
Promise.all(tasks).then((records) => {
return records.map(record => {
console.log(record)
return record._id
})
}).then(assetsArray => {
console.log(assetsArray)
})
Related
I'm trying to filter a players array by comparing the names property to a roster array and rendering the matches from the players array.
When a user selects a year the getCollegeRoster() function returns players who have a year property matching the selection. From there I'm trying to filter and display the .name matches from the players array, but it seems i'm unable to update playerStateValue. I'm using recoil to manage state. Any insight would be much appreciated.
const getCollegeRoster = async () => {
setLoading(true);
try {
const playersQuery = query(
collection(firestore, `colleges/${communityData.id}/rosters`),
where("year", "==", selection),
);
const playerDocs = await getDocs(playersQuery);
const collegeRoster = playerDocs.docs.map((doc) => ({ id: doc.id, ...doc.data() }));
setRoster(collegeRoster as unknown as Roster[]);
console.log('collegePlayers', roster);
} catch (error: any) {
console.log("getCollegePlayers error", error.message);
}
setLoading(false);
};
const onSelection = (newSelection: any) => {
setSelection(newSelection);
console.log('newselect', newSelection)
getCollegeRoster();
const filteredArray = [...playerStateValue.players].filter((el) => ({
name: el.name,
match: [...roster].some((f) => f.name === el.name)
})
);
setPlayerStateValue((prev) => ({
...prev,
players: filteredArray as Player[],
playersCache: {
...prev.playersCache,
[communityData?.id!]: filteredArray as Player[],
},
playerUpdateRequired: false,
}));
} ```
also tried adding setplayerstatevalue into the getcollegeroster function:
onst getCollegeRoster = async () => {
console.log("WE ARE GETTING Players!!!");
console.log('communitydata', communityData);
setLoading(true);
try {
const playersQuery = query(
collection(firestore, `colleges/${communityData.id}/rosters`),
where("year", "==", selection),
);
const playerDocs = await getDocs(playersQuery);
const collegeRoster = playerDocs.docs.map((doc) => ({ id: doc.id, ...doc.data() }));
setRoster(collegeRoster as unknown as Roster[]);
console.log('collegePlayers', roster);
const filteredArray = [...playerStateValue.players].filter((el) => ({
name: el.name,
match: [...roster].some((f) => f.name === el.name)
})
);
setPlayerStateValue((prev) => ({
...prev,
players: filteredArray as Player[],
playersCache: {
...prev.playersCache,
[communityData?.id!]: filteredArray as Player[],
},
playerUpdateRequired: false,
}));
} catch (error: any) {
console.log("getCollegePlayers error", error.message);
}
setLoading(false);
};
{playerStateValue.players.map((player: Player, index) => (
<PlayerItem
key={player.id}
player={player}
// postIdx={index}
onPlayerVote={onPlayerVote}
userVoteValue={
playerStateValue.playerVotes.find((item) => item.playerId === player.id)
?.voteValue
}
onSelectPlayer={onSelectPlayer}
/>
I believe I found the problem. getCollegeRoster() is an async function which means it is being executed asynchronous.
That function is responsible for updating roster and you are using roster inside your filtering while it is being asynchronously updated.
There is no guarantee that roster is updated by the time you filter your array.
You have two ways of solving this. Either you execute setPlayerStateValue() inside of getCollegeRoster() or you wait for getCollegeRoster() to be done by preappending it with await and your onSelection function with async:
const onSelection = async (newSelection: any) => {
setSelection(newSelection);
console.log("newselect", newSelection);
await getCollegeRoster();
const filteredArray = [...playerStateValue.players].filter((el) => ({
name: el.name,
match: [...roster].some((f) => f.name === el.name),
}));
...
Edit:
Another scenario I can think of is that playerStateValue might be the culprit. In React setState works asynchronous as well, if you access playerStateValue via curr/prev-callback, it is guaranteed that you are accessing the values of the current state object while updating the state. Try this use of setPlayerStateValue:
setPlayerStateValue((prev) => {
const filteredArray = prev.players.filter((el) => ({
name: el.name,
match: [...roster].some((f) => f.name === el.name),
})) as Player[];
return {
...prev,
players: filteredArray,
playersCache: {
...prev.playersCache,
[communityData?.id!]: filteredArray,
},
playerUpdateRequired: false,
};
});
I have this function, I created it but then I'm getting confused and don't know how to return the data.
I have tried Promise.all() before but it's seems I do not quite understand it so I have removed it from my code, I don't know if it's a correct way to do it or not.
I'm following this AniList Node Document
Here's how the code work. I'm using POSTMAN to query the Title, for example, One Piece, it'll then search the query title and get the ID of that Title in AniList. Then, it's using that ID to find all the info (it's in the detailInfo)
Here's my Model:
static async getAnilist(title) {
const Anilist = new anilist()
const animeInfo = Anilist.searchEntry
.anime(title, null, 1, 1)
.then((titleToID) => {
const animeID = titleToID.media[0].id
const detailInfo = Anilist.media.anime(animeID).then((data) => {
return {
AnimeID: animeID,
Schedule: data.airingSchedule[0],
Score: data.averageScore,
BannerImg: data.bannerImage,
Character: data.characters,
Country: data.countryOfOrigin,
CoverImg: data.coverImage,
Duration: data.duration,
EndDate: data.endDate,
EpisodeTotal: data.episodes,
Genre: data.genres,
Season: data.season,
SeasonYear: data.seasonYear,
Status: data.status,
Studio: data.studios,
UpdateAt: data.updatedAt,
}
})
return detailInfo
})
return animeInfo
}
Here's my Controller:
static async getAnilist(req, res, next) {
const { title } = req.query
try {
const { data } = await Model.getAnilist(title)
res.json({
success: true,
data: data,
})
} catch (err) {
next(err)
}
}
What I'm hoping for:
"success" : true,
"data" : {
AnimeID,
Schedule,
Score,
BannerImg,
...
UpdateAt
}
What I'm getting right now
"success" : true
but without any data due to I can't return it.
The request is succeeded, but I don't know how to actually return it from nested promise.
Here's what I get from using console.log({AnimeID, Schedule...}) instead of return
In async...await, async expects an await to follow. In your model you are declaring the function as async but inside you have promise. Easiest solution is to use await instead of promise.
static async getAnilist(title) {
const Anilist = new anilist()
const titleToId = await Anilist.searchEntry.anime(title, null, 1, 1);
const animeID = titleToID.media[0].id;
const data = await Anilist.media.anime(animeID);
const detailInfo = {
AnimeID: animeID,
Schedule: data.airingSchedule[0],
Score: data.averageScore,
BannerImg: data.bannerImage,
Character: data.characters,
Country: data.countryOfOrigin,
CoverImg: data.coverImage,
Duration: data.duration,
EndData: data.endDate,
EpisodeTotal: data.episodes,
Genre: data.genres,
Season: data.season,
SeasonYear: data.seasonYear,
Status: data.status,
Studio: data.studios,
UpdateAt: data.updatedAt,
};
const animeInfo = detailInfo;
return animeInfo;
}
NB: You can optimize the above to be more consise. I translated it as-is.
I am little confused on why an array is not updating when I resolve a promise that contains Firestore nested get.
The code is below:
let userArray = [];
return new Promise(resolve => {
channelPaticipationRef
.where('channel', '==', channel.id)
.get()
.then(participationSnapshot => {
participationSnapshot.forEach(participationDoc => {
const participation = participationDoc.data();
participation.id = participationDoc.id;
if (participation.user != userId) {
usersRef
.doc(participation.user)
.get()
.then(user => {
if (user.data()) {
const userData = user.data();
userArray = [
...userArray,
{
userId: userData.id,
userFirstName: userData.firstName,
userLastName: userData.lastName,
userIsOnline: userData.isOnline,
userProfilePictureURL: userData.profilePictureURL,
userLastTimestamp: userData.lastOnlineTimestamp,
},
];
console.log(1, userArray)
}
})
.catch(error => console.log(error));
}
console.log(2, userArray)
});
console.log(3, userArray)
resolve(userArray);
});
});
In the console it returns
2 []
2 []
3 []
1 [{…}]
1 (2) [{…}, {…}]
and the promise returns an empty array
If I am pushing or updating the array using a spread operator, why is it not registering?
I want to store an array state using async storage. but everytime i reload the app, it comes up blank. below is a sample code, and I have shown only the functions for better clarity.
componentDidMount() {
this.getDataSync();
}
getDataSync = async () => {
try {
const list = await AsyncStorage.getItem(LIST_STORAGE_KEY);
const parsedList = JSON.parse(list);
const obj = Object.keys(parsedList);
this.setState({ isDataReady: true, list: obj || [] });
} catch (e) {
Alert.alert('Failed to load list.');
}
}
handleAdd() {
const { firstname, lastname, email, phone} = this.state;
const ID = uuid();
const newItemObject = {
key: ID,
firstname: firstname,
lastname: lastname,
email: email,
phone: phone,
image: null,
};
this.setState(prevState => ({
list: [...prevState.list, newItemObject]
}));
this.saveItems(this.state.list);
}
saveItems = list => {
AsyncStorage.setItem(LIST_STORAGE_KEY, JSON.stringify(list));
};
You are not saving your list but getting keys from the list. const obj = Object.keys(parsedList); you are saving array indexes to state.
getDataSync = async () => {
try {
const list = await AsyncStorage.getItem(LIST_STORAGE_KEY);
const parsedList = JSON.parse(list);
this.setState({
isDataReady: true,
list: Array.isArray(parsedList) && parsedList.length && parsedList || []
});
} catch (e) {
Alert.alert('Failed to load list.');
}
}
Also pass saveItems as a callback to save the correct data.
this.setState(prevState => ({
list: [...prevState.list, newItemObject]
}), () => this.saveItems(this.state.list));
The .setState() method is may be asynchronous, so the result of setting the state, cannot be used immediately after setting it. If you want to use the results of setting the state, you should use the callback (2nd param), which is called after the state is actually set:
this.setState(
prevState => ({
list: [...prevState.list, newItemObject]
}),
() => this.saveItems(this.state.list)
);
I have a loop. On each round I need to add Question data into MongoDB database. This works fine. However, I want to get _id of the new inserted Question before the loop goes into the next round. This is where I have a problem. It takes certain amount of time before the server returns _id and loop goes to the next round by that time. Therefore, I need a way to wait for the server response and only after that move to the next round of the loop.
Here is my back-end code:
router.post("/createQuestion", (req, res) => {
const newQuestion = new Question({
description: req.body.description,
type: req.body.type,
model: req.body.model
});
newQuestion.save().then(question => res.json(question._id))
.catch(err => console.log(err));
});
Here is my axios function, which is in a separate file and imported into the class:
export const createQuestion = (questionData) => dispatch => {
axios.post("/api/scorecard/createQuestion", questionData)
.then(res => {
return res.data;
}).catch(err =>
console.log("Error adding a question")
);
};
Here is my code inside my class:
JSON.parse(localStorage.getItem(i)).map(question => {
const newQuestion = {
description: question.description,
type: question.questionType,
model: this.props.model
}
const question_id = this.props.createQuestion(newQuestion);
console.log(question_id);
}
Console shows undefined.
i faced the same issue i solved the same by sending the array question to the node and read one by one question and update with the next Question ID.
router.post("/createQuestion", (req, res) => {
let d =[questionarray];
let i = 0;
let length = d.length;
var result = [];
try {
const timeoutPromise = (timeout) => new Promise((resolve) => setTimeout(resolve, timeout));
for (i = 0; i < length; i++) {
await timeoutPromise(1000); // 1000 = 1 second
let CAT_ID = parseInt(d[i].CAT_ID);
let TOPIC_ID = parseInt(d[i].TOPIC_ID);
let Q_DESC = (d[i].Q_DESC);
let OPT_1 = (d[i].OPT_1);
let OPT_2 = (d[i].OPT_2);
let OPT_3 = (d[i].OPT_3);
let OPT_4 = (d[i].OPT_4);
let ANS_ID = (d[i].ANS_ID);
let TAGS = (d[i].TAGS);
let HINT = (d[i].HINT);
let LEVEL = d[i].LEVEL;
let SRNO = d[i].SrNo;
let qid;
const savemyData = async (data) => {
return await data.save()
}
var myResult = await Question.find({ TOPIC_ID: TOPIC_ID }).countDocuments(function (err, count) {
if (err) {
console.log(err);
}
else {
if (count === 0) {
qid = TOPIC_ID + '' + 10001;
const newQuestion = new Question({
Q_ID: qid,
CAT_ID: CAT_ID,
TOPIC_ID: TOPIC_ID,
Q_ID: qid,
Q_DESC: Q_DESC,
OPT_1: OPT_1,
OPT_2: OPT_2,
OPT_3: OPT_3,
OPT_4: OPT_4,
ANS_ID: ANS_ID,
HINT: HINT,
TAGS: TAGS,
LEVEL: LEVEL,
Q_IMAGE: ''
})
await savemyData(newQuestion)
.then(result => { return true })
.catch(err => { return false });
//`${SRNO} is added successfully`
//`${SRNO} is Failed`
}
else if (count > 0) {
// console.log(count)
Question.find({ TOPIC_ID: TOPIC_ID }).sort({ Q_ID: -1 }).limit(1)
.then(question => {
qid = question[0].Q_ID + 1;
const newQuestion = new Question({
Q_ID: qid,
CAT_ID: CAT_ID,
TOPIC_ID: TOPIC_ID,
Q_ID: qid,
Q_DESC: Q_DESC,
OPT_1: OPT_1,
OPT_2: OPT_2,
OPT_3: OPT_3,
OPT_4: OPT_4,
ANS_ID: ANS_ID,
HINT: HINT,
TAGS: TAGS,
LEVEL: LEVEL,
Q_IMAGE: ''
})
await savemyData(newQuestion)
.then(result => { return true })
.catch(err => { return false });
})
.catch(err => console.log(err));
}
}
});
if (myResult)
result.push(`${SRNO} is added successfully`);
else
result.push(`${SRNO} is Failed`);
}
// console.log(result)
return res.json(result);
}
catch (err) {
//res.status(404).json({ success: false })
console.log(err)
}
});
First your function createQuestion doesn't return a value so the assigning to question_id would always be undefined. Anyways, since u have a dispatch in your createQuestion function, I am assuming u r using redux, so I would suggest you to using redux-thnk, split the fetching new action logic to a thunk action, and use the questionID value from the redux state rather than returning a value from createQuestion. In your class u can be listening for a change of the questionID and if that happens, dispatch the saving of the next question.