Checkboxes values aus Json

  • Hallo zusammen,

    Ich habe eine Art Partnerfinder mittels eines Templates gebaut. Durch eine Checkboxabfrage soll es möglich sein, herauszufinden, welche Produkte der jeweilige Partner anbietet.


    Die JSon sieht wie folgt (gekürzt aus:


    let stores = [{

    "productLines": ["Small Business" , "Heimanwender", "Medium Business", "Enterprise", "Öffentliche Hand", "Gesundheitswesen", "test"],


    In der Index mache ich folgende Abfrage:


    <div class="search" id="hero">

    <input type="checkbox" onclick="#hero" name="hero" value="Heimanwender" >Heimanwender

    <input type="checkbox" onclick="searchStores()" name="hero" value="SOHO" >Soho

    ...



    und hier der code.


    const inputs = document.querySelectorAll('hero');


    inputs.forEach(input => {

    input.addEventListener("change", function (e) {

    searchStores(this.value)

    if (this.checked) {

    }

    });

    })




    function searchStores(product) {

    var foundStores = [];


    if (product) {

    stores.forEach(function (store, index) {


    if (store.productLines.includes(product)) {

    foundStores.push(store);


    }

    }

    )

    }




    Aber ich bekomme es nicht zum laufen, und habe auch keine Idee, was ich verändern müsste. Wenn mir hier jemand helfen könnte- Dies wäre famos!

  • Eine etwas genauere Erklärung wäre vorteilhaft.
    Was soll die JSON da machen? Die vorherigen Angaben wieder in den Feldern eintragen?
    Das hier.

    Code
    1. onclick="#hero"

    Sollte meines Wissens gar nichts machen.
    Das

    Code
    1. document.querySelectorAll('hero');

    Ein Element namens hero besitzt du nicht und deswegen ist der Code auch nutzlos.
    Erklär mal kurz was du erreichen möchtest genau.
    Ich glaube das du leicht den falschen Weg wählst deswegen muss ich das erst genauer wissen.

  • Danke, ja ich bin wirklich etwas aufgeschmissen, und du hast recht, so funktioniert es nicht.


    Also folgendes. Ich habe ca 200 Partner. Diese werden alle via Json geladen.

    Im FE habe ich eine Search für die Partner, das funktioniert. Ich möchte aber dazu noch Checkboxen haben, die abfragt, für welche Produkte er zur Verfügung steht.

    Dies sollte dann toggeln und die Partner auf einer Google Maps anzeigen. Ich schick dir mal ein Screenshot attached.



    Der aktuelle Code sieht zumindest schon einmal wie folgt aus


    <input id="hero" type="checkbox" onclick="searchStores()" name="test" value="test"> test


    const inputs = document.querySelectorAll('#hero');


    inputs.forEach(input => {

    input.addEventListener("click", function (e) {

    if (this.checked) {

    searchStores(this.value)

    }

    });

    })




    function searchStores(product) {

    var foundStores = [];

    var zipCode = document.getElementById('zip-code-input').value;


    if (product) {

    stores.forEach(function (store) {

    if (store.productLines.includes(product)) {

    foundStores.push(store);

    }

    })

    }

  • Wenn ich das alles so richtig verstehe stehen alle Daten die du brauchst in einer JSON Datei ?

    Die Fragst du wie ab ( Ajax , PHP ...) ?

    Wenn in der JSON Datei die Partner schon vorhanden sind dann brauchst du ja nur noch mit der checkbox das ein und ausblenden.


    Hast du das schon Online ?

    Gibt es so was schon , damit man sich das mal an gucken kann wie die JSON aussieht usw...

  • Die Abfrage mittels Javascript

    Und nein, das ist noch nicht online. Genau, ich möchte die Partner nur ein und ausblenden. Mein aktueller Code steht oben. Aber dieses funktioniert nicht


    Hier mal ein https://jsfiddle.net/feuy063m/




    Die JSon sieht wie folgt aus (Auszug)


    "recommendation": {},

    "id": "2",

    "laden": "ja",

    "name": "DEF",

    "coordinates": {

    "latitude": 49.01895905,

    "longitude": 10.96065044


    },

    "regulations": [],

    "address": {

    "city": "Wei\u00dfenburg Bayern",

    "countryCode": "DE",

    "postalCode": "12345"

    },


    "brandName": "CDE",

    "openStatusText": "09.00 Uhr bis 12.00 Uhr, 13.00 Uhr bis 17.00 Uhr",


    "state": "PLATIN PARTNER",

    "productLines": ["Heimanwender", "SOHO", "Small Business" , "Medium Business", "Enterprise", "Öffentliche Hand", "Gesundheitswesen"],

    "addressLines": ["T. 1", "12345 Wei\u00dfenburg Bayern"],



    Nein, online ist noch nichts.

  • Dein Code macht es mir nicht wirklich einfacher .

    Aber das hier

    Code
    1. const inputs = document.querySelectorAll('#hero');

    geht gar nicht.

    Id's dürfen nur einmal auf einer Seite benutzt werden.

    Auch wenn es Theoretisch funktioniert ( kommt auf Browser an ) ist es absolute nicht erlaubt ,weil Browser die richtig Ticken werden da keine richtigen Code ausgeben bzw errors erzeugen usw.


    Warum machst du das ?

    Code
    1. <span>${product[0]}</span>
    2. <span>${product[1]}</span>
    3. <span>${product[2]}</span>
    4. <span>${product[3]}</span>

    In deiner Beispiel JSON hast du einmal 1 und einmal 4 mögliche Ausgaben.

    Mit den Code würden dann undefined Ausgaben kommen.

    Hat das ein besonderen sinn das du da 4 Ausgaben hast ?


    Deine JSON hat ja

    Code
    1. "productLines": ["Small Business" , "Heimanwender", "Medium Business", "Enterprise", "Öffentliche Hand", "Gesundheitswesen", "test"],

    Die möchtest du ja anzeigen oder nicht.
    Meine Frage ist jetzt.
    Soll deine JSON Ausgabe gleich ohne die Angaben kommen (Wenn Google da nee Extra Anfrage hat)?
    Oder einfach nur nicht angezeigt werden?
    Bei den zweiten brauchst du doch nur nee Checkbox die das ausblendet.
    Wäre sinnvoll wenn man dann den Code.

    Code
    1. <span>${product[0]}</span>
    2. <span>${product[1]}</span>
    3. <span>${product[2]}</span>
    4. <span>${product[3]}</span>

    Dann so änderst

    Code
    1. <span class="weg">${product[0]}</span>
    2. <span class="weg">${product[1]}</span>
    3. <span class="weg">${product[2]}</span>
    4. <span class="weg">${product[3]}</span>

    und dann einfach mit JS ein und ausblendest

    Ungefähr so,ungetestet und nur zur Verdeutlichung was ich meine

    Wenn es kommplett nicht angezeigt werden soll ( weil so kann man es an und aus schalten ) dann kannst du die 4 Zeilen

    Code
    1. <span>${product[0]}</span>
    2. <span>${product[1]}</span>
    3. <span>${product[2]}</span>
    4. <span>${product[3]}</span>

    auch direkt weglassen.

    If Abfrage um die 4 Zeilen ob Checkbox geklickt ist und fertig