Autor Beitrag
MaxBegOfProg
Hält's aus hier
Beiträge: 5

WIN 10
C# (VS 2019), HTML (VS 2019), CSS (VS 2019), JS (VS 2019)
BeitragVerfasst: Fr 18.12.20 15:42 
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)

ausblenden volle Höhe 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));
    });

});
Th69
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starontopic star
Moderator
Beiträge: 4351
Erhaltene Danke: 935

Win10
C#, C++ (VS 2015/17/19)
BeitragVerfasst: Sa 19.12.20 08:57 
Was genau funktioniert denn nicht?
Hast du es schon mal mit Debugging probiert: JavaScript Debugging?
Christian S.
ontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic starofftopic star
Beiträge: 20451
Erhaltene Danke: 2263

Win 10
C# (VS 2019)
BeitragVerfasst: Sa 19.12.20 16:10 
Dieser Schleifenkopf macht irgendwie keinen Sinn, wenn Du das Array durchlaufen willst:
ausblenden JavaScript-Quelltext
1:
for (var i = 0; i < arrayPersons[0].text; i++) {					

_________________
Zwei Worte werden Dir im Leben viele Türen öffnen - "ziehen" und "drücken".
jfheins
ontopic starontopic starontopic starontopic starontopic starontopic starofftopic starofftopic star
Beiträge: 903
Erhaltene Danke: 151

Win 10
VS 2013, VS2015
BeitragVerfasst: Sa 19.12.20 22:21 
Tipp aus der Praxis: Gib der Person einfach eine ID (Guid) und speichere sie dann. HTML hat dafür hidden Felder.

Beim löschen dann einfach nach der ID suchen ;-)

Für diesen Beitrag haben gedankt: MaxBegOfProg
MaxBegOfProg Threadstarter
Hält's aus hier
Beiträge: 5

WIN 10
C# (VS 2019), HTML (VS 2019), CSS (VS 2019), JS (VS 2019)
BeitragVerfasst: Do 14.01.21 10: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!

ausblenden 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:

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