Entwickler-Ecke :: Thema anzeigen - Schleife zum Vergleich von localStorage Objekten und flexBox

MaxBegOfProg - Fr 18.12.20 16:42
Titel: Schleife zum Vergleich von localStorage Objekten und flexBox

Hey zusammen,

und zwar habe ich eine Frage zu einem Web-Projekt, an dem ich zurzeit Arbeite. Ich habe verschiedene Kontakte per input-Tags in eine flexBox in mein HTML eingefügt.
In meinem JavaScript wird jeder eingefügte Kontakt in als Objekt in ein Array gespeichert, welches dann wiederum im localStorage gespeichert wird. Ich habe am Ende einer jeden Zeile (Kontakt) einen Button um diesen Kontakt aus meinem HTML jederzeit löschen zu können.
Um diesen auch aus dem localStorage zu entfernen habe ich in meiner click-Funktion schon das Array aus dem localStorage aufgerufen und wollte die Texte des zu löschenden Kontakts mit den Texten der Kontakte im localStorage vergleichen um so den übereinstimmenden auch aus dem Array zu nehmen. Im Anschluss wird das "neue" Array wieder im localStorage gespeichert.
Leider stimmt mit der Funktion allerdings etwas nicht und ich komm nicht auf den Fehler. Vielleicht hat von euch jemand eine Idee oder sieht den Fehler auf anhieb. Ich würde mich freuen wenn Ihr mir einen Denkanstoß geben könntet der mich auf den Fehler hinweist oder auch den Fehler ansprecht.

Vielen Dank, schon mal! 8)

JavaScript-Quelltext

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:

 class Person{
    firstName;
    lastName;
    birthDate;
    age;
    adress;
    zipCode;
    city;
    phoneNumber;
};



$(document).ready(function () {

    
    var arr = JSON.parse(localStorage.getItem('persons'));

    if (arr != null) {
        arr.forEach(function (obj) {
            $(".flexBox").append('<div class="flexContact"><div class="flexElement">' + obj.firstName + '</div><div class="flexElement">' + obj.lastName + '</div><div class="flexElement">' + obj.birthDate + '</div><div class="flexElement">' + obj.age + '</div><div class="flexElement">' + obj.adress + '</div><div class="flexElement">' + obj.zipCode + '</div><div class="flexElement">' + obj.city + '</div ><div class="flexElement">' + obj.phoneNumber + '</div > <button id="hide"> </button></div > ')
        })  
    }
    

    $("#submit").click(function () {

        var persons = [];

        persons = JSON.parse(localStorage.getItem('persons')) || [];


        const newPerson = new Person()

            newPerson.firstName = $("#firstName").val(),
            newPerson.lastName = $("#lastName").val(),
            newPerson.birthDate = $("#birthDate").val(),
            newPerson.age = $("#age").val(),
            newPerson.adress = $("#adress").val(),
            newPerson.zipCode = $("#zipCode").val(),
            newPerson.city = $("#city").val(),
            newPerson.phoneNumber = $("#phoneNumber").val(),

            persons.push(newPerson);
          
        
        $(".flexBox").append('<div class="flexContact"><div class="flexElement">' + newPerson.firstName + '</div><div class="flexElement">' + newPerson.lastName + '</div><div class="flexElement">' + newPerson.birthDate + '</div><div class="flexElement">' + newPerson.age + '</div><div class="flexElement">' + newPerson.adress + '</div><div class="flexElement">' + newPerson.zipCode + '</div><div class="flexElement">' + newPerson.city + '</div ><div class="flexElement">' + newPerson.phoneNumber + '</div > <button id="hide"> </button></div > ');

         
        
            localStorage.setItem('persons', JSON.stringify(persons));
        
        
        $(".flexContact #hide").click(function () {
            $(this).parents(".flexContact").hide("slow");

            var removedPerson = $(this).parent(".flexContact").text();
            console.log(removedPerson);
            //Zu löschende Person in der Kontaktliste

            var arrayPersons = [];
            arrayPersons = JSON.parse(localStorage.getItem('persons'));
            console.log(arrayPersons);
            //auf dem LocalStorage gespeicherte Kontakte

            for (var i = 0; i < arrayPersons[0].text; i++) {
                if (arrayPersons[i].text == removedPerson) {
                    $(arrayPersons).remove(i);
                }
            }

        localStorage.setItem('persons', JSON.stringify(arrayPersons));
           

        });

            
    });

    $(".flexContact #hide").click(function () {
        $(this).parents(".flexContact").hide("slow");


        var removedPerson = $(this).parent(".flexContact").text();
        console.log(removedPerson);
        //Zu löschende Person in der Kontaktliste

        var arrayPersons = [];
        arrayPersons = JSON.parse(localStorage.getItem('persons'));
        console.log(arrayPersons);
            //auf dem LocalStorage gespeicherte Kontakte

        for (var i = 0; i < arrayPersons[0].text; i++) {
            if (arrayPersons[i].text == removedPerson) {
                $(arrayPersons).remove(i);
            }
        }

        localStorage.setItem('persons', JSON.stringify(arrayPersons));
    });

});

MaxBegOfProg - Do 14.01.21 11:53

Ich habe es mittlerweile zum laufen bekommen. Allerdings hab ich noch ein kleines Problem und zwar bekomm ich die ID des Objekts nicht ausgelesen die ich zugewiesen habe.
Vielleicht kann mir da noch jemand einen Tipp geben, Danke schon mal!

JavaScript-Quelltext

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:

$(".flexBox").append('<div class="flexContact"><div class="flexElement" data-contactlist-id="id">' + Contact.id + '</div><div class="flexElement">' + Contact.firstName + '</div><div class="flexElement">' + Contact.lastName + '</div><div class="flexElement">' + Contact.birthDate + '</div><div class="flexElement">' + Contact.age + '</div><div class="flexElement">' + Contact.adress + '</div><div class="flexElement">' + Contact.zipCode + '</div><div class="flexElement">' + Contact.city + '</div ><div class="flexElement">' + Contact.phoneNumber + '</div > <button id="hide">X</button></div > ');
//Varialen der input Eingaben als neuen Kontakt im HTML-Dokument darstellen

$(".flexContact #hide").click(function () {
// $(this).parents(".flexContact").hide("slow");

        var removedPerson = $($(this).parents(".flexElement")[0]).data(contactlist-id);

        console.log(removedPerson);
        //Zu löschende Personen ID in der Kontaktliste

Hat sich mittlerweile erledigt mit folgender Lösung:

JavaScript-Quelltext

1:	ar removedPerson = $(this).siblings(".flexContact :eq(0)").text();

Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2024 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!