How to create checkbox automatic from ajax call (Undefined currently)

Question

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

Answer 1

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>

Answer 2

$.ajax({
type: "POST",
dataType: "json",
url: "../Service.asmx/GetSales",

    success: function (response) {
    var result = response.d;
    var dt = $.parseXML(result);
    var serrows = '';
$.each(dt, function(key, value) {
        html +='<input type="checkbox" name="recyclable_id[]" value="'+value.RecyclableID+'"><label style="padding-left: 10px;">'+value.Name+'</label><br>';
      }

})