如何使用select2加载对象数据数组

Question

My Issue:

I have created the complete scenario of my problem.

My Html:

<select data-placeholder = "Sending" id = "sender" data-allow-clear = true >
   <option ></option >
</select >    

<select data-placeholder = "Receiving" id = "receiving" data-allow-clear = true >
  <option ></option >
</select >

Corridor url return this following collection (i am using laravel as backend):

[ {
    "id"                 : 1, "source_country_id": 1, "destination_country_id": 2,
    "source_country"     : { "id": 1, "name": "United Kingdom", "flag_icon": "flag-icon-gb" },
    "destination_country": { "id": 2, "name": "Pakistan", "flag_icon": "flag-icon-pk" }
}, {
    "id"                 : 2, "source_country_id": 1, "destination_country_id": 3,
    "source_country"     : { "id": 1, "name": "United Kingdom", "flag_icon": "flag-icon-gb" },
    "destination_country": { "id": 3, "name": "India", "flag_icon": "flag-icon-in" }
}, {
    "id"                 : 7, "source_country_id": 1, "destination_country_id": 4,
    "source_country"     : { "id": 1, "name": "United Kingdom", "flag_icon": "flag-icon-gb" },
    "destination_country": { "id": 4, "name": "Bangladesh", "flag_icon": "flag-icon-bd" }
} ]

My Vue Code: In corridors method using axios I was retrieving the data (shown above) and after that I am creating two arrays for sendigCountries and recevingCountries . Both arrays successfully filled with its data ( sendingCountries created with duplicate data) after that I want to pass that data to select2 but select2 not filled with that arrays. please help me to figure out where I make mistake.

  var app = new Vue({
    methods: {
         corridors : function () {
                   axios.post ( '/corridors' )
                   .then ( response => {
                         let sendingCountries   = [];
                         let receivingCountries = [];
                         _.forEach ( response.data, function (value, key) {
                                 sendingCountries.push ( {
                                   id: value.source_country.id,
                                   text: value.source_country.name,
                                   flag: value.source_country.flag_icon
                                 });

                                 receivingCountries.push ( {
                                   id  : value.destination_country.id,
                                   text: value.destination_country.name,
                                   flag: value.destination_country.flag_icon
                                 });
                    } );
                   $ ( "#sender" ).select2 ( {
                                      width: '100%',
                                      data : sendingCountries,
                                  } );
                    $ ( "#receiver" ).select2 ( {
                                      width: '100%',
                                      data : receivingCountries,
                                  } );
                   } )
                   .catch ( error => { } )
            }
     }
})

Answer 1

the array is not in the correct format:

var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];

the array must contain id and text keys.

UPDATE :

HTML :

 var sender=$ ("#sender").select2 ({ width: '100%' }); var receiver= $ ("#receiver").select2 ({ width: '100%' }); var app = new Vue({ methods: { corridors : function () { axios.post ( '/corridors' ) .then ( response => { let sendingCountries = []; let receivingCountries = []; _.forEach ( response.data, function (value, key) { sendingCountries.push ( { id: value.source_country.id, text: value.source_country.name, flag: value.source_country.flag_icon }); receivingCountries.push ( { id : value.destination_country.id, text: value.destination_country.name, flag: value.destination_country.flag_icon }); } ); //Assume this array coming from ajax var sourceCountry = [{ id: "US", text: 'America' }, { id: "AF", text: 'Africa' }, { id: "Ind", text: 'India' }, { id: "UK", text: 'England' }, { id: "ITL", text: 'Itally' }]; var receivingCountries = [{ id: "US", text: 'America' }, { id: "AF", text: 'Africa' }, { id: "Ind", text: 'India' }, { id: "UK", text: 'England' }, { id: "ITL", text: 'Itally' }]; sender.select2({data:sourceCountry}); receiver.select2({data:receivingCountries}); } ) .catch ( error => { } ) } } }) 

 <select class="select2" data-placeholder = "Sending" id = "sender" data-allow-clear = true > <option value="">Please Select</option > </select > <select class="select2" data-placeholder = "Receiving" id = "receiver" data-allow-clear = true > <option value="">Please Select</option > </select > 

Reference Link :