使用select2将php数组转换为javascript数组

我在一个名为

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

当我将options变量输出到控制台时，我得到的是以下对象，而不是javascript数组

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

---

如何将选项转换为select2数据的正确格式？

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

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

$(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
    });

})

[
[
'id'=>2，
“文本”=>“每小时8英镑”
],
[
'id'=>3，
“文本”=>“每小时10英镑”
],
[
“id”=>23，
“文本”=>“每年不超过10000英镑”
],
[
“id”=>24，
“文本”=>“每年10000-15000英镑”
],
]

---

正如Serhii所说，只需从关联数组中提取值，然后再对其进行编码：

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

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

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

})

---

您必须将数据转换为正确的格式，您可以看到正确的数据格式：

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"
  ]
]

$(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
    });

})

或者可以在javascript中转换数组，Select2文档解释了如何转换数据：

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

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

在您的情况下，可能是这样的：

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

$(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
    });

})

---

键很重要，因为它们是选项值，薪资文本是选项标签，所以数组必须具有以下结构：

php[[“id”=>2，“text”=>“£8，每小时”]]

这些键很重要，因为它们构成了选项值，薪资文本是选项标签。我无法在服务器上转换，因此如何循环执行

{2:“8英镑/小时”，3:“10英镑/小时”，23:“每年最多10000英镑”，24:“10000英镑-15000英镑/年”}

使用javascript获得正确的格式？所以这不是php问题，而是javascript问题。