Create dynamic checkboxes using jquery from JSON data

Question

I haven't found a solution online to this yet, if its available i would love to check it out. I would like to be able to create dynamic checkboxes based on selection from a dropdown, basically the dropdown looks something like this

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

I have an accessories table in the database storing accessories that should be displayed to the user.

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

I would like to have a scenario where the user selects a category in the dropdown then a group of check boxes are dynamically created based on the name of accessories in the table. I'm using the code below that should return a JSON of accessory names.

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

            });

EDIT: the data returned looks somethink like;

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

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

For example: if a user selects computer from the dropdown then there should be checkboxes of accessories like keyboard, mouse, etc generated dynamically. Hope you can help me out. I am using laravel if that's important. Thanks

Zakaria Acharki · Accepted Answer · 2017-09-06 11:59:23Z

It will be better to return an array of objects instead, then you could iterate every accessory and generate the proper related checkbox like the following example shows :

$.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/>');
    });
});

NOTE : If you cant' change the returned result you could change just the parse line to :

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

But you should take in your consideration that 'computer' should be changed dynamically as a variable.

Hope this helps.

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>

Collectives™ on Stack Overflow

Create dynamic checkboxes using jquery from JSON data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related