如何删除嵌入在另一个 JSON 数组 (f7Contacts) 中的特定 JSON 数组 (consultas),两者都保存在单个 localSorage 键中?

SIM*_*SIS 6 html javascript local-storage

我有一个存储为 JSON 数组的 localStorage 键 (f7Contacts),它应该是。我知道如何使用localStorage.removeItem("myKey");.

正如您所看到的,我的数组由一组嵌入其中的 JSON 数组组成。有更广泛的一个名为f7Contacts和它里面有一些子阵列(以某种方式为它们命名)命名visitingsconsultas。现在,我要删除的不是任何 JSON 数组中的单个项目,也不是整个f7Contacts数组,而是名为Consultas的 JSON 子数组。

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

这是我到目前为止所得到的:

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

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

爪哇脚本

    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;
    };
Run Code Online (Sandbox Code Playgroud)

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>
    
Run Code Online (Sandbox Code Playgroud)

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