I have a localStorage key (f7Contacts) stored as a JSON array, as it should be. I know how to delete the whole key using localStorage.removeItem("myKey");.
My array, as you can see is formed by a set of JSON arrays embeeded inside of it. There is the wider one named f7Contacts and inside of it there are some subarrays (to name them someway) named visitings and consultas. Now, what I'm trying to delete is not a single item from any of the JSON arrays nor the whole f7Contacts array but the JSON sub array named consultas.
I have tried so many ways but I could not get a working code.
This is what I've got until now:
My stringify array looks like this:
(now I have up dated the string to make it more alike my real case because the proposed answers manage to delete the consultas just in one of the contacts, and in a case it deletes the consultas from the first contact and deletes the rest of the contacts. I named ELISA and FRANK for you to differetiate them. Also updated my Javascript and html as a mixture from my own code and the one of ЖнецЪ's answer. I did this to keep my enviroment consistent. This code manage to delete the consultas of the first contact but also deletes the rest of the contacts.):
JAVASCRIPT
document.addEventListener("DOMContentLoaded", function() {
var contacts = [{
id: "95470e9e-ee5c-4467-9500-1fcbeae1b57c",
hasPic: true,
picId: 3,
createdOn: "2021-08-01T17:31:32.230Z",
firstName: "ELISA",
company: "La Fábrica",
job: "Barrendero",
mobile: "+53555555",
phone: "+5372222222",
sms: "",
email: "fulano@nauta.cu",
madedate: "Invalid date",
clinic: "2",
gender: "M",
birthday: "Invalid date",
age: "47",
visitings: [{
id: "1",
vdate: "19/07/-2006 12:00 AM",
pdcb: "Est officia dolorem ",
vdiagnose: "Laborum Ea consecte",
vrecom: "Mollit cillum sed pe",
nextv: "Invalid date"
}],
consultas: [{
id: "1",
ldate: "04/07/-1978 12:00 AM",
lmotive: "Soluta cumque aspern",
ldiagnose: "Quidem autem do ut o",
ttest: "Rerum sint atque il",
etest: "Officiis deserunt un",
mtest: "Nihil a dolore rem s",
nextv: "Invalid date"
},
{
id: "2",
ldate: "04/04/-1991 12:00 AM",
lmotive: "Eius in est enim no",
ldiagnose: "In aliqua Sunt dol",
ttest: "Sunt dolor eu sed N",
etest: "Quia aut reprehender",
mtest: "Unde libero autem an",
nextv: "Invalid date"
}
],
isFavorite: true
},
{id: "95470e9e-ee5c-4467-9500-1fcbeae1b57c",
hasPic: true,
picId: 3,
createdOn: "2021-08-01T17:31:32.230Z",
firstName: "FRANK",
company: "La Fábrica",
job: "Barrendero",
mobile: "+53555555",
phone: "+5372222222",
sms: "",
email: "fulano@nauta.cu",
madedate: "Invalid date",
clinic: "2",
gender: "M",
birthday: "Invalid date",
age: "47",
visitings: [{
id: "1",
vdate: "19/07/-2006 12:00 AM",
pdcb: "Est officia dolorem ",
vdiagnose: "Laborum Ea consecte",
vrecom: "Mollit cillum sed pe",
nextv: "Invalid date"
}],
consultas: [{
id: "1",
ldate: "04/07/-1978 12:00 AM",
lmotive: "Soluta cumque aspern",
ldiagnose: "Quidem autem do ut o",
ttest: "Rerum sint atque il",
etest: "Officiis deserunt un",
mtest: "Nihil a dolore rem s",
nextv: "Invalid date"
},
{
id: "2",
ldate: "04/04/-1991 12:00 AM",
lmotive: "Eius in est enim no",
ldiagnose: "In aliqua Sunt dol",
ttest: "Sunt dolor eu sed N",
etest: "Quia aut reprehender",
mtest: "Unde libero autem an",
nextv: "Invalid date"
}
],
isFavorite: true
}];
// Get from lS
const lS = JSON.parse(localStorage.getItem('f7Contacts'));
// DOM elements
const cancelBtn = document.getElementById('dntdelete');
const deleteBtn = document.getElementById('delete');
const consultas = document.getElementById('consultas');
const json = document.getElementById('json');
function clearConsults(){
document.getElementById('confirm').style.display="block";
{
function removeItem() {
const lS = JSON.parse(localStorage.getItem('f7Contacts'));
if (!lS) return;
const obj = lS[0];
// Find 'consultas' key in the object
const findKey = Object.keys(obj).find(key => key.includes('consultas'));
if (findKey) {
// Delete key from the object with array
delete obj[findKey];
}
// Back wraping the obj into array & put to the localStorage
localStorage.setItem('f7Contacts', JSON.stringify([obj])); //set item back into storage
}
alert('CONSULTAS ELIMINADAS');
document.getElementById('confirm').style.display="none";
if (lS[0].consultas) {
consultas.textContent = lS[0].consultas.length;
}
consultas.textContent = 0;
json.textContent = JSON.stringify(obj, undefined, 2);
}
cancelBtn.addEventListener('click', dntdelete);
deleteBtn.addEventListener('click', clearConsults);
}
});
document.getElementById('dntdelete').onclick = function(){
alert('OPERACIÓN CANCELADA');
document.getElementById('confirm').style.display="none";
return false;
};
HTML
<main>
<div class="results">
<h4>Consultas<span id="consultas"></span></h4>
</div>
<div class="control-buttons">
<div id="confirm" style="display: none">
<button id="delete">Delete</button>
<button id="dntdelete">Cancel</button>
</div>
<a onclick="clearConsults()">Delete Consultas</a><h3>SURE YOU WANT TO DELETE?</h3>
</div>
</main>
I must let it clear that this localStorage key (f7Contacts) is really stored by another js within the app and if I have included the localStorage.setItem("f7Contacts", JSON.stringify(contacts)); at the beginning of my code above is just as an attempt to make it clear for you. And let clear too that there are several contacts within the string and the task is to delete consultas for them all.
