Hi I needed some help on making it to auto create a checkbox to my ajax name how can i do it ? I have added the new answer to my code however currently i showing Undefinted with checkbox of the type i realize

<div id="modal">
<section>
<div id="recyclable_id"></div>
</section>
</div>

Ajax call sample for options

     $(document).ready(function() {
                    $.ajax( {
                        url: 'https://ecoexchange.dscloud.me:8090/api/get', 
                        type: 'GET', 
                        dataType: 'json',
                        headers:{
                            query: "RecyclableTypeGet()",
                            // Gets the apikey from the sessionStorage
                            apikey: sessionStorage.getItem("apikey")
                        },
                        success: function(data) {
                        console.log(data);
                        var html='';
                        $.each(data, function(key, value) {
                            html  ='<input type="checkbox" name="recyclable_id[]" value="' value.RecyclableID '"><label style="padding-left: 10px;">' value.Name '</label><br>';
                        }
                        );
                        $('#recyclable_id').html(html);
                        }
                    }
                    );
                    }

                    );

this is my json response that i am going to use for the name only

[
    {
        "RecyclableID": 1,
        "Name": "recyclable",
        "RecyclableType": "test recyclable type"
    },
    {
        "RecyclableID": 3,
        "Name": "test recyclable 2",
        "RecyclableType": "WASTE"
    },
    {
        "RecyclableID": 129,
        "Name": "test recyclable 4",
        "RecyclableType": "test recyclable type"
    },
    {
        "RecyclableID": 131,
        "Name": "test recyclable 6",
        "RecyclableType": "test recyclable type"
    },
    {
        "RecyclableID": 132,
        "Name": "test recyclable 7",
        "RecyclableType": "test recyclable type"
    },
    {
        "RecyclableID": 133,
        "Name": "test recyclable 8",
        "RecyclableType": "test recyclable type"
    },
    {
        "RecyclableID": 134,
        "Name": "test recyclable 34",
        "RecyclableType": "WASTE"
    },
    {
        "RecyclableID": 138,
        "Name": "recyclable thing",
        "RecyclableType": "WASTE"
    },
    {
        "RecyclableID": 139,
        "Name": "recyclable thing 2",
        "RecyclableType": "Ewaste"
    },
    {
        "RecyclableID": 153,
        "Name": "test recyclable 10",
        "RecyclableType": "Other"
    },
    {
        "RecyclableID": 154,
        "Name": "test recyclable 11",
        "RecyclableType": "Ewaste"
    },
    {
        "RecyclableID": 155,
        "Name": "test recyclable 123",
        "RecyclableType": "test recyclable type 2"
    },
    {
        "RecyclableID": 159,
        "Name": "some recyclable name",
        "RecyclableType": "CC"
    },
    {
        "RecyclableID": 161,
        "Name": "some recyclable name 2",
        "RecyclableType": "Ewaste"
    },
    {
        "RecyclableID": 162,
        "Name": "recyclable 2",
        "RecyclableType": "test recyclable type 2"
    },
    {
        "RecyclableID": 165,
        "Name": "test recyclable 15",
        "RecyclableType": "WASTE"
    },
    {
        "RecyclableID": 166,
        "Name": "test recyclable 18",
        "RecyclableType": "testing type"
    },
    {
        "RecyclableID": 167,
        "Name": "some recyclable name 23",
        "RecyclableType": "Ewaster"
    }
]

This is my picture showing undefined I have try to change with the new anser given but it seem to be getting undefinied x 10 from type

CodePudding user response：

Does this work? Copilot created the code xD

$(document).ready(function() {
  $.ajax( {
    url: 'http://localhost/recyclable/public/api/recyclable', type: 'GET', dataType: 'json', success: function(data) {
      console.log(data);
      var html='';
      $.each(data, function(key, value) {
        html  ='<input type="checkbox" name="recyclable_id[]" value="' value.RecyclableID '"><label style="padding-left: 10px;">' value.Name '</label><br>';
      }
      );
      $('#recyclable_id').html(html);
    }
  }
  );
}

);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="recyclable_id"></div>