I want to target one of this object however the function returns me both objects, how can I target only one specific object inside the array, to be deleted.
// This is the object stored in the local storage:
const data = [{
title: 'one',
text: 'one',
date: '2022-08-10'
},
{
title: 'two',
text: 'two',
date: '2022-08-10'
}
]
const deleteNote = (event) => {
let data = Array.from(JSON.parse(localStorage.getItem("notes")));
data = data.filter(function(item) {
return item !== event;
});
console.log(data);
};CodePudding user response：
To delete an object, you need to specify some unique property of that object (usually id) or an index.
const data = [{
title: 'one',
text: 'one',
date: '2022-08-10'
},
{
title: 'two',
text: 'two',
date: '2022-08-10'
}]
const deleteNote = (data, noteTitle) => {
let filterNotes = data.filter(function(item) {
return item.title !== noteTitle;
});
return filterNotes
};
let notes = deleteNote(data, 'one')
console.log(notes)CodePudding user response：
So as long as your events come from elements with values, you simply need to compare the event.target.value and the data.title to remove an item.
const data = [{
title: 'one',
text: 'one',
date: '2022-08-10'
},
{
title: 'two',
text: 'two',
date: '2022-08-10'
}];
localStorage.setItem('notes', JSON.stringify(data));
const deleteNote = (event) => {
let data = Array.from(JSON.parse(localStorage.getItem("notes")));
console.log("BEFORE:", data);
data = data.filter(function(item) {
return item.title !== event.target.value;
// HERE -----^ HERE -----^
});
console.log("AFTER:", data);
};
// e.g. <button id="one" value="one">click</button>
document.getElementById("one").addEventListener("click", deleteNote);
NOTE: This will NOT remove it from local storage, you'll have to write the data JSON value back again in your action for the deletion to be remembered.
CodePudding user response：
I'm assuming your deleteData is an event handler. In that case, event is of Event type. Assuming that the object this handler is attached to contains the data you want to delete in some way, you could do something like:
const deleteNote = (event) => {
const data = Array.from(JSON.parse(localStorage.getItem("notes")));
// Return the note you want to delete
const itemToDelete = data.filter(function(item) {
// ideally, I'd store the note (as a JSON string) in data attribute, so this is what I'd do. Otherwise use JSON.parse(event.target.value). JSON strings stored in data attributes should be automatically converted to a JS object when retrieved.
return item === event.target.dataset.note;
});
// filter returns an empty array if nothing meets the conditions.
if (itemToDelete.length) {
// Deletes the note from data.
data.splice(data.indexOf(itemToDelete[0]), 1);
}
// Update localStorage to new data.
localStorage.setItem("notes", JSON.stringify(data));
};
event refers to the Event that occurred (it contains properties like target, type, timeStamp, and others, but target is what we need). event.target refers to the object (DOM Element) that the event occurred on.
In order to filter the correct data, you will need to attach the note in some way that the handler is attached to. Assuming (based on provided code) that you have a delete button/anchor per note, the note should be referenced on the anchor/button in a data attribute. For example:
<a href="/crud/delete/route" data-note="{\"title\":\"one\",\"text\":\"one\",\"date\":\"2022-08-10\"}">delete</a>
(proper JSON string can only use double-quotes, hence the escapes...could enclose JSON string in single-quotes but I prefer to keep formatting consistent).
You wouldn't obviously want to type the note manually, I only did this to provide an example. I'd supply the data nodes programmatically on the JS end using DOM manipulation. If this is React or a templating language then it is even easier.
In either case, in your filter, you need to be more specific, since event will not be equal to a note as mentioned above, whether you use a data attribute or set a value to equal the item.title or something, as other answers suggest.
CodePudding user response：
Here's a full example based on what little we know of your code.
It produces a table from the notes data along with some delete buttons. Clicking on a delete button will remove the row, and filter that row from the notes data. Note: to facilitate this I've added an id property to the data.
The save button can then push that updated array back to local storage.
// Get your notes data from local storage
// let notes = JSON.parse(localStorage.getItem('notes'));
let notes = [
{ id: 1, title: 'one', text: 'one', date: '2022-08-10' },
{ id: 2, title: 'two', text: 'two', date: '2022-08-10' },
{ id: 3, title: 'three', text: 'three', date: '2022-08-10' },
{ id: 4, title: 'four', text: 'four', date: '2022-08-10' }
];
// Creates a delete button
function buildDelete(id) {
return `<td><button data-id="${id}">Delete</button></td>`;
}
// Creates a row using the values from the object
function buildRow(obj) {
const row = [];
row.push('<tr>');
for (const prop in obj) {
row.push(`<td>${obj[prop]}</td>`);
}
row.push(buildDelete(obj.id));
row.push('</tr>');
return row.join('');
}
// Filter out the row with the corresponding id
function deleteNote(id) {
return notes.filter(item => {
return item.id !== id;
});
}
// When a child element of the table is clicked
// we check first to see if it's a delete button
// grab the id, update `notes`, and then remove the
// row from the table
function handleClick(e) {
if (e.target.matches('.delete')) {
const { id } = e.target.dataset;
notes = deleteNote(id);
e.target.closest('tr').remove();
}
}
// Saves the data back to local storage
function saveNotes() {
console.log(JSON.stringify(notes));
// localStorage.setItem(JSON.stringify(notes));
}
// Creates a table from the notes data
const html = `
<table>
${notes.map(buildRow).join('')}
</table>
<button >Save</button>
`;
// Attaches the table HTML to the document body
document.body.innerHTML = html;
// Cache the table element, and add an event listener to it
const table = document.querySelector('table');
table.addEventListener('click', handleClick);
// Cache the save element, and add an event listener to it
const save = document.querySelector('.save');
save.addEventListener('click', saveNotes);table { border-collapse: collapse; }
td { padding: 0.3em; border: 1px solid #dfdfdf; }
.delete:hover { cursor: pointer; }
.save { margin-top: 1em; }Additional documentation