I'm currently making a small app to practice JavaScript and jQuery.
I have an array of fruits.
var fruits = [apples, bananas, grapes, watermelons, tomatoes];
And on a click event I want to remove tomatoes but if I change my mind clicking the same button, it will add tomatoes back to the array fruits. I've been using splice to remove but I don't know what to use to add the splice element back into the array.
Edit for clarification:
The element is not necessary going to be tomatoes, but it could be any random element in the fruits array. I'm using
fruits.splice(i,1);
To insert a value back into an array (at the same position) after you spliced it, can in general be done like this:
// delete:
var deleted = fruits.splice(i, 1);
// restore:
fruits.splice(i, 0, deleted);
Note that deleted is an array with one element here.
It can also done by taking a kind of backup of the original array:
// backup
var backup = fruits.slice(); // copy
// delete:
fruits.splice(i, 1);
// restore:
fruits = backup;
Undo Stack
To support multiple undo actions, you could use an undo stack, which would just keep track of all the versions of your array. When the user performs an undo-action, the previous version is popped from that stack. This way you can undo more than one removal:
var fruits = ['Apples', 'Bananas', 'Grapes', 'Watermelons', 'Tomatoes'];
var undoStack = [];
function showFruits() {
$('#fruits').html('').append(
// translate the array to a list of LI elements with delete buttons
fruits.map(function(fruit) {
return $('<li>').text(fruit).append(
$('<button>').addClass('delete').text('Delete'));
})
);
}
$(document).on('click', 'button.delete', function () {
undoStack.push(fruits.slice()); // save a copy of the current array on the stack
fruits.splice($(this).parent().index(), 1); // remove from array at index
showFruits(); // update display
});
$('#undo').click(function () {
if (!undoStack.length) return; // cannot undo
fruits = undoStack.pop(); // get previous state
showFruits(); // update display
});
showFruits(); // show initial list
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="fruits"></ul>
<button id="undo">Undo</button>
More memory efficient alternative
If you are troubled by the memory usage of storing the complete array each time you delete an element, you could use the following alternative functions, which will only store the index and deleted value at every delete action:
$(document).on('click', 'button.delete', function () {
var i = $(this).parent().index(); // get index where to delete
var deleted = fruits.splice(i, 1); // remove from array at that index
undoStack.push([i, deleted]); // save the index and value on the stack
showFruits(); // update display
});
$('#undo').click(function () {
if (!undoStack.length) return; // cannot undo
var restore = undoStack.pop(); // get information for re-inserting
fruits.splice(restore[0], 0, restore[1]); // insert the value
showFruits(); // update display
});
If you would use the undo principle also for other modifications, like undoing an insert, or a modification of the label, then the first solution would not need much modification, while the more memory-efficient one would need a bit more.
For a more generic and elaborated solution on undo/redo operations on any object (not only arrays), see How to version control an object?
If the array position does not matter:
fruits.push(tomatoes);
If you want to insert it at a specific position (index) in the array:
fruits.splice(index, 0, tomatoes);
will insert tomatoes into fruits at the specified index (deleting 0 items first, so it's just an insert).
Array.prototype.splice()
The splice() method changes the content of an array by removing existing elements and/or adding new elements.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
Temp-storing deleted elements and re-adding them
var deletedFruits = fruits.splice(i,1); will contain an array of the removed element(s) because that is the return value of splice(). So
fruits = fruits.concat(deletedFruits);
will re-add the deleted fruits.
Re-adding deleted elements at their original position
Store the position of the deleted element:
var deletedFruit = { fruit: fruits.splice(i,1)[0], index: i }
If need be you can restore deleted fruits at their original array position using the aforementioned
fruits.splice(deletedFruit.index, 0, deletedFruit.fruit);
You can add and remove fruits with these two functions:
function addFruit(fruit) {
fruits.push(fruit);
}
function removeFruit(fruit) {
// indexOf method returns index of fruit in the list, or -1 if fruit is not found.
var index = fruits.indexOf(fruit);
if (index > -1) {
fruits.splice(index, 1);
}
}
This assumes you have already defined an array named fruits. Then you can do something like
<script>
function updateOutput() {
document.getElementById('output').innerHTML = fruits.join(', ');
}
function addSelectedFruit() {
var selectedFruit = document.getElementById('fruit-select').value;
addFruit(selectedFruit);
updateOutput();
}
function removeSelectedFruit() {
var selectedFruit = document.getElementById('fruit-select').value;
removeFruit(selectedFruit);
updateOutput();
}
</script>
<input type="text" id="fruit-select"/>
<button onclick="addSelectedFruit();">Add</button>
<button onclick="removeSelectedFruit();">Remove</button>
List of fruits:
<p id="output"></p>
Example:
<script>
var fruits = ['Apples', 'Pears', 'Pineapples'];
function addFruit(fruit) {
fruits.push(fruit);
}
function removeFruit(fruit) {
var i = fruits.indexOf(fruit);
if (i > -1) {fruits.splice(i, 1);}else{alert(fruit + ' cannot be removed, as it is not present in the array of fruits.');}
}
function selectedFruit() {
return document.getElementById('fruit-select').value;
}
function updateOutput() {
document.getElementById('output').innerHTML = fruits.join(', ');
}
</script>
Fruit:
<input type="text" id="fruit-select" value="Orange"/>
<button onclick="addFruit(selectedFruit());updateOutput();">Add</button>
<button onclick="removeFruit(selectedFruit());updateOutput();">Remove</button>
<p id="output">Apples, Pears, Pineapples</p>
Related
function removeLocalStorageHelper(item, pizzaId) {
console.log(item.productID);
console.log(pizzaId);
if (item.productID == pizzaId) {
console.log("Working fine");
localStorage.removeItem(item);
console.log(localStorage);
}
}
function removeFromLocalStorage(pizzaId) {
var locStore = JSON.parse(localStorage.getItem("selectedProduct"));
var cartRowContents = locStore.map((item) =>
removeLocalStorageHelper(item, pizzaId)
);
}
Whenever the user clicks on "Remove" button, removeFromLocalStorage() function is called which receives a number type variable pizzaId. Now, this pizzaId is stored in the localStorage and I want to remove the object associated with this pizzaId from my localStorage.
CONSOLE OUTPUT
Please help me to remove an object from localStorage using productID.
You can't directly remove an item from the stored array. For that you need to remove the intended element from array and insert again to localStorage like below. Otherwise it'll remove complete list from localStorage.
Note: You need to do the same wile adding new item to the localStorage.
function removeFromLocalStorage(pizzaId) {
var locStore = JSON.parse(localStorage.getItem("selectedProduct"));
var cartRowContents = locStore.filter((item) => item.productID !== pizzaId);
localStorage.setItem("selectedProduct", JSON.stringify(cartRowContents))
}
As I reivew your code, I see that you are retrieving the item from localStorage like this localStorage.getItem("selectedProduct") The question here is do you want to remove the entire locStore or just a part of it. Maybe locStore is a complex collection (array) from multiple products and not a single entity as this code hints
var cartRowContents = locStore.map((item) =>
removeLocalStorageHelper(item, pizzaId));
If this is the case you need to do something like this
var locStore = locStore.filter(function(item, index){
return item.productID != pizzaId;
});
Now you have a locStore collection without the item you want to remove and you have to save it back to localStorage like this
localStorage.setItem('selectedProduct', JSON.stringify(locStore));
Essentially you are overriding the old selectedProduct value in localStorage with a new one that does not contain the removed product.
If for some reason locStore is just a simple JSON object that you want to remove you can do this to delete it from localStorage
localStorage.removeItem('selectedProduct')
Well, if you just need to remove the selectedProduct, you can do it like this:
localStorage.removeItem("selectedProduct");
SAPUI5 - I have an array of objects and one of the properties in those is 'Category'.
For example say I have 2 different types of Category, 'Front Shop' and 'Production Area', what I need to do is to be able to get the first value of each and the last value of each, and then set the enabled property of a button as enabled/disabled.
I'm currently using undercore js (_.each) to loop through to perform some other logic, so can include additional logic here.
Not sure if Underscore has a built in function for this?
Or could someone point me in the right direction on how to do this?
I've got my first pass at what was wanted where I get the very first result and the last result, but now need to set this for each unique category.
Example code below:
// Set view data
oViewData.Questions = oQuestions.results;
oViewData.Questions.TotalNumberOfQuestions = oQuestions.results.length;
// Loop Questions, to get Category Desc and Competency Desc values from relevant Sets
_.each(oViewData.Questions, function (result, index) {
// Read and set Category Desc
this.getView().getModel("Survey").read("/CategorySet", {
filters: [new Filter("CategoryId", FilterOperator.EQ, result.CategoryId)],
success: function (oData) {
oViewData.Questions[index]._CategoryDesc = oData.results[0].CategoryDesc;
this.setViewData(oViewData);
}.bind(this),
error: function (oError) {}.bind(this)
});
// Read and set Competency Desc
this.getView().getModel("Survey").read("/CompetencySet", {
filters: [new Filter("CompetencyId", FilterOperator.EQ, result.CompetencyId)],
success: function (oData) {
oViewData.Questions[index]._CompetencyDesc = oData.results[0].CompetencyDesc;
this.setViewData(oViewData);
}.bind(this),
error: function (oError) {}.bind(this)
});
// Set all move up / down buttons to enabled
oViewData.Questions[index]._MoveUpBtn = true;
oViewData.Questions[index]._MoveDownBtn = true;
// if category id is the first one in the list
}.bind(this));
// Overwrite first move up button and last move down btn to disabled
oViewData.Questions[0]._MoveUpBtn = false;
oViewData.Questions.slice(-1)[0]._MoveDownBtn = false;
// Set view data
this.setViewData(oViewData);
First, you can iterate through arrays with native JavaScript.
_.each(array, function(item) {}) is the same as array.forEach(function(item) {}).
Second, you can use the built-in filter function for your actual question:
const aFrontShopItems = oViewData.Questions.filter(function(oItem) {
return oItem.Category === "Front Shop";
}
If oViewData.Questions is an array then the function passed to filter is applied to every element. If the condition (e.g. oItem.Category === "Front Shop") is true then the element is added to the new array aFrontShopItems. Obviously you need to call filter a second time to get the Production Area items. You can then apply your logic to the first and last items of your new arrays.
I have an ng-repeat with a select in every item.
The user can select a value (trigging a function that pushes the an object into an array), but they can also change their mind, in which case the code just pushes a second object with the new value, duplicating the first one.
How could I manage to actually delete existing values, leaving only the last one on every ng-change?
Here's my HTML:
<select ng-change="insertproduct(pa.nom, basket)" ng-model="basket">
<option ng-repeat="select in numberofproducts">{{select}}</option>
</select>
And my javascript:
$scope.numberofproducts = [1,2,3,4,5,6,7,8,9,10]
$scope.singleorder = [];
$scope.insertproduct = function(nom, basket){
$scope.numero = {
'producte': nom,
'numero': basket
};
$scope.singleorder.push($scope.numero);
console.log($scope.singleorder);
}
The idea is to create a condition in which if the array contains an object with the parameter ´producte´ equal to the new one, delete the existing and push the new one.
Any tips?
First, use the findIndex method to check if an object with the same property is already in the singleorder array.
function duplicateOrder(order) {
return order.producte === nom;
}
var index = $scope.singleorder.findIndex(duplicateOrder);
Note: browser support for findIndex is limited; it is not supported in Internet Explorer.
Then remove the item with splice:
if(index > -1){
$scope.singleorder.splice(index, 1);
}
You can then push the new one in.
You should also clean up your coding style: don't mix french and english, and use either camelCase or snake_case for your functions to improve readability.
Observation :
Use AngularJS ngOptions attribute instead of ng-repeat.
You can check the index of the element in an array if that was already there you can easily remove previous one.
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope) {
$scope.numberofproducts = [1,2,3,4,5,6,7,8,9,10]
$scope.newArray = [];
$scope.insertproduct = function(basket) {
var prevIndex = $scope.newArray.indexOf(basket);
if(prevIndex > -1) {
$scope.newArray.splice(prevIndex, 1);
} else {
$scope.newArray.push(basket);
}
console.log($scope.newArray);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<select ng-change="insertproduct(basket)" ng-model="basket" ng-options="select for select in numberofproducts">
</select>
</div>
I know how to save the position of the list elements to a database or localstorage or something similar. But how can I reorder the list with JavaScript from the positions which are saved in my array?
I had a look and StackOverflow and found the following code, but it doesn't work (it just empties my list):
// Get your list items
var items = $('#sortable').find('li');
// The new index order for each item
var order = store.get('sortableIDsOrder');
// Map the existing items to their new positions
var orderedItems = $.map(order, function(value) {
return items.get(value);
});
// Clear the old list items and insert the newly ordered ones
$('#sortable').empty().html(orderedItems);
My array looks like:
[portrait-sms,portrait-pc,portrait-mail,portrait-calendar,portrait-facebook,portrait-twitter,portrait-whatsapp,portrait-skype,portrait-viber,portrait-instagram]
And my HTML looks like:
<li id="portrait-sms"><a href="sms:">...</li>
<li id="portrait-mail"><a href="mailto:">...</li>
<li id="portrait-pc"><a href="#">...</li>
...
The simplest solution I can think of, given only the array (that I assume you've retrieved from somewhere), is:
// assuming this is the array you've recovered from whereever:
var storedArray = ['portrait-sms',
'portrait-pc',
'portrait-mail',
'portrait-calendar',
'portrait-facebook',
'portrait-twitter',
'portrait-whatsapp',
'portrait-skype',
'portrait-viber',
'portrait-instagram'];
function reorder(orderedArray) {
// caching variables:
var el, pre, p;2
// iterating over the elements of the array, using Array.prototype.forEach:
orderedArray.forEach(function (a, b, c) {
// a: the current element in the array,
// b: the index of the current element in the array,
// c: the array itself
if (b > 0) {
// caching the element with the id of the element in the array:
el = document.getElementById(a);
// finding the parentNode of that element:
p = el.parentNode;
// getting the previous element:
pre = document.getElementById(c[b - 1]);
// inserting the element with the id of the current element
// before the nextSibling of the element with the id of the
// previous element in the array:
p.insertBefore(el, pre.nextSibling);
}
});
}
reorder(storedArray);
JS Fiddle demo.
References:
Array.prototype.forEach().
Node.insertBefore().
Node.parentNode.
If you know the elements you have in the database array before hand and they have static values, you can create a new JavaScript array variable by iterating over database array and by forming a new JS array which you use while loading the UI.
On the other hand, if your requirement is to just sort the array during UI loading time instead of showing elements in a fixed order(as retrieved from database), you can use JQuery Table Plugins like DataTable.
Updating $scope values affects it's previous usage points.
After addPhrase call I use sayPhrase to update $scope
function PhrasesCtrl($scope) {
$scope.trail = [0];
$scope.addPhrase = function() {
$scope.phrases.push({
trail: $scope.trail
});
}
$scope.sayPhrase = function(id) {
// id = 1
$scope.trail.push(id);
}
}
Newly created Phrase have it's trail equal to [0], after sayPhrase call it becomes [0, 1]
After $scope.trail.push(id); my new element updates it's trail value.
How to keep used trail value away from changes?
This is because JS objects (and arrays) are passed by reference only. When you push the trail into phrases, you are pushing the reference to the same array that is referenced by $scope.trail.
The easiest solution is to break the reference on $scope.trail, by creating a new array:
$scope.addPhrase = function() {
$scope.phrases.push({
trail: $scope.trail
});
$scope.trail = [0]; // I assume the `0` is on purpose
}
Now $scope.trail will start over every time addPhrase() is called.
Alternatively, if you need to keep the current contents of trail, you should copy the array into a new one. Angular conveniently provides a method just for this:
$scope.addPhrase = function() {
$scope.phrases.push({
trail: angular.copy($scope.trail)
});
}