This question already has answers here:
The useState set method is not reflecting a change immediately
(15 answers)
React setState not updating state
(11 answers)
Closed 1 year ago.
I'm trying to pushing a new object (after clicking a button) into my stated Array, my initial array has 25 cocktails.I want to push one, simply, first of all, this is my code about the insert.
console.log(drinks,"First, before pushing");
setDrinks([...drinks, {strPicture: null, strDrink: 'Vodka', strAlcoholic: 'Alcoholic', strCategory:'Cacharro'}]);
console.log(drinks,"Second, After pushing");
The first console log return an array with length 25, next i use my setDrinks, adding the previous drinks and the new one.
But the next console log returns an array with length 25, the same array of the first console log.
The next time i click my button it give me, the array with length 26, but i need to show on the first click, not on the second.
I tried many things like...
setDrinks((drinks) => [...drinks, {strPicture: null, strDrink: 'Vodka', strAlcoholic: 'Alcoholic', strCategory:'Cacharro'}]);
The only way that it have worked is with drinks.push but i read that is a very bad idea.
I'm using next js.
Thanks
Related
This question already has answers here:
Firestore Update single item in an array field
(2 answers)
How can I update an object inside of an array in firestore?
(1 answer)
Closed 6 months ago.
I'm trying to make a button that can edit an item within a documents array in firebase. Basically, the functionality I'm building is: you click an EDIT button, and it changes a tag into an tag where you would make your edit/update to the array item. Then you would click a DONE button and the update to the array would happen. For some reason, I can only find documentation on firebase for updating a document, and not an item inside the array. I've tried using arrayUnion but it only adds a new item to the array. I'm trying to update the info[0].tags in the screenshot below. Please let me know if I'm missing information to help make this work.
My issue seems to be I can't do: info[i]: arrayUnion({tags: tags}) so I'm not sure how to tell the updateDoc function which item in the info array I need to update.
Here's the code:
const editCard = async (tags, i) => {
const fieldRef = doc(db, "labels", activeLabels);
await updateDoc(fieldRef, {
info[i]: arrayUnion({ tags: tags }),
});
console.log(tags);
getLabels();
findLabel(activeLabels);
toast.success("Tags Updated!");
};
[![firebase document and array][1]][1]
[1]: https://i.stack.imgur.com/PDJcc.png
I am using jQuery and got an response from API by using $.ajax. I want to grab the Arrays length from inside each object and display that in the html page. This is what I have done so far.
Here is the API response, i did breakdown of the last object, which contains an array and player names:
{_type: "InjuredPlayers", flaggedTokens: Array(1)} //1 injured player name
{_type: "InjuredPlayers", flaggedTokens: Array(3)} //3 injured players names
{_type: "InjuredPlayers", flaggedTokens: Array(5)} //5 injured players names
{_type: "InjuredPlayers", flaggedTokens: Array(2)} //2 injured players names
>flaggedTokens:Array(2)
>0:{offset: 0, token: "John", type:"UnknownToken"}
>1:{offset: 1, token: "Adam", type:"UnknownToken"}
length: 2
>_proto_:Array(0)
_type: "InjuredPlayers"
>_proto_: Object
In order to grab the length of the Array I can do any of these 2 methods according to this Get length of array inside object
console.log(response.flaggedTokens.length)
1
3
5
2
OR
console.log(response["flaggedTokens"].length)
1
3
5
2
My Failed Attempts: I assigned this output to a variable and tried to loop through and output by doing this:
$.ajax(gameResponse).done(function(response) {
let injuredPlayers = response.flaggedTokens.length;
let injuredPlayersArray = [];
for (let i = 0; i < injuredPlayers.length; i++) {
injuredPlayersArray.push(injuredPlayers[i])
}
$('.injured_players').html(injuredPlayersArray[i])
})
<div class="container">
Team One Total number: <span class="injured_players"></span> //should be 1
Team Two Total number: <span class="injured_players"></span> //should be 3
Team Three Total number:<span class="injured_players"></span> //should be 5
Team Four Toal number: <span class="injured_players"></span> //should be 2
</div>
Clearly I made some mistake which I can't seem to figure this out by myself. I was hoping if someone can guide me through the right direction.
To start with, in your for loop, you are returning the push action, but that's unnecessary and it kills the loop on the first iteration. Also, you have already set the length of the array to a new variable, but then in your for loop, you try to get the length of the new variable. Lastly, you declare injuredPlayersArray in your ajax statement, but based on your post, you recieved 4 separate api responses, so it should be declared outside of your ajax call so that the array doesn't get overwritten with every new call. And you don't need a for loop as you're only working with one array. Here is what it should look like.
let injuredPlayersArray = [];
$.ajax(gameResponse).done(function(response) {
let injuredPlayers = response.flaggedTokens.length;
injuredPlayersArray.push(injuredPlayers)
})
Your other mistake is that you are trying to dynamically display the value in the proper html tag, but you're setting the value for every span tag at the same time. So after your loop is finished, they would all say 2.
To fix that you can add a for loop after all of your api calls are completed (aka NOT inside a $.ajax().done()):
for (let i = 0; i < injuredPlayersArray.length; i++) {
$('.injured_players').eq(i).html(injuredPlayersArray[i])
}
Note: .eq() returns a set of DOM elements that match the selector it is called upon. So $('.injured_players') matches 4 elements on your page and in your for loop, it finds the i-th element in that set (so index 0 is equal to the first span tag) and sets the html for that element.
Note 2: There is an assumption I had to make with your api calls. From the way your api call is storing the length of the flaggedToken array in your response, it seems each ajax response returns a single object with the array of injured players and that you will have 4 separate api calls. However, if that's not the case and the response returns a array of objects, you will need to iterate over the array and get the length for every array in every object one at a time. You can also then ignore my suggestion to move the declaration of injuredPlayersArray to outside the api call. And the second for loop i wrote would go inside the api call.
This question already has answers here:
How can I update state.item[1] in state using setState?
(25 answers)
Closed 4 years ago.
I have an array in my state:
state = {
some_array: [1,1,1,3,6,3,6,23], // sorry for the syntax it's changed
}
Now I want to change value in that array that has index let's say 4, and in this case that would be number 6, or if I want to change index 1, that would be second number or array.
I know this is probabbly very simple but I'm just very confused.
If you need more info please comment.
Thanks!
I think that you can to use next code:
const some_array = [...this.state.some_array]
some_array[indexHere] = yourValue
this.setState({some_array:some_array})
This example --- true way for FP in react.
This question already has answers here:
How do I get the last 5 elements, excluding the first element from an array?
(9 answers)
Closed 6 years ago.
I would like to know how can I obtain the last two elements of this array like this:
array = [1,5,7,8,10,12,23,24];
I am trying to obtain with slice() function but it doesn´t work for me, beacuse I always I want to obtain the last two positions.
array = [23,24];
I hope that anyone can help me in this question.
Regards!
Use Array#slice with negative index.
var array = [1,5,7,8,10,12,23,24];
console.log(array.slice(-2));
You can learn more about this method also here.
array = [1,5,7,8,10,12,23,24];
console.log(array.slice(-2))
Use slice -2
aray.prototype.splice() also
Note: Splice it will update the original array also
var array = [1,5,7,8,10,12,23,24];
console.log(array.splice(-2));
I've been given two arrays, each of which has several objects within them. I'm trying to make it so that when a certain dropdown selection is made, it pushes that "flight information" into a "flight summary" div, but I'm having a hard time figuring out how to do it.
var possibleDepartureFlights=[{year:2012,month:11,day:13,hour:17,minute:37,price:137.38} and so on];
var possibleReturnFlights=[{year:2012,month:11,day:18,hour:21,minute:45,price:189.46} and so on];
Each var has 10 objects within the array, each of which has all those properties.
And as a bonus question, I've figured out how to hide a "submit" button when the return flight selected is earlier than the departure, but I can't figure out how to make the submit button come back when a different selection is made!
function displayDivs() {
var departureValue = $('#departureFlightsControl').val();
var returnValue = $('#returnFlightsControl').val();
if (departureValue != "default") {
$('.CumulativeSummary').addClass('totalAvailable');
$('.DepartureSummary').addClass('flightChosen');
}
if (returnValue != "default") {
$('.CumulativeSummary').addClass('totalAvailable');
$('.ReturnSummary').addClass('flightChosen');
}
if ($('#returnFlightsControl').val() < $('#departureFlightsControl').val()) {
$('.SubmitArea').hide();
}
Sorry if this question is vague! I'm new to jQuery and JavaScript, so I'm not really sure what I'm doing (and I'm not even really sure what to Google for to find the answer to my problem(s)). Please use small words, as if you're speaking to a child. Thanks!
Your question is really too broad, anyways... Suppose you have following
var possibleDepartureFlights=[
{year:2012,month:10,day:13,hour:10,minute:37,price:137.38},
{year:2012,month:11,day:15,hour:17,minute:47,price:150.50}
];
The possibleDepartureFlights is an array of two objects and the first element of the array is the first object and it's {year:2012,month:10,day:13,hour:10,minute:37,price:137.38} and it's index is 0 and the second element in your possibleDepartureFlights array is the second object and it's {year:2012,month:11,day:15,hour:17,minute:47,price:150.50} and it's index is 1. Now, if you want to access the month property of the first item of the array then you can write like
alert(possibleDepartureFlights[0].month); // this will alert 10
For the month of the second item/object in the array you can write
alert(possibleDepartureFlights[1].month); // this will alert 11
To loop through the array and print out the each property of every objects, you can try this
for(i=0;i<possibleDepartureFlights.length;i++)
{
console.log(possibleDepartureFlights[i].year);
console.log(possibleDepartureFlights[i].month);
console.log(possibleDepartureFlights[i].hour);
console.log(possibleDepartureFlights[i].minute);
console.log(possibleDepartureFlights[i].price);
}
An Example Here.
Remember, this is only a short example and there are more about arrays and objects in JavaScript. Also remember that you can loop an object with for in like for loop. Also this one could be helpful too.