Erstellen Sie dynamische Checkboxen mit Jquery aus JSON-Daten

Question

Ich habe noch keine Lösung online gefunden, wenn es verfügbar wäre, würde ich es gerne überprüfen. Ich möchte in der Lage sein, dynamische Kontrollkästchen aus einer Dropdown basierend auf Auswahl zu erstellen, im Grunde sieht der Drop-Down so etwas wie diese

<select> 
    <option value="Computer">Volvo</option> 
    <option value="Vehicle">Saab</option> 
</select> 

ich ein Zubehör Tabellenspeicher Zubehör in der Datenbank, die den Benutzer angezeigt werden soll.

id | category | name | 
---------------------------- 
1 | computer | mouse | 
2 | computer | keyboard | 
2 | vehicles | Roof-rack | 

Ich mag wäre ein Szenario, wo der Benutzer eine Kategorie in der Dropdown-Liste wählt dann eine Gruppe von Kontrollkästchen in der Tabelle dynamisch erstellt basierend auf den Namen von Zubehör. Ich verwende den folgenden Code, der ein JSON von Zubehörnamen zurückgeben soll.

$.get("{{config('app.url') }}/hardware/models/"+catid+"/accesories",{_token: "{{ csrf_token() }}"},function (data) { 

      }); 

EDIT: die zurückgegebenen Daten sieht sowas wie;

{ 
    "computer": [{ 
      "id": "1", 
      "name": "mouse" 
     }, 
     { 
      "id": "2", 
      "name": "keyboard" 
     }, 

     { 
      "id": "1", 
      "name": "mouse" 
     } 
    ] 
} 

Zum Beispiel: Wenn ein Benutzer Computer aus dem Drop-Down-wählt dann sollte es Kontrollkästchen Zubehör wie Tastatur sein, Maus, etc. dynamisch generiert. Hoffe, du kannst mir helfen. Ich benutze Laravel, wenn das wichtig ist. Dank

Answer 1

Es wird besser sein, ein Array von Objekten zurück statt, dann könnte man jedes Zubehör und erzeugen die richtige verwandten checkbox wie das folgende Beispiel iterieren zeigt:

$.get("{{config('app.url') }}/hardware/models/"+catid+"/accesories",{_token: "{{ csrf_token() }}"},function (data) { 
    data = $.parseJSON(data); 

    data.forEach(function (obj){ 
     $('#dynamic_div').append('<input name="accesories" type="checkbox" value="'+obj.id+'"/> '+obj.name +'<br/>'); 
    }); 
}); 

HINWEIS: Wenn Sie schräge‘ ändern Sie die zurückgegebene Ergebnis Sie nur die Parse-Linie ändern könnte:

data = $.parseJSON(data['computer']); 

Aber Sie sollten in Ihrem bedenken, dass 'computer' sollte dynamicall geändert werden y als Variable.

Hoffe, das hilft.

var arr = [{ 
 
     "id": "1", 
 
     "name": "mouse" 
 
    }, 
 
    { 
 
     "id": "2", 
 
     "name": "keyboard" 
 
    }, 
 

 
    { 
 
     "id": "1", 
 
     "name": "mouse" 
 
    } 
 
]; 
 

 
arr.forEach(function (obj) 
 
{ 
 
    $('#dynamic_div').append('<input name="accesories" type="checkbox" value="'+obj.id+'"/> '+obj.name +'<br/>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="dynamic_div"></div>