如何删除嵌入在另一个 JSON 数组 (f7Contacts) 中的特定 JSON 数组 (consultas)，两者都保存在单个 localSorage 键中? [英] How can I delete a specific JSON array (consultas) embedded within another JSON array (f7Contacts) both saved in a single localSorage key?

问题描述

我有一个存储为 JSON 数组的 localStorage 键 (f7Contacts)，这应该是.我知道如何使用 localStorage.removeItem("myKey"); 删除整个密钥.

我的数组，如您所见，由一组嵌入其中的 JSON 数组组成.有一个名为 f7Contacts 的更广泛的数组，其中有一些子数组(以某种方式命名)名为 visitings 和 consultas.现在，我要删除的不是任何 JSON 数组中的单个项目，也不是整个 f7Contacts 数组，而是名为 consultas 的 JSON 子数组.

我尝试了很多方法，但我无法获得有效的代码.

这是我到目前为止所拥有的:

我的字符串化数组如下所示:

(现在我更新了字符串以使其更像我的真实案例，因为建议的答案设法删除了其中一个联系人中的 consultas，并且在一种情况下它删除了 consultascode>consultas 从第一个联系人并删除其余的联系人.我命名为 ELISA 和 FRANK 以便您区分它们.还更新了我的 Javascript 和 html 作为我自己的代码和 ЖнецЪ 的答案的混合物.我这样做是为了保持我的环境一致.这段代码设法删除了第一个 联系人的咨询，但也删除了其余的联系人.):

JAVASCRIPT

 document.addEventListener(DOMContentLoaded", function() {var 联系人 = [{id:95470e9e-ee5c-4467-9500-1fcbeae1b57c"，hasPic:真实，picId: 3,createdOn: "2021-08-01T17:31:32.230Z",名字:ELISA"，公司:La Fábrica"，工作:巴伦德罗"，手机:[phone]"，电话:[phone]"，短信:"，电子邮件:[e-mail]"，madedate: "无效日期",诊所:2"，性别:M"，生日:无效日期"，年龄:47"，访问:[{id:1"，vdate:19/07/-2006 12:00 AM"，pdcb:Est offcia dolorem"，vdiagnose: "Laborum Ea consecte",vrecom:Mollit cillum sed pe"，nextv: 无效日期"}],咨询:[{id:1"，日期:04/07/-1978 12:00 AM"，lmotive:Soluta cumque aspern"，ldiagnose:Quidem autem dout o"，测试:Rerum sint atque il"，etest: "Officiis deserunt un",mtest:Nihil a dolore rem s"，nextv: 无效日期"},{id:2"，日期:04/04/-1991 12:00 AM"，lmotive:Eius in est enim no"，ldiagnose:In aliqua Sunt dol"，测试:Sunt dolor eu sed N"，etest:Quia aut reprehender"，mtest:Unde libero autem an"，nextv: 无效日期"}],isFavorite: 真},{id:95470e9e-ee5c-4467-9500-1fcbeae1b57c"，hasPic:真实，picId: 3,createdOn: "2021-08-01T17:31:32.230Z",名字:弗兰克"，公司:La Fábrica"，工作:巴伦德罗"，手机:[phone]"，电话:[phone]"，短信:"，电子邮件:[e-mail]"，madedate: "无效日期",诊所:2"，性别:M"，生日:无效日期"，年龄:47"，访问:[{id:1"，vdate:19/07/-2006 12:00 AM"，pdcb:Est offcia dolorem"，vdiagnose: "Laborum Ea consecte",vrecom:Mollit cillum sed pe"，nextv: 无效日期"}],咨询:[{id:1"，日期:04/07/-1978 12:00 AM"，lmotive:Soluta cumque aspern"，ldiagnose:Quidem autem dout o"，测试:Rerum sint atque il"，etest: "Officiis deserunt un",mtest:Nihil a dolore rem s"，nextv: 无效日期"},{id:2"，日期:04/04/-1991 12:00 AM"，lmotive:Eius in est enim no"，ldiagnose:In aliqua Sunt dol"，测试:Sunt dolor eu sed N"，etest:Quia aut reprehender"，mtest:Unde libero autem an"，nextv: 无效日期"}],isFavorite: 真}];//从 lS 获取const lS = JSON.parse(localStorage.getItem('f7Contacts'));//DOM 元素const cancelBtn = document.getElementById('dntdelete');const deleteBtn = document.getElementById('delete');const Consultas = document.getElementById('consultas');const json = document.getElementById('json');函数 clearConsults(){document.getElementById('confirm').style.display="block";{函数 removeItem() {const lS = JSON.parse(localStorage.getItem('f7Contacts'));如果(！lS)返回；const obj = lS[0];//在对象中找到'consultas'键const findKey = Object.keys(obj).find(key => key.includes('consultas'));如果(查找键){//从带有数组的对象中删除键删除 obj[findKey];}//将 obj 包装回数组 &放到localStoragelocalStorage.setItem('f7Contacts', JSON.stringify([obj]));//将item重新放入存储中}alert('CONSULTAS ELIMINADAS');document.getElementById('confirm').style.display="none";如果(lS[0].consultas){Consultas.textContent = lS[0].consultas.length;}咨询.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";返回假；};

HTML

<div class="results"><h4>Consultas<span id=consultas"></span></h4>

<div class="control-buttons"><div id="确认";样式=显示:无"><button id="delete">Delete</button><button id="dntdelete">取消</button>

<a onclick="clearConsults()">删除咨询</a><h3>确定要删除吗?</h3>

</main>

我必须明确指出，这个 localStorage 键 (f7Contacts) 实际上是由应用程序中的另一个 js 存储的，如果我已经包含了 localStorage.setItem("f7Contacts", JSON.stringify(contacts)); 在我上面代码的开头只是为了让你清楚.还要明确字符串中有几个联系人，任务是删除所有consultas.

解决方案

如果我的理解是正确的，您只想从 localStorage 中删除 consultas.我认为最好用 Object.keys 找到对象的键，然后从对象中删除该键.工作示例

script.js

document.addEventListener('DOMContentLoaded', function () {var 联系人 = [{id: '95470e9e-ee5c-4467-9500-1fcbeae1b57c',hasPic:真实，picId: 3,createdOn: '2021-08-01T17:31:32.230Z',名字:'ELISA'，公司:'La Fábrica',工作:'巴伦德罗'，手机:'[phone]'，电话:'[phone]'，短信: ''，电子邮件:'[e-mail]'，madedate: '无效日期',诊所:'2'，性别:'M',生日:'无效日期'，年龄:'47'，来访:[{编号:'1'，vdate: '19/07/-2006 12:00 AM',pdcb: 'Est offcia dolorem',vdiagnose: 'Laborum Ea consecte',vrecom: 'Mollit cillum sed pe',nextv: '无效日期',},],咨询:[{编号:'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: '无效日期',},{编号:'2'，ldate: '04/04/-1991 12:00 AM',lmotive: 'Eius in est enim no',ldiagnose: '在 aliqua Sunt dol',ttest: 'Sunt dolor eu sed N',etest: 'Quia aut reprehender',mtest: 'Unde libero autem an',nextv: '无效日期',},],isFavorite: 真,},{id: '95470e9e-ee5c-4467-9500-1fcbeae1b57c',hasPic:真实，picId: 3,createdOn: '2021-08-01T17:31:32.230Z',名字:'弗兰克'，公司:'La Fábrica',工作:'巴伦德罗'，手机:'[phone]'，电话:'[phone]'，短信: ''，电子邮件:'[e-mail]'，madedate: '无效日期',诊所:'2'，性别:'M',生日:'无效日期'，年龄:'47'，来访:[{编号:'1'，vdate: '19/07/-2006 12:00 AM',pdcb: 'Est offcia dolorem',vdiagnose: 'Laborum Ea consecte',vrecom: 'Mollit cillum sed pe',nextv: '无效日期',},],咨询:[{编号:'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: '无效日期',},{编号:'2'，ldate: '04/04/-1991 12:00 AM',lmotive: 'Eius in est enim no',ldiagnose: '在 aliqua Sunt dol',ttest: 'Sunt dolor eu sed N',etest: 'Quia aut reprehender',mtest: 'Unde libero autem an',nextv: '无效日期',},],isFavorite: 真,},];//从 lS 获取const lS = JSON.parse(localStorage.getItem('f7Contacts'));//DOM 元素const clearConsultsBtn = document.getElementById('clear-consults');const confirmBtn = document.getElementById('confirm');const createBtn = document.getElementById('create');const cancelBtn = document.getElementById('dntdelete');const deleteBtn = document.getElementById('delete');const Consultas = document.getElementById('consultas');const controlBtns = document.querySelector('.control-buttons');const json = document.getElementById('json');//检查是否不是 lS如果(！lS){localStorage.setItem('f7Contacts', JSON.stringify(contacts));///只是为了能见度让 num = 0;for (const i of contact) {num += i.consultas.length;咨询.textContent = num;}json.textContent = JSON.stringify(contacts, undefined, 2);}如果 (lS) {for (const i of lS) {如果(！i.consultas)consultas.textContent = 0;}json.textContent = JSON.stringify(lS, undefined, 2);}函数 removeItem() {const lS = JSON.parse(localStorage.getItem('f7Contacts'));如果(！lS)返回；//创建没有 'consultas' 的新数组const clearArray = lS.map(obj => {//在对象中找到'consultas'键const findKey = Object.keys(obj).find(key => key.includes('consultas'));如果(查找键){//从带有数组的对象中删除键删除 obj[findKey];}返回对象；//将对象返回到数组而不使用 'consultas'});//放入本地存储localStorage.setItem('f7Contacts', JSON.stringify(clearArray));//将item重新放入存储中alert('CONSULTAS ELIMINADAS');controlBtns.style.display = '无';clearConsultsBtn.style.display = 'block';///只是为了能见度如果(清除数组){for (const i of clearArray) {如果(！i.consultas)consultas.textContent = 0;}}json.textContent = JSON.stringify(clearArray, undefined, 2);}函数 addItem() {localStorage.setItem('f7Contacts', JSON.stringify(contacts));///只是为了能见度让 num = 0;for (const i of contact) {num += i.consultas.length;咨询.textContent = num;}json.textContent = JSON.stringify(contacts, undefined, 2);}函数 clearConsults() {alert('OPERACIÓN CANCELADA');controlBtns.style.display = 'flex';clearConsultsBtn.style.display = '无';}函数取消(){alert('OPERACIÓN CANCELADA');controlBtns.style.display = '无';clearConsultsBtn.style.display = 'block';}clearConsultsBtn.addEventListener('click', clearConsults);createBtn.addEventListener('click', addItem);cancelBtn.addEventListener('点击', 取消);deleteBtn.addEventListener('click', removeItem);ConfirmBtn.addEventListener('click', clearConsults);});

index.html

<div class="results"><h4>Consultas数组<span id=consultas"></span></h4>

<h3>确定要删除吗?</h3><button id="clear-consults">Delete Consultas</button><div class="control-buttons"><button id="dntdelete">取消</button><button id="delete">Delete</button><button id="create">Create</button>