Convert php array to javascript array with select2

Question

I have the following php array in a laravel variable called $salaries which is passed to a blade view:

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

In my blade view I have a drop which when changed, I want to load a select2 dropdown with the above options. Below is my code:

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

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

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

})

However nothing is getting loaded into the dropdown. So I've narrowed it down to the options data for select2 not being in the correct format.

When I output options variable to console I'm getting the following object as opposed to a javascript array?

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

How do I transform the options into correct format for the select2 data?

Remul · Accepted Answer · 2019-10-03 15:54:38Z

1

You have to transform your data to the correct format, here you can see the correct data format:

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

You could pass the array in the correct format to the view, something like:

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

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

It would give result in something like this:

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

Or you can transform the array in javascript, the Select2 documentation explains here how you can transform your data:

Select2 requires that the id property is used to uniquely identify the options that are displayed in the results list. If you use a property other than id (like pk) to uniquely identify an option, you need to map your old property to id before passing it to Select2.

If you cannot do this on your server or you are in a situation where the API cannot be changed, you can do this in JavaScript before passing it to Select2:

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

  return obj;
});

In your case it would be something like this:

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

})

edited Oct 3, 2019 at 15:54

answered Oct 3, 2019 at 15:37

Remul

8,3221 gold badge16 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

adam78 Over a year ago

i'm unable to transform on the server so how to do I loop through {2: "£8, Per hour", 3: "£10, Per hour", 23: "Up to £10000, Per annum", 24: "£10,000 - £15,000, Per annum"} with javascript to get it in correct format?

yergo Over a year ago

so this is not a php, but javascript question.

F. Mohaghegh · Accepted Answer · 2019-10-03 15:18:52Z

0

exactly as Serhii said, simply extract the values from you associative array before encoding it:

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

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

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

})

answered Oct 3, 2019 at 15:18

F. Mohaghegh

11 silver badge1 bronze badge

1 Comment

adam78 Over a year ago

they keys are important as they form the option values and the salary text is the option label.

Serhii Posternak · Accepted Answer · 2019-10-03 15:36:18Z

0

Your array must have the structure like this:

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

edited Oct 3, 2019 at 15:36

answered Oct 3, 2019 at 15:13

Serhii Posternak

5142 silver badges7 bronze badges

2 Comments

adam78 Over a year ago

the keys are important as they are the option values and the salary text is the option label

Serhii Posternak Over a year ago

So your array must have this structure: php [ ["id' => 2, "text" => "£8, Per hour"] ] select2.org/data-sources/arrays

Collectives™ on Stack Overflow

Convert php array to javascript array with select2

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related