I am using a promise to dispatch an asynchronous action in react. I just want to change the properties of an object. The function works. If I wrap the code in a promise and after doing Promise().then works but if I do myFunction(params).then() the then is not called here is my function. (It is recursive):
export function setValue(propertyPath, value, obj) {
console.log("setting the value")
return new Promise((resolve, reject) => {
// this is a super simple parsing, you will want to make this more complex to handle correctly any path
// it will split by the dots at first and then simply pass along the array (on next iterations)
let properties = Array.isArray(propertyPath) ? propertyPath : propertyPath.split(".")
// Not yet at the last property so keep digging
if (properties.length > 1) {
// The property doesn't exists OR is not an object (and so we overwrite it) so we create it
if (!obj.hasOwnProperty(properties[0]) || typeof obj[properties[0]] !== "object") obj[properties[0]] = {}
// We iterate.
return setValue(properties.slice(1), value, obj[properties[0]])
// This is the last property - the one where to set the value
} else {
// We set the value to the last property
obj[properties[0]] = value
console.log("modified object")
console.log(obj)
return resolve(obj)
}
}
)
}
export function performPocoChange(propertyPath, value, obj) {
console.log("we are indeed here")
return (dispatch) => {
setValue(propertyPath, value, obj).then((poco) => {
console.log("poco is here")
console.log(poco)
dispatch(changePoco(poco))
})
}
}
the console shows "we are indeed here" but not "Poco is here" and changePoco (that is the action) is not called. However if I do a then right after the brackets of the promises and log it shows the log.
I am not an expert in JS. I am trying really hard and this really got me. Any ideas?
Many thanks in advance
You are not resolveing the promise except in the else so the then doesn't get executed.
Related
I have a function like below, which is invoked from within ngAfterViewInit(). I have a ngFor in the view using the countryUsageTypesArr variable. Now I have tried to put that part of the code inside ngZone.run(), setTimeout(), tried to use spread operator (to create a new array), but nothing makes angular to catch the change. The only option is using ChangeDetectionRef (which works well, I have tested). But I am not feeling well to use ChangeDetector every where. Is there any other way I should try?
getCategoryById(categoryId: number) {
this.categoryService.getCategoryById(categoryId).subscribe((response: any) => {
if (response.result == 1) {
window.setTimeout(() => {
this.countryUsageTypesArr = [...response.data.country_usage_types, []];
}, 0);
}
}, (error: any) => {
// console.log(error.error.msg);
});
}
i currently have an object and inside this object i have multiple objects and Arrays. I want replace an Array inside this object with a new Array, so i thought of making a copy of the entire object and simple replace the Array i wan to change with the updated Array. My problem is i couldnt complete my code, i have the idea of how to do it but cant execute it.
setListings(listings=>
listings.map(item =>{
if(item.id === msg.id){
//console.log(item)
//console.log(item.Message)
const newMessages = [msg,...item.Messages]
//console.log(newMessages)
return console.log([msg,...item.Messages],{...item}) // just for testing purpose i
am returning a console log
to see what it will get me. Not correct.
}
return item;
})
);
So basically listings is my state variable, here console.log(item) prints out the entire object, console.log(item.Messages) prints out the current Messages Array which i want to replace, console.log(newMessages) prints out the new Messages Array which i want to replace the current Messages array with.
cartItem.map((food,index)=> {
if(food.food_id == newFoodItem.food_id && food.id == newFoodItem.id){
const AllFoodData = cartItem
AllFoodData[index] = newFoodItem
AsyncStorage.setItem('#Add_cart_Item', JSON.stringify(AllFoodData))
.then(() => {})
.catch(err => console.log(err))
ToastAndroid.showWithGravityAndOffset('Cart Replace Successfully',ToastAndroid.LONG,ToastAndroid.BOTTOM,25,50 )
}
})
So basically what i want to achieve here is to add the msg object to the existing Messages Array.
Since lsitings is an Array of objects using the .map i can spread through each object and check if the id of that object is each to my msg.id. if that is true then i want to return a copy the that specific listing and edit the Messages Array within [msg, ...item.Messages] otherwise return the existing item.
setListings(listings=> listings.map(item => {
if(item.id === msg.id) {
return {
...item,
Messages: [msg, ...item.Messages]
}
}
return item;
}));
});
I am fresher here, trying to start using => for functions and can't quite understand the inner part of a function in this code. It does work, wrote it myself, but just want to fully understand how and why.
Is there any other form you could write the exact same code in different "shape"?
I understand how first function extracts to:
function deleteNote(NoteID) {
...
}
But can't figure out how does the inner part work.
const deleteNote = noteID => {
setNote(existingNotes => { return existingNotes.filter((note) => note.id !== noteID);
})
}
Result is fine, just want to clarify what's going on... :)
In short, that could all be translated to:
const deleteNote = function(noteId) {
setNote(function(existingNotes) {
return existingNotes.filter(function(note) {
return note.id !== noteID;
});
});
};
If you wrap the part after => in curly brackets {}, then you need a return statement to return something, such as in:
setNote(existingNotes => {
return ...;
})
If you don't wrap it around curly brackets, then whatever you put after the arrow is what will be returned, such as in:
existingNotes.filter((note) => note.id !== noteID);
Take a look at this short article.
To add to Elder's answer, another easier way of getting used to arrow function is by dissecting the calls into separate named functions (which is what we are commonly used to).
So for example:
existingNotes.filter((note) => note.id !== noteID);
Could also be viewed as:
function noteDifferent(note) {
return (note.id !== noteID);
}
existingNotes.filter(noteDifferent);
Array.filter(fn) expects a callback function 'fn' as a parameter, and will send the element note in this case, to said function.
I am having a really hard time solving this issue I'm currently having. You see, I am using Firebase as my database to store and fetch data.
Right now, I want to be able to return an array that is being made inside a Firebase .once call, but I am having some difficulties. This is my code so far:
Calling the function (a return function):
<p>{this.fetchStartingPrice(singleProduct.id)}</p>
This is where I want to display the specific value, that I am trying to fetch down below:
fetchStartingPrice(category){
let promises = [];
promises.push(this.fetchPrices(category));
Promise.all(promises).then(result => {
console.log(result);
})
}
I have just used a console.log in an attempt to troubleshoot errors.
fetchPrices(category){
var allPrices = [];
allProductsFirebase.child(category).once('value', (snapshot) => {
snapshot.forEach((childSnapshot) => {
if(childSnapshot.key == category){
allPrices.append(childSnapshot.val().brand);
}
});
return allPrices;
})
}
So basically, I want to loop through the allProductsFirebase in an attempt to first identify the brand of the product, and if it matches with the brand that has been used as a parameter in fetchStartingPrice() and fetchPrises(), I want to store the specific price of that product in an array of numbers (prices). After I have looped through the whole snapshot, I want to return the full array containing only product prices, and then through fetchStartingPrice(), I want to use Math.min(promises) to grab the lowest number in that array. However, I am having a really hard time doing this. Could someone please help me with this?
I want to be able to then, after all of this, return the value in fetchStartingPrice().
fetchPrices() must return Promise or be Promise. you are returning nothing from fetchPrices() ( you are returning allPrices in the .once() scope ). try to return the result ( if it returns Promise ) that .once() returns.
fetchPrices(category){
var allPrices = [];
return allProductsFirebase.child(category).once('value', (snapshot) => {
snapshot.forEach((childSnapshot) => {
if(childSnapshot.key == category){
allPrices.append(childSnapshot.val().brand);
}
});
return allPrices;
})
}
superagent.get(URL).then((res) => {
for(let i in res.body) {
if (i==='has_rejected_advisories') {
console.log(i + "="+res.body[i]);
}
}
})
.catch((err) => err.message));
My result is:
has_rejected_advisories=false
But I am not able to use res.body[i] outside this function, i.e I want superagent function to return this value in a boolean variable to use it elsewhere.
ex.
a = superagent.get(URL).then((res) => {
for(let i in res.body) {
if(i==='has_rejected_advisories') {
console.log(i + "="+res.body[i]);
}
}
})
.catch((err) => err.message));
if(a===false){/*do this*/}
This is because the superagent.get(url) call is asynchronous. The value given to a is a Promise
Since this is async, the if (a === false) is actually executing before the function body passed to .then. You will either need to move this logic to the .then function, or use something like async/await if you like the synchronous looking syntax.
On top of jerelmiller's great advice you need to note the following:
Try this:
create a global var assuming it's a string
var mysares = ""
This example will only bring back 1 string back of everything!! Not single element. Also if you can't get the standard Fetch() to work don't try other methods like axios or superagents. Now use our global like so:
superagent.get(URL).then((res) => {
for(let i in res.body) {
if (i==='has_rejected_advisories') {
//Add comments as will help you
//to explain to yourself and others
//what you're trying to do
//That said if this iteration produces
//correct data then you're fine
//push my result as a string
mysares = res.body[i];
//infact what's in row 1?
mysares = res.body[0];
//Actually I code my own JSON!!
mysares = res.body[1];
console.log(i + "="+mysares);
}
}
})
.catch((err) => err.message));
Now you can do whatever:
if(mysares===false){/*do this*/
alert(playDuckHunt());}
Things to note:
res.body[i] is an iteration
You cannot use it outside of the function
Because:
It's local to that function
You don't know what position of 'i' is even if you could use it as you will be outside of your loop
One last thing:
Loops loop through loops or arrays etc.
So (in real world) you can't just request the value of the loop
unless you agree the position of data to be released,
type,and bucket (where it's going to be displayed or not).
Hope this helps!
PS> we need to know where 'has_rejected_advisories' is in the JSON so send us your json url as it must be a column/obj header name. Or it's any old 'a' then var a can be your "false"
In constructor:
this.state = {a:null};
In some function:
superagent.get(URL).then(
(res) => {for(let i in res.body)
{
if(i === 'has_rejected_advisories')
{
this.setState({a:res.body[i]})
}
}
}).catch((err)=>(err.message));
In render:
console.log(this.state.a);
Inside then() the value could be used using state variable but there are many scenarios we could not use them, like if we want to perform all the operations under constructor i.e Initializing state variable, calling superagent and changing the state variable and using the state variable.