使用 select2 將 php 數組轉換為 javascript 數組

Question

我在名為$salaries的 laravel 變量中有以下 php 數組，該變量傳遞給刀片視圖：

array:4 [▼
   2 => "£8, Per hour"
   3 => "£10, Per hour"
   23 => "Up to £10000, Per annum"
   24 => "£10,000 - £15,000, Per annum"
]

在我的刀片視圖中，我有一個下拉菜單，當更改時，我想加載一個帶有上述選項的 select2 下拉菜單。 下面是我的代碼：

$(document).on("change", ".js-selector", function() {

     var options = {!! json_encode($salaries) !!};

     $("#salary_list").empty().select2({
        data: options
     });

})

但是，沒有任何內容被加載到下拉列表中。 因此，我將其范圍縮小到 select2 的選項數據格式不正確。

當我 output 選項變量到控制台時，我得到以下 object 而不是 javascript 數組？

{2: "£8, Per hour", 3: "£10, Per hour", 23: "Up to £10000, Per annum", 24: "£10,000 - £15,000, Per annum"}

如何將選項轉換為 select2 數據的正確格式？

Answer 1

您必須將數據轉換為正確的格式，在這里您可以看到正確的數據格式：

var data = [
    {
        id: 2,
        text: '£8, Per hour'
    },
    {
        id: 3,
        text: '£10, Per hour'
    }
];

您可以將正確格式的數組傳遞給視圖，例如：

$salaries = \App\Models\Salary::all(); // eloquent collection

$salaries = $salaries->map(function ($salary) {
    return ['id' => $salary->id, 'text' => $salary->text];
})->toArray();

它會產生這樣的結果：

array:1 [▼
  0 => array:2 [▼
    "id" => 2
    "text" => "£8, Per hour"
  ]
  0 => array:2 [▼
    "id" => 3
    "text" => "£10, Per hour"
  ]
]

或者您可以在 javascript 中轉換數組，Select2 文檔在此處解釋了如何轉換數據：

Select2 要求 id 屬性用於唯一標識結果列表中顯示的選項。 如果您使用 id 以外的屬性（如 pk）來唯一標識選項，則需要先將舊屬性 map 傳遞給 id，然后再將其傳遞給 Select2。

如果您無法在您的服務器上執行此操作，或者您處於無法更改 API 的情況，您可以在將其傳遞給 Select2 之前在 JavaScript 中執行此操作：

var data = $.map(yourArrayData, function (obj) {
  obj.id = obj.id || obj.pk; // replace pk with your identifier

  return obj;
});

在你的情況下，它會是這樣的：

$(document).on("change", ".js-selector", function() {

    var options = {!! json_encode($salaries) !!};

    var data = $.map(options, function (value, key) {
        return {id: key, text: value};
    });

    $("#salary_list").empty().select2({
        data: data
    });

})

Answer 2

您的數組必須具有如下結構：

[
   [
        'id' => 2,
        'text' => "£8, Per hour"
   ],
   [
        'id' => 3,
        'text' => "£10, Per hour"
   ],
   [
        'id' => 23,
        'text' => "Up to £10000, Per annum"
   ],
   [
        'id' => 24,
        'text' => "£10,000 - £15,000, Per annum"
   ],
]

https://select2.org/data-sources/arrays

Answer 3

正如 Serhii 所說，只需在編碼之前從關聯數組中提取值：

$(document).on("change", ".js-selector", function() {

     var options = {!! json_encode(array_values($salaries)) !!};

     $("#salary_list").empty().select2({
        data: options
     });

})