使用 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 的选项数据格式不正确。

当我将选项变量输出到控制台时，我得到的是以下对象而不是 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

你必须把你的数据转换成正确的格式，here你可以看到正确的数据格式：

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 文档解释了 here 如何转换数据：

Select2 要求使用 id 属性来唯一标识 结果列表中显示的选项。如果你使用一个属性 除了 id（如 pk）来唯一标识一个选项，您需要 在将旧属性传递给 Select2 之前将其映射到 id。

如果您无法在服务器上执行此操作，或者您处于以下情况 API 无法更改，您可以在 JavaScript 之前执行此操作 将其传递给 Select2：

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

正如 Serhii 所说，只需在编码之前从关联数组中提取值：

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

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

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

})

Answer 3

您的数组必须具有如下结构：

[
   [
        '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