Create checkboxs using unique values from a list, using Jquery-CodePudding

I using two scripts to get all unique values from a list a than creat a list of checkbox just of those uniques values. But its just returning the first item as a checkbox.

var items = [];
$( '.list li' ).each( function() {
    // If the text isn't in the array, add it
    if ( $.inArray( $(this).text(), items ) === -1 ) {
        items.push( $(this).text() );
    } 
} );
$(document).ready(function() {
    var list = [items];
    for (var value of list) {
      $('#container')
        .append(`<input type="checkbox" id="${value}" name="interest" value="${value}">`)
        .append(`<label for="${value}">${value}</label></div>`)
        .append(`<br>`);
    }
  }
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  style="display:none;">
<ul>

<li id="li1"  style="text-align: left;">International</li>
<li id="li10"  style="text-align: left;">Science</li>
<li id="li332"  style="text-align: left;">Physics</li>
<li id="li2"  style="text-align: left;">Africa</li>
<li id="li3"  style="text-align: left;">Asia</li>
<li id="li5"  style="text-align: left;">Caribbean</li>
<li id="li8"  style="text-align: left;">North America</li>
<li id="li9"  style="text-align: left;">South America</li>
<li id="li222"  style="text-align: left;">International</li>
<li id="li110"  style="text-align: left;">Science</li>
<li id="li32"  style="text-align: left;">Africa</li>
<li id="li23"  style="text-align: left;">Asia</li>
<li id="li35"  style="text-align: left;">Caribbean</li>
<li id="li38"  style="text-align: left;">North America</li>
<li id="li19"  style="text-align: left;">South America</li>
 </ul>
</div>
    <div id="container"></div>
    <div>
    </div>

CodePudding user response：

You need to iterate with foreach

var items = [];
$( '.list li' ).each( function() {
    // If the text isn't in the array, add it
    if ( $.inArray( $(this).text(), items ) === -1 ) {
        items.push( $(this).text() );
    } 
} );
$(document).ready(function() {
console.log('main',items);
    var list = items,
    check   =   "";
    list.forEach(function(value,index) {
        check  = `<input type="checkbox" id="${value}" name="interest" value="${value}"><label for="${value}">${value}</label><br>`;
    });
    $('#container').append(check);
  }

);

CodePudding user response：

the issue is var list = [items]; should be var list = items;

var items = [];
$( '.list li' ).each( function() {
    // If the text isn't in the array, add it
    if ( $.inArray( $(this).text(), items ) === -1 ) {
        items.push( $(this).text() );
    } 
} );
$(document).ready(function() {
    var list = items;
    for (var value of list) {
      $('#container')
        .append(`<input type="checkbox" id="${value}" name="interest" value="${value}">`)
        .append(`<label for="${value}">${value}</label></div>`)
        .append(`<br>`);
    }
  }
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  style="display:none;">
<ul>

<li id="li1"  style="text-align: left;">International</li>
<li id="li10"  style="text-align: left;">Science</li>
<li id="li332"  style="text-align: left;">Physics</li>
<li id="li2"  style="text-align: left;">Africa</li>
<li id="li3"  style="text-align: left;">Asia</li>
<li id="li5"  style="text-align: left;">Caribbean</li>
<li id="li8"  style="text-align: left;">North America</li>
<li id="li9"  style="text-align: left;">South America</li>
<li id="li222"  style="text-align: left;">International</li>
<li id="li110"  style="text-align: left;">Science</li>
<li id="li32"  style="text-align: left;">Africa</li>
<li id="li23"  style="text-align: left;">Asia</li>
<li id="li35"  style="text-align: left;">Caribbean</li>
<li id="li38"  style="text-align: left;">North America</li>
<li id="li19"  style="text-align: left;">South America</li>
 </ul>
</div>
    <div id="container"></div>
    <div>
    </div>