Jquery radio button append issue

Question

I am working with Jquery and radio buttons, I have little issue.

This is data that I have for my radio buttons

data =
{"seats":[
{"id":11,"number":11,"theater":3},
{"id":12,"number":12,"theater":3},
{"id":13,"number":13,"theater":3},
{"id":14,"number":14,"theater":3},
{"id":15,"number":15,"theater":3}
]}

This is my function that appends label and radio input to an empty div

for(i = 0; i < data.seats.length; i++){
                    var newData = data.seats;
                    var radioBtn = $('<label for="seat"><input type="radio" name="seat" />'+ newData.number +'</label>');
                    radioBtn.appendTo('#radioSeats');
                    console.log(newData);
                }

My issue is that label text is getting undefined value and console.log(newData) prints 5 arrays (5x seats)

Chitrang Chitrang · Accepted Answer · 2020-01-28T20:54:29

You are missing index to access element of array.

var newData = data.seats[i]

data =
        {"seats":[
        {"id":11,"number":11,"theater":3},
        {"id":12,"number":12,"theater":3},
        {"id":13,"number":13,"theater":3},
        {"id":14,"number":14,"theater":3},
        {"id":15,"number":15,"theater":3}
        ]};
        
for(i = 0; i < data.seats.length; i++){
                    var newData = data.seats[i];
                    var radioBtn = $('<label for="seat"><input type="radio" name="seat" />'+ newData.number +'</label>');
                    radioBtn.appendTo('#radioSeats');
                    console.log(newData);
                }

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

Jquery radio button append issue

1 Answers