Checkboxes values aus Json

finder86 · 4. August 2020

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:

<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!

basti1012 · 4. August 2020

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

onclick="#hero"

Sollte meines Wissens gar nichts machen.
Das

Code

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.

finder86 · 4. August 2020

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);

}

})

}

basti1012 · 4. August 2020

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...

finder86 · 5. August 2020

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.

basti1012 · 5. August 2020

Dein Code macht es mir nicht wirklich einfacher .

Aber das hier

Code

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

<span>${product[0]}</span>
<span>${product[1]}</span>
<span>${product[2]}</span>
<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

"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

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

Dann so änderst

Code

<span class="weg">${product[0]}</span>
<span class="weg">${product[1]}</span>
<span class="weg">${product[2]}</span>
<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

Code

<input id="weg" type="checkbox"> weg
   <script>
     var helfer=false;
     document.getElementById('weg').addEventListener('click',function(){             
     weg_box=document.querySelectorAll('.weg');  
       weg_box.forEach(function(j){
         if(helfer==false){
             j.style.display='none';
         }else{
             j.style.display='block';
         }
       })
       if(helfer==false){
            helfer=true;
       }else{
            helfer=false;
       }
})
</script>

Alles anzeigen

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

Code

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

auch direkt weglassen.

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

Stef · 6. August 2020

Hey,

finder86 : Bitte poste deinen Code in den Code Tags! Vielen Dank.

Checkboxes values aus Json

Jetzt mitmachen!

Teilen

Tags