How to append deleted from array elements by slice method? - javascript

How to delete elements from start of array and append them into end ?
const ImageArray = [i1,i2,i3,i4,i5]
const clickHandler = (index: number) => {
let start = ImageArray.slice(index)
let end = ImageArray....
let result = start.concat(end)
return result
}
{ImageArray.map((image, index) => (
<div
onClick={() => clickHandler(index)}
key={index} style={{backgroundImage: 'url('+image+')'}}
/>
))}
P.S. It's not necessary to use slice method

With x being the index clicked :
const arr = [0,1,2,3,4];
const newArr = [...arr.slice(1), ...arr.slice(0, 1)]

You can do:
const arr = ['i1','i2','i3','i4','i5']
const clickHandler = i => [...arr.slice(i), ...arr.slice(0, i)]
console.log('i3:', clickHandler(2)) // Clicked: 'i3'

Your function is designed to return a new array, but the place where you call the function is not doing anything with the returned value.
I assume you want to mutate ImageArray. In that case use splice to delete the first part, and push to append that same part at the end:
const clickHandler = (index: number) => {
ImageArray.push(...ImageArray.splice(0, index));
};

You can try splice instead
const clickHandler = (index) => ImageArray.push(...ImageArray.splice(0, index))
In case if you are working with a state and doesn't want to mutate original array, try to spread ImageArray to make not deep copy of it
const clickHandler = (index) => {
const arrCopy = [...ImageArray];
arrCopy.push(...arrCopy.splice(0, index));
return arrCopy;
}

array.splice(index).concat(array.splice(array.length - index))

Related

Removing/filtering out an item from an array using the key [duplicate]

The story is, I should be able to put Bob, Sally and Jack into a box. I can also remove either from the box. When removed, no slot is left.
people = ["Bob", "Sally", "Jack"]
I now need to remove, say, "Bob". The new array would be:
["Sally", "Jack"]
Here is my react component:
...
getInitialState: function() {
return{
people: [],
}
},
selectPeople(e){
this.setState({people: this.state.people.concat([e.target.value])})
},
removePeople(e){
var array = this.state.people;
var index = array.indexOf(e.target.value); // Let's say it's Bob.
delete array[index];
},
...
Here I show you a minimal code as there is more to it (onClick etc). The key part is to delete, remove, destroy "Bob" from the array but removePeople() is not working when called. Any ideas? I was looking at this but I might be doing something wrong since I'm using React.
When using React, you should never mutate the state directly. If an object (or Array, which is an object too) is changed, you should create a new copy.
Others have suggested using Array.prototype.splice(), but that method mutates the Array, so it's better not to use splice() with React.
Easiest to use Array.prototype.filter() to create a new array:
removePeople(e) {
this.setState({people: this.state.people.filter(function(person) {
return person !== e.target.value
})});
}
To remove an element from an array, just do:
array.splice(index, 1);
In your case:
removePeople(e) {
var array = [...this.state.people]; // make a separate copy of the array
var index = array.indexOf(e.target.value)
if (index !== -1) {
array.splice(index, 1);
this.setState({people: array});
}
},
Here is a minor variation on Aleksandr Petrov's response using ES6
removePeople(e) {
let filteredArray = this.state.people.filter(item => item !== e.target.value)
this.setState({people: filteredArray});
}
Simple solution using slice without mutating the state
const [items, setItems] = useState(data);
const removeItem = (index) => {
setItems([
...items.slice(0, index),
...items.slice(index + 1)
]);
}
Use .splice to remove item from array. Using delete, indexes of the array will not be altered but the value of specific index will be undefined
The splice() method changes the content of an array by removing existing elements and/or adding new elements.
Syntax: array.splice(start, deleteCount[, item1[, item2[, ...]]])
var people = ["Bob", "Sally", "Jack"]
var toRemove = 'Bob';
var index = people.indexOf(toRemove);
if (index > -1) { //Make sure item is present in the array, without if condition, -n indexes will be considered from the end of the array.
people.splice(index, 1);
}
console.log(people);
Edit:
As pointed out by justin-grant, As a rule of thumb, Never mutate this.state directly, as calling setState() afterward may replace the mutation you made. Treat this.state as if it were immutable.
The alternative is, create copies of the objects in this.state and manipulate the copies, assigning them back using setState(). Array#map, Array#filter etc. could be used.
this.setState({people: this.state.people.filter(item => item !== e.target.value);});
Easy Way To Delete Item From state array in react:
when any data delete from database and update list without API calling that time you pass deleted id to this function and this function remove deleted recored from list
export default class PostList extends Component {
this.state = {
postList: [
{
id: 1,
name: 'All Items',
}, {
id: 2,
name: 'In Stock Items',
}
],
}
remove_post_on_list = (deletePostId) => {
this.setState({
postList: this.state.postList.filter(item => item.post_id != deletePostId)
})
}
}
filter method is the best way to modify the array without touching the state.
It returns a new array based on the condition.
In your case filter check the condition person.id !== id and create a new array excluding the item based on condition.
const [people, setPeople] = useState(data);
const handleRemove = (id) => {
const newPeople = people.filter((person) => person.id !== id);
setPeople( newPeople);
};
<button onClick={() => handleRemove(id)}>Remove</button>
Not advisable:
But you can also use an item index for the condition if you don't have any id.
index !== itemIndex
This is your current state variable:
const [animals, setAnimals] = useState(["dogs", "cats", ...])
Call this function and pass the item you would like to remove.
removeItem("dogs")
const removeItem = (item) => {
setAnimals((prevState) =>
prevState.filter((prevItem) => prevItem !== item)
);
};
your state variable now becomes:
["cats", ...]
Another way of doing it is by using useState hook. Check docs: https://reactjs.org/docs/hooks-reference.html#functional-updates It states: Unlike the setState method found in class components, useState does not automatically merge update objects. You can replicate this behavior by combining the function updater form with object spread syntax as shown below or use useReducer hook.
const [state, setState] = useState({});
setState(prevState => {
return {...prevState, ...updatedValues};
});
Some answers mentioned using 'splice', which did as Chance Smith said mutated the array. I would suggest you to use the Method call 'slice'
(Document for 'slice' is here) which make a copy of the original array.
Just filter out deleted item and update the state with remaining items again,
let remainingItems = allItems.filter((item) => {return item.id !== item_id});
setItems(remainingItems);
const [people, setPeople] = useState(data);
const handleRemove = (id) => {
const newPeople = people.filter((person) => { person.id !== id;
setPeople( newPeople );
});
};
<button onClick={() => handleRemove(id)}>Remove</button>
It's Very Simple
First You Define a value
state = {
checked_Array: []
}
Now,
fun(index) {
var checked = this.state.checked_Array;
var values = checked.indexOf(index)
checked.splice(values, 1);
this.setState({checked_Array: checked});
console.log(this.state.checked_Array)
}
removePeople(e){
var array = this.state.people;
var index = array.indexOf(e.target.value); // Let's say it's Bob.
array.splice(index,1);
}
Redfer doc for more info
Almost all the answers here seem to be for class components, here's a code that worked for me in a functional component.
const [arr,setArr]=useState([]);
const removeElement=(id)=>{
var index = arr.indexOf(id)
if(index!==-1){
setArr(oldArray=>oldArray.splice(index, 1));
}
}
If you use:
const[myArr, setMyArr] = useState([]);
for add:
setMyArr([...myArr, value]);
and for remove:
let index = myArr.indexOf(value);
if(index !== -1)
setPatch([...myArr.slice(0, index), ...myArr.slice(index, myArr.length-1)]);
Removing an element with a certain value
//
Note filter function always returns a new array.
const people = ["Bob", "Sally", "Jack"]
const removeEntry = (remove) => {
const upDatePeople = people.filter((Person) =>{
return Person !== remove
});
console.log(upDatePeople)
//Output: [ 'Sally', 'Jack' ]
}
removeEntry("Bob");
You forgot to use setState. Example:
removePeople(e){
var array = this.state.people;
var index = array.indexOf(e.target.value); // Let's say it's Bob.
delete array[index];
this.setState({
people: array
})
},
But it's better to use filter because it does not mutate array.
Example:
removePeople(e){
var array = this.state.people.filter(function(item) {
return item !== e.target.value
});
this.setState({
people: array
})
},
const [randomNumbers, setRandomNumbers] = useState([111,432,321]);
const numberToBeDeleted = 432;
// Filter (preferred)
let newRandomNumbers = randomNumbers.filter(number => number !== numberToBeDeleted)
setRandomNumbers(newRandomNumbers);
//Splice (alternative)
let indexOfNumberToBeDeleted = randomNumbers.indexOf(numberToBeDeleted);
let newRandomNumbers = Array.from(randomNumbers);
newRandomNumbers.splice(indexOfNumberToBeDeleted, 1);
setRandomNumbers(newRandomNumbers);
//Slice (not preferred - code complexity)
let indexOfNumberToBeDeleted = randomNumbers.indexOf(numberToBeDeleted);
let deletedNumber = randomNumbers.slice(indexOfNumberToBeDeleted, indexOfNumberToBeDeleted+1);
let newRandomNumbers = [];
for(let number of randomNumbers) {
if(deletedNumber[0] !== number)
newRandomNumbers.push(number);
};
setRandomNumbers(newRandomNumbers);

Re-render array of objects after using array.splice() (Next.js) [duplicate]

The story is, I should be able to put Bob, Sally and Jack into a box. I can also remove either from the box. When removed, no slot is left.
people = ["Bob", "Sally", "Jack"]
I now need to remove, say, "Bob". The new array would be:
["Sally", "Jack"]
Here is my react component:
...
getInitialState: function() {
return{
people: [],
}
},
selectPeople(e){
this.setState({people: this.state.people.concat([e.target.value])})
},
removePeople(e){
var array = this.state.people;
var index = array.indexOf(e.target.value); // Let's say it's Bob.
delete array[index];
},
...
Here I show you a minimal code as there is more to it (onClick etc). The key part is to delete, remove, destroy "Bob" from the array but removePeople() is not working when called. Any ideas? I was looking at this but I might be doing something wrong since I'm using React.
When using React, you should never mutate the state directly. If an object (or Array, which is an object too) is changed, you should create a new copy.
Others have suggested using Array.prototype.splice(), but that method mutates the Array, so it's better not to use splice() with React.
Easiest to use Array.prototype.filter() to create a new array:
removePeople(e) {
this.setState({people: this.state.people.filter(function(person) {
return person !== e.target.value
})});
}
To remove an element from an array, just do:
array.splice(index, 1);
In your case:
removePeople(e) {
var array = [...this.state.people]; // make a separate copy of the array
var index = array.indexOf(e.target.value)
if (index !== -1) {
array.splice(index, 1);
this.setState({people: array});
}
},
Here is a minor variation on Aleksandr Petrov's response using ES6
removePeople(e) {
let filteredArray = this.state.people.filter(item => item !== e.target.value)
this.setState({people: filteredArray});
}
Simple solution using slice without mutating the state
const [items, setItems] = useState(data);
const removeItem = (index) => {
setItems([
...items.slice(0, index),
...items.slice(index + 1)
]);
}
Use .splice to remove item from array. Using delete, indexes of the array will not be altered but the value of specific index will be undefined
The splice() method changes the content of an array by removing existing elements and/or adding new elements.
Syntax: array.splice(start, deleteCount[, item1[, item2[, ...]]])
var people = ["Bob", "Sally", "Jack"]
var toRemove = 'Bob';
var index = people.indexOf(toRemove);
if (index > -1) { //Make sure item is present in the array, without if condition, -n indexes will be considered from the end of the array.
people.splice(index, 1);
}
console.log(people);
Edit:
As pointed out by justin-grant, As a rule of thumb, Never mutate this.state directly, as calling setState() afterward may replace the mutation you made. Treat this.state as if it were immutable.
The alternative is, create copies of the objects in this.state and manipulate the copies, assigning them back using setState(). Array#map, Array#filter etc. could be used.
this.setState({people: this.state.people.filter(item => item !== e.target.value);});
Easy Way To Delete Item From state array in react:
when any data delete from database and update list without API calling that time you pass deleted id to this function and this function remove deleted recored from list
export default class PostList extends Component {
this.state = {
postList: [
{
id: 1,
name: 'All Items',
}, {
id: 2,
name: 'In Stock Items',
}
],
}
remove_post_on_list = (deletePostId) => {
this.setState({
postList: this.state.postList.filter(item => item.post_id != deletePostId)
})
}
}
filter method is the best way to modify the array without touching the state.
It returns a new array based on the condition.
In your case filter check the condition person.id !== id and create a new array excluding the item based on condition.
const [people, setPeople] = useState(data);
const handleRemove = (id) => {
const newPeople = people.filter((person) => person.id !== id);
setPeople( newPeople);
};
<button onClick={() => handleRemove(id)}>Remove</button>
Not advisable:
But you can also use an item index for the condition if you don't have any id.
index !== itemIndex
This is your current state variable:
const [animals, setAnimals] = useState(["dogs", "cats", ...])
Call this function and pass the item you would like to remove.
removeItem("dogs")
const removeItem = (item) => {
setAnimals((prevState) =>
prevState.filter((prevItem) => prevItem !== item)
);
};
your state variable now becomes:
["cats", ...]
Another way of doing it is by using useState hook. Check docs: https://reactjs.org/docs/hooks-reference.html#functional-updates It states: Unlike the setState method found in class components, useState does not automatically merge update objects. You can replicate this behavior by combining the function updater form with object spread syntax as shown below or use useReducer hook.
const [state, setState] = useState({});
setState(prevState => {
return {...prevState, ...updatedValues};
});
Some answers mentioned using 'splice', which did as Chance Smith said mutated the array. I would suggest you to use the Method call 'slice'
(Document for 'slice' is here) which make a copy of the original array.
Just filter out deleted item and update the state with remaining items again,
let remainingItems = allItems.filter((item) => {return item.id !== item_id});
setItems(remainingItems);
const [people, setPeople] = useState(data);
const handleRemove = (id) => {
const newPeople = people.filter((person) => { person.id !== id;
setPeople( newPeople );
});
};
<button onClick={() => handleRemove(id)}>Remove</button>
It's Very Simple
First You Define a value
state = {
checked_Array: []
}
Now,
fun(index) {
var checked = this.state.checked_Array;
var values = checked.indexOf(index)
checked.splice(values, 1);
this.setState({checked_Array: checked});
console.log(this.state.checked_Array)
}
removePeople(e){
var array = this.state.people;
var index = array.indexOf(e.target.value); // Let's say it's Bob.
array.splice(index,1);
}
Redfer doc for more info
Almost all the answers here seem to be for class components, here's a code that worked for me in a functional component.
const [arr,setArr]=useState([]);
const removeElement=(id)=>{
var index = arr.indexOf(id)
if(index!==-1){
setArr(oldArray=>oldArray.splice(index, 1));
}
}
If you use:
const[myArr, setMyArr] = useState([]);
for add:
setMyArr([...myArr, value]);
and for remove:
let index = myArr.indexOf(value);
if(index !== -1)
setPatch([...myArr.slice(0, index), ...myArr.slice(index, myArr.length-1)]);
Removing an element with a certain value
//
Note filter function always returns a new array.
const people = ["Bob", "Sally", "Jack"]
const removeEntry = (remove) => {
const upDatePeople = people.filter((Person) =>{
return Person !== remove
});
console.log(upDatePeople)
//Output: [ 'Sally', 'Jack' ]
}
removeEntry("Bob");
You forgot to use setState. Example:
removePeople(e){
var array = this.state.people;
var index = array.indexOf(e.target.value); // Let's say it's Bob.
delete array[index];
this.setState({
people: array
})
},
But it's better to use filter because it does not mutate array.
Example:
removePeople(e){
var array = this.state.people.filter(function(item) {
return item !== e.target.value
});
this.setState({
people: array
})
},
const [randomNumbers, setRandomNumbers] = useState([111,432,321]);
const numberToBeDeleted = 432;
// Filter (preferred)
let newRandomNumbers = randomNumbers.filter(number => number !== numberToBeDeleted)
setRandomNumbers(newRandomNumbers);
//Splice (alternative)
let indexOfNumberToBeDeleted = randomNumbers.indexOf(numberToBeDeleted);
let newRandomNumbers = Array.from(randomNumbers);
newRandomNumbers.splice(indexOfNumberToBeDeleted, 1);
setRandomNumbers(newRandomNumbers);
//Slice (not preferred - code complexity)
let indexOfNumberToBeDeleted = randomNumbers.indexOf(numberToBeDeleted);
let deletedNumber = randomNumbers.slice(indexOfNumberToBeDeleted, indexOfNumberToBeDeleted+1);
let newRandomNumbers = [];
for(let number of randomNumbers) {
if(deletedNumber[0] !== number)
newRandomNumbers.push(number);
};
setRandomNumbers(newRandomNumbers);

Javascript version of list.pop

I am trying to create a javascript version of python's pop function.
Here is what I have so far:
function pop(arr, idx) {
arr = arr.splice(0, idx).concat(arr.splice(idx + 1));
console.log(arr);
}
I am not sure of why it is only returning the first part and not combining with the second.
are you looking for something like this? maybe you can modify it so that the pop function returns the removed element.
const arr1 = [10,20,30,40,50,60];
const arr2 = [10,20,30,40,50,60];
const arr3 = [10,20,30,40,50,60];
function pop(arr, idx) {
removedEl = arr.splice(idx,1)[0];
console.log('removed element: ',removedEl)
console.log('final array: ',arr);
}
pop(arr1,0);
pop(arr2,2);
pop(arr3,5)
Array.splice() modifies the array. It doesn't create a new array. All you need is this:
const pythonPop = ( arr , i = -1 ) => arr.splice(i,1)[0];

How do construct ForEach into map in javascript

I have sample JSON in form of
var sample=[{"id":200,"children":[{"value":300,"type":"SINGLE"},{"value":400,"type":"CLASSIC"},{"value":600,"type":"DUAL"}]},{"id":300,"children":[{"value":500,"type":"TRIO"},{"value":600,"type":"MUSICAL"},{"value":700,"type":"UMBRELA"}]}]
var result = [];
sample.forEach(function(e){
let obj = {}
obj.id=e.id
obj['somekey']=e.children[0].value
obj['someanotherkey']=e.children[1].type
result.push(obj);
})
console.log(result)
How do i can achieve same using map es-6
var sample=[{"id":200,"children":[{"value":300,"type":"SINGLE"},{"value":400,"type":"CLASSIC"},{"value":600,"type":"DUAL"}]},{"id":300,"children":[{"value":500,"type":"TRIO"},{"value":600,"type":"MUSICAL"},{"value":700,"type":"UMBRELA"}]}]
var output = sample.map(({ id, children }) => ({ id, ...children[0] }));
console.log(output);
.map() returns an array, so you must set up a variable to hold that result. Then, within the loop, you use return to effectively push items into the array.
var sample=[{"id":200,"children":[{"value":300,"type":"SINGLE"},{"value":400,"type":"CLASSIC"},{"value":600,"type":"DUAL"}]},{"id":300,"children":[{"value":500,"type":"TRIO"},{"value":600,"type":"MUSICAL"},{"value":700,"type":"UMBRELA"}]}];
let result = sample.map(function(e){
let obj = {}
obj.id=e.id;
obj['value']=e.children[0].value;
obj['type']=e.children[0].type
return obj;
});
console.log(result);
If you want to be able to chose the children index:
const getDataChild = (a, i) => a.map(({id, children:ch}) => ({id, ...ch[i]}));
console.log(getDataChild(sample, 0)); // where 0 is the desired index

Convert for loop to forEach

I am creating a card game. I am trying to loop two arrays. I am able to do it with a for loop, but I want to use forEach(). I am not getting the right results. Below is the for loop that works, and then the forEach() way I've tried:
const suits = ['Heart','Diamond','Spade','Club']
const values=['2','3','4','5','6','7','8','9','K','Q','J','A']
const deck = []
for(i = 0; i<values.length; i++){
for(x =0; x < suits.length; x++){
const card = {value: values[i], suits: suits[x]}
deck.push(card)
}
}
values.forEach((value,x) => {
suits.forEach((suit,i) => {
const card = {value: value[x], suits: suit[i]}
deck.push(card)
})
})
With your forEach you need not use index to access the value, you simply get the value from the argument for callback. However if you are using index, you need to access values[x], suits[i] instead of value[x], suit[i].
const suits = ['Heart','Diamond','Spade','Club']
const values=['2','3','4','5','6','7','8','9','K','Q','J','A']
const deck = [];
values.forEach((value,x) => {
suits.forEach((suit,i) => {
const card = {value: value, suits: suit}
deck.push(card)
})
})
console.log(deck)
Perhaps nicer than either a for loop or a forEach one is to use a technique designed to change one array into another, index by index, such as map or flatMap.
Here, creating the deck might be a one-liner:
const suits = ['Heart','Diamond','Spade','Club']
const vals = ['2','3','4','5','6','7','8','9','K','Q','J','A']
const deck = vals .flatMap (value => suits .map (suit => ({value, suit}) ))
console .log (
deck
)
Also note that there is a fairly strong tradition, at least in the U.S., of ordering the suits from low to high as "clubs, diamonds, hearts, spades". In English this is easy to remember as they are sorted alphabetically.
You don't need i or x as value, suit have the values of each array
const suits = ['Heart','Diamond','Spade','Club']
const values=['2','3','4','5','6','7','8','9','K','Q','J','A']
const deck = []
values.forEach((value) => {
suits.forEach((suit) => {
const card = {value: value, suits: suit}
deck.push(card)
document.getElementById("content").innerHTML += JSON.stringify(card) + "<br />"
})
})
<span id="content"></span>
In each iteration your arguments of forEach callbacks are ready to use in card object.
values.forEach(value => {
suits.forEach(suit => {
const card = { value, suits }
deck.push(card)
})
})

Categories