comment charger le tableau des données d'objets avec select2

Question

Mon numéro:

J'ai créé le scénario complet de mon problème.

Mon 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 retour cette collection suivante (j'utilise Laravel comme back-end):

[ { 
    "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" } 
} ] 

Mon Vue code: Dans la méthode corridors utilisant Axios je récupérer les données (montré ci-dessus) et après que je crée deux tableaux pour sendigCountries et recevingCountries. Les deux tableaux ont rempli avec succès ses données (sendingCountries créées avec des données en double) après que je veux transmettre ces données à select2 mais select2 non rempli avec ces tableaux. Aidez-moi s'il vous plaît à comprendre où je fais erreur.

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

le tableau n'est pas dans le format correct:

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

le tableau doit contenir des clés d'identification et de texte.

MISE À JOUR:

HTML:

var sender=$ ("#sender").select2 ({ 
 
    width: '100%' 
 
\t }); 
 
\t 
 
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 >

Référence Link: