javascriptbootstrap-4multi-selectbootstrap-multiselect

How to populate "multiselect" with data coming from json object?

I cant seem to populate the multiselect field with the data coming from json object. Its not helping no matter which multiselect I use. Data is showing in inspect mode but not showing in fontend. It was supposed to look like this.

enter image description here

but it comes as this. No options are coming.

enter image description here My html code:

<div>
   <span>Tags</span>
   <select id="choices-multiple-remove-button" placeholder="Select upto 5 tags"   name="tags" multiple></select>
</div>

My js code:

    success: function (data) {
    console.log(data);

    $.each(data, function (index, value) {
        var tagOption = ('<option value=' + value.Id + '>' + value.Name + '</option>');
        console.log(value.Name);
        $('#choices-multiple-remove-button').append(tagOption);

    });


    $(document).ready(function () {
        var multipleCancelButton = new Choices('#choices', {
            removeItemButton: true,
            maxItemCount: 5,
            searchResultLimit: 1,
            renderChoiceLimit: 2
        });
    });

My json data:

  {
    "Id": 1,
    "Name": "Tasty",
    "TimeStamp": null,
    "FOodOrTravel": 1
  },
  {
    "Id": 2,
    "Name": "Smells Bad",
    "TimeStamp": null,
    "FOodOrTravel": 1
  },
  {
    "Id": 3,
    "Name": "Spicy",
    "TimeStamp": null,
    "FOodOrTravel": 1
  },
  {
    "Id": 4,
    "Name": "Expensive",
    "TimeStamp": null,
    "FOodOrTravel": 1
  }

console.log(data) enter image description here

Solution 

  • $(document).ready(function () {
            $.ajax({
                
                url: 'https://codeforces.com/api/user.blogEntries?handle=Fefer_Ivan',
                method: 'GET',

                success: function (data) {
                    

                    $.each(data.result, function (index, value) {
                        var tagOption = ('<option value=' + value.id + '>' + value.title + '</option>');
                        
                        $('#choices-multiple-remove-button').append(tagOption);

                    });
                    var multipleCancelButton = new Choices('#choices-multiple-remove-button', {
                removeItemButton: true,
                maxItemCount: 5,
                searchResultLimit: 5,
                renderChoiceLimit: 5
            });

                },
                error: function (jQXHR) {
                    if (jQXHR.status == "401") {
                        $('#errorModal').modal('show');
                    }
                    else {
                        $('#divErrorText').text(jqXHR.responseText);
                        $('#divError').show('fade');
                    }
                }
            });
            
        });
    .mt-100 {
    margin-top: 100px
}

body {
    background: #00B4DB;
    background: -webkit-linear-gradient(to right, #0083B0, #00B4DB);
    background: linear-gradient(to right, #0083B0, #00B4DB);
    color: #514B64;
    min-height: 100vh
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1569006288/BBBootstrap/choices.min.css?version=7.0.0">
<script src="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1569006273/BBBootstrap/choices.min.js?version=7.0.0"></script>
<div class="row d-flex justify-content-center mt-100">
    <div class="col-md-6"> <select id="choices-multiple-remove-button" placeholder="Select upto 5 tags" multiple>
    
        </select> </div>
</div>

    Here is the working example of your code. Try this one. This is what you want> Finally :)

    [https://jsfiddle.net/mjg7r1q0/49/]

    And you used

    var multipleCancelButton = new Choices('#choices', {

    You must use

    var multipleCancelButton = new Choices('#choices-multiple-remove-button', {

    ANd here is sync method. because script runs before aync methods result

    https://jsfiddle.net/2bqp8zxo/2/


    $(document).ready(function () {
            $.ajax({
                
                url: 'https://codeforces.com/api/user.blogEntries?handle=Fefer_Ivan',
                method: 'GET',
                async: false,
                success: function (data) {
                    

                    $.each(data.result, function (index, value) {
                      
                        var tagOption = ('<option value=' + value.id + '>' + value.title + '</option>');
                        
                        $('#choices-multiple-remove-button').append(tagOption);

                    });
                    

                },
                error: function (jQXHR) {
                    if (jQXHR.status == "401") {
                        $('#errorModal').modal('show');
                    }
                    else {
                        $('#divErrorText').text(jqXHR.responseText);
                        $('#divError').show('fade');
                    }
                }
            });
            var multipleCancelButton = new Choices('#choices-multiple-remove-button', {
                removeItemButton: true,
                maxItemCount: 5,
                searchResultLimit: 5,
                renderChoiceLimit: 5
            });
        });
    .mt-100 {
    margin-top: 100px
}

body {
    background: #00B4DB;
    background: -webkit-linear-gradient(to right, #0083B0, #00B4DB);
    background: linear-gradient(to right, #0083B0, #00B4DB);
    color: #514B64;
    min-height: 100vh
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1569006288/BBBootstrap/choices.min.css?version=7.0.0">
<script src="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1569006273/BBBootstrap/choices.min.js?version=7.0.0"></script>
<div class="row d-flex justify-content-center mt-100">
    <div class="col-md-6"> <select id="choices-multiple-remove-button" placeholder="Select upto 5 tags" multiple>
    
        </select> </div>
</div>