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

Question

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.

but it comes as this. No options are coming.

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)

Answer 1

$(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>