We Keep Coding

Removing local storage item with vanilla javascript

I'm working on a simple to-do list with vanilla js. I've managed to add the input to local storage, but have not been able to add the style changes(check strike through) to local storage, nor can I figure out how to remove one item at a time from storage. I have been able to clear all, just unable to remove each item separately. Below is my code, any advice is greatly appreciated.
//local storage setup
let saved = window.localStorage.getItem(input.value);
if (saved) {
list.innerHTML = saved;
}
//handle input submit
function handleSubmitForm(e) {
e.preventDefault();
let input = document.querySelector('input');
if (input.value != '') {
addTodo(input.value);
}
input.value = '';
window.localStorage.setItem(input.value, list.innerHTML);
}
//check off todo
function checkTodo(e) {
let item = e.target.parentNode;
if (item.style.textDecoration == 'line-through') {
item.style.textDecoration = 'none';
} else {
item.style.textDecoration = 'line-through';
}
window.localStorage.setItem(item);
}
//delete todo
function deleteTodo(e) {
let item = e.target.parentNode;
item.addEventListener('transitionend', function () {
item.remove();
});
item.classList.add('todo-list-item-fall');
window.localStorage.removeItem(item);
}

JavaScript Storage is a key-value pair. Just use a string-based key so you can remove, edit or read it easily.
// Set todo item
localStorage.setItem("todo1", "Stand-up meeting 9.15am");
// Read todo item
localStorage.getItem("todo1");
// Delete todo item
localStorage.removeItem("todo1");
It's better if you can save it as a JSON string because you can mark it as completed without delete, so you can find completed tasks too.
// Saving todo item as a JSON string
localStorage.setItem("todo1", JSON.stringify({ text: "Stand-up meeting 9.15am", completed: false }));
// Read it
const todo = JSON.parse(localStorage.getItem("todo1"));
// You can read the text
console.log(todo.text);
// Also you can mark it as completed and save it back
todo.completed = true;
localStorage.setItem("todo1", JSON.stringify(todo));

Storing object in localStorage is a tricky job.
Everything you store in the local or session storage is of type string
you can create an object like
item = {
value : ANY_VALUE
}
and save it in your localStorage using JSON.stringify
localStorage.setItem(`item`,JSON.stringify(item))
now when you want to update the item just update the object and again set using the ablove syntax
To access the saved item from the local storage use JSON.parse
yourItemObject = JSON.parse(localStorage.getItem())```
You can access values now using yourItemObject .value

It appears you're passing the whole HTML element (it passed as an object) inside the removeItem function. you need to pass the key instead.
try localStorage.removeItem(item.innerText);

If you are working with lists in localStorage. I would use something like this basic example:
function addTodo(key, item){
var list = getTodo(key);
list.push(item);
localStorage.setItem(key, JSON.stringify(list) );
}
function getTodo(key){
try{
var rawList = localStorage.getItem(key);
return JSON.parse(rawList) || [];
}
catch(e){
return [];
}
}
function removeTodo(key, id){
var list = getTodo(key);
var newlist = list.filter( function(item){
return item.id != id;
});
localStorage.setItem(key, JSON.stringify(newlist) )
}
function emptyTodo(key){
localStorage.removeItem(key);
}
addTodo('list', {
id: 1,
text: 'do shopping'
});
addTodo('list', {
id: 2,
text: 'study'
});
console.log( getTodo('list') );
removeTodo('list', 1);
console.log( getTodo('list') )
emptyTodo('list');

Table filter getting reset vue js

I have filters for each column in my table and the filter works fine when i type in for one column and when i filter another column in parallel, the results shows only for the second filter (means the first filter i typed is getting igonored). Always the latest filter works.
//computed
filteredList: function () {
var vm = this.vm;
var columnFilters = this.columnFilters;
var list = [...this.vm.entries];
var search, value;
var filteredIndexes = Object.keys(this.columnFilters);
if (filteredIndexes.length > 0) {
filteredIndexes.forEach(function (index) {
if (columnFilters[index] != '') {
list = vm.entries.filter(function (row) {
search = columnFilters[index].toLowerCase();
value = row.rowItems[index].itemDisplay.toLowerCase();
return value.includes(search);
});
}
});
}
return list;
},
Where i'm going wrong?

unable to get original array back after filter removed in angular?

i have an array in my component and based on the searchString i am filtering the array of items. and it is working fine.
if user removes the characters from the search field i want to show all the records again. but i am unable to show all records again when clearing the items from the search field.
please see below code.
this.filterServ.filterData.subscribe(searchData => {
if (Object.keys(searchData).length != 0) {
console.log('component', searchData);
this.cardData = this.cardData.filter((project) => {
let name = project.Name.toLowerCase();
if (name.includes(searchData.searchString.toLowerCase())) {
return true;
}
});
console.log('filterd data', this.cardData);
}
});

You already mutated the cardData. Therefore, you can't revert it back.
The solution is to create another property, for example you can name it displayData.
Then you can do like:
this.displayData = this.cardData.filter((project) => {
and instead of using cardData on the template, use displayData instead

Declare field filterData and bind this field in the template.
this.filterServ.filterData.subscribe(searchData => {
if (Object.keys(searchData).length != 0) {
console.log('component', searchData);
this.filterData= this.cardData.filter((project) => {
let name = project.Name.toLowerCase();
if (name.includes(searchData.searchString.toLowerCase())) {
return true;
}
});
console.log('filterd data', this.cardData);
}
});
Hope this help!

You should take copy of array data before filtering, and return the original array if input text is empty.
private originalData;
this.originalData = this.cardData.slice();
this.filterServ.filterData.subscribe(searchData => {
if (Object.keys(searchData).length != 0) {
console.log('component', searchData);
this.cardData = this.originalData.filter((project) => {
let name = project.Name.toLowerCase();
if (name.includes(searchData.searchString.toLowerCase()))
{
return true;
}
});
console.log('filterd data', this.cardData);
}
});

CRM Javascript Automatically Populated a Look-up Value with a specific field

I'm trying to write a javascript on CRM Phone Call page. We have a custom look-up field called new_department, and we want to automatically populate the field with value "IT" (there should be one) when the form is opened.
The thing is we have a separate Dev and Production CRM link therefore I cannot just assign a hard-coded GUID value into this field. So first I wrote a Rest Retrieve Multiple to get the correct department.
Then my problem is I'm not sure about the result returned from this Retrieve Multiple. How do I grab just the GUID from Rest? I'm seeing that this is a type of {Object}. Then lastly how do I go about setting the lookup value after retrieving the {Object}? Any help is greatly appreciated.
Here is my code.
function phonecall() {
var formType = Xrm.Page.ui.getFormType();
if (formType == 1) //create
{
//RetrieveMultiple function
var DepartmentId = getITDepartment();
//set the lookup value
var ID = DepartmentId.id;
var departmentValue = new Array();
departmentValue[0] = new Object();
departmentValue[0].id = DepartmentId;
departmentValue[0].name = 'IT';
userValue[0].entityType = "new_department";
Xrm.Page.getAttribute("new_department").setValue(departmentValue);
}
}
function getITDepartment()
{
XrmServiceToolkit.Rest.RetrieveMultiple("new_departmentSet", "$select=new_departmentId&$filter=new_name eq 'IT'",
function (results) {
if (results.length > 0)
resultList = results;
}, function (error) { alert(error); }, function onComplete() { }, false);
return resultList;
}
Thanks much.

I'm not familiar with XrmServiceToolkit but here how code could look like to work properly - I replaced only assigning part:
var DepartmentId = getITDepartment();
if (DepartmentId != null && DepartmentId.length > 0){
Xrm.Page.getAttribute("new_department").setValue([{
id: DepartmentId[0].new_departmentId,
name: "IT",
entityType: "new_department"
}]);
}

You are setting the lookup value correctly, you just need to get the Id correctly. The results variable is an array of new_department records, so try something like this:
var resultId = null;
XrmServiceToolkit.Rest.RetrieveMultiple("new_departmentSet", "$select=new_departmentId&$filter=new_name eq 'IT'",
function (results) {
if (results.length > 0)
resultId = results[0].new_departmentId; //gets the first record's Id
}, function (error) { alert(error); }, function onComplete() { }, false);
return resultId;

MVC4 Devexpress Sorting, Grouping and Filtering not working

I am working on devexpress and having some problems. Here is my code:
settings.Columns.Add(column =>
{
column.Caption = "Code";
column.Settings.AllowGroup = DefaultBoolean.True;
column.SetDataItemTemplateContent(c =>
{
ViewContext.Writer.Write(DataBinder.Eval(c.DataItem, "Code"));
});
column.SetEditItemTemplateContent(c =>
{
if (DataBinder.Eval(c.DataItem, "Code") != null)
{
ViewContext.Writer.Write(DataBinder.Eval(c.DataItem, "Code"));
}
else
{
Html.DevExpress().TextBox(textBox =>
{
textBox.Width = Unit.Percentage(100);
textBox.Name = "Code";
}).Render();
}
});
});
im adding a column like this and it is showing right values, bu sorting or grouping or filtering is not working. How can i make those functions work?
Please Help!!

You are missing the FieldName of the column, which is the name of the column or property in the DataSource to which the Grid is bound:
column.FieldName = "Code";
That allows the control to know which field will filter and sort. Also, you may need to allow sorting and filtering:
column.Settings.AllowSort = DefaultBoolean.True; // I think this is the default
column.Settings.AllowHeaderFilter = DefaultBoolean.True;
If you need to define other filtering options, you can also set the HeaderFilterFillItems method at the grid settings, and modify the Values collection at the event args parameter:
gridSettings.HeaderFilterFillItems = (sender, e) =>
{
if (e.Column.FieldName.Equals("Code")) {
e.Values.Clear();
e.AddValue("DisplayOption", "Value", "Query");
// ...
}
};
UPDATE: If your column has custom data, then it is unbound, and you can use the event CustomColumnUnboundData to define the value of the column, which will also be used to filter/sort the grid:
// Same column definition as yours
settings.Columns.Add(column =>
{
column.Caption = "Code";
column.Settings.AllowGroup = DefaultBoolean.True;
column.SetDataItemTemplateContent(c =>
{
ViewContext.Writer.Write(DataBinder.Eval(c.DataItem, "Code"));
});
column.SetEditItemTemplateContent(c =>
{
if (DataBinder.Eval(c.DataItem, "Code") != null)
{
ViewContext.Writer.Write(DataBinder.Eval(c.DataItem, "Code"));
}
else
{
Html.DevExpress().TextBox(textBox =>
{
textBox.Width = Unit.Percentage(100);
textBox.Name = "Code";
}).Render();
}
});
});
// CustomUnboundColumnData event handler
settings.CustomUnboundColumnData = (sender, e) => {
if(e.Column.Caption.Equals("Code")) {
// You can get the value of any existing field in the datasource, this way:
string code= (string)e.GetListSourceFieldValue("Code");
// Do some processs to get the custom value
// ...
// And set it to the Value propery of the event args parameter
e.Value = myCustomValue;
}
};
You can find an example of unboud data in this link: https://www.devexpress.com/Support/Center/Example/Details/E2824