select2でオブジェクトデータの配列をロードする方法

Question

私の問題：

問題の完全なシナリオを作成しました。

マイ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リターンこの次のコレクション（私はバックエンドとしてlaravelを使用しています）：

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

マイヴュコード：axiosを使用してcorridors方法で、私は（データを取得しました。その後、sendigCountriesとrecevingCountriesの2つの配列を作成しています。どちらの配列も、そのデータをselect2に渡したいが、select2はその配列でいっぱいにならないようにするために、そのデータ（二重のデータで作成されたsendingCountries）でうまくいった。私が間違っている箇所を見つけ出すのを助けてください。

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

配列は、正しい形式ではありません：

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

アレイIDおよびテキストキーを含まなければなりません。

UPDATE：

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 >

リファレンスLink：AJAX成功応答のwiで作成