Конвертировать массив php в массив javascript с помощью select2 - PullRequest
Новая
       3

Конвертировать массив php в массив javascript с помощью select2

0 голосов
/ 03 октября 2019

У меня есть следующий массив php в переменной laravel с именем $salaries, который передается в представление блейда: 

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?

Ответы [ 3 ]

1 голос
/ 03 октября 2019

Вы должны преобразовать ваши данные в правильный формат, здесь вы можете увидеть правильный формат данных: 

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), для уникальной идентификации опции, вам необходимо сопоставить старое свойство с id, прежде чем передавать его в Select2.

Если вы не можете сделать это на своем сервере или выв ситуации, когда 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
    });

})
0 голосов
/ 03 октября 2019

точно так же, как сказал Сергей, просто извлеките значения из вашего ассоциативного массива перед его кодированием: 

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

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

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

})
0 голосов
/ 03 октября 2019

Ваш массив должен иметь такую ​​структуру: 

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

...