Laravel array to javascript array

I want to pass/store Laravel array in JavaScript variable. I used ->all() so I get the result like this rather than object:

array:83 [▼
  0 => 1
  1 => 11
  2 => 12
  ...
]

I can access this in view using {{ $theArray }}.

However whatever I tried, I couldn't make this to javascript array.

I tried

var array = {{ $theArray }};

var array = {{{ $theArray }}};

I feel like I'm close but I couldn't figure it out

asked Oct 25, 2015 at 5:58

var app = @json($array);

Works like a charm

answered Feb 6, 2018 at 17:15

Alex AlekserAlex Alekser

1,7642 gold badges9 silver badges3 bronze badges

7

you can use json_encode()

var array = {{ json_encode($theArray) }};

or parse the json string using JSON.parse()

var array = JSON.parse('{{ json_encode($theArray) }}');

answered Oct 25, 2015 at 5:59

Pranav C BalanPranav C Balan

111k23 gold badges160 silver badges180 bronze badges

2

This works for me :)

var array =  {!! json_encode($theArray) !!};

answered Mar 15, 2019 at 18:40

1

Sometimes you may pass an array to your view with the intention of rendering it as JSON in order to initialize a JavaScript variable. For example:

However, instead of manually calling json_encode, you may use the @json Blade directive. The @json directive accepts the same arguments as PHP's json_encode function:

The @json directive is also useful for seeding Vue components or data-* attributes:

https://laravel.com/docs/5.8/blade#blade-and-javascript-frameworks

answered Jun 28, 2019 at 6:38

ZainZain

4525 silver badges14 bronze badges

you have enclodse with quotes,or use json_encode()

var array = "{{ $theArray }}";
            ^               ^

or, if the value in an array()

var array = "{{ json_encode($theArray) }}";
            ^                            ^

Without having quotes around javascript variable, it will throw you error. you can check in your console.

answered Oct 25, 2015 at 5:59

Niranjan N RajuNiranjan N Raju

12k3 gold badges21 silver badges41 bronze badges

1

this one worked for me.

let array = JSON.parse('{!! json_encode($array) !!}');

answered Jun 5, 2019 at 6:35

AjayAjay

7887 silver badges17 bronze badges

Sometimes all() is not enough to convert your Laravel collection to array. I encountered this issue trying to pass the collection of custom type objects to JS via Laravel view.

To get the array on the front end JS you have to apply Collection::values() method before all() method.

So:

// In your HTTP controller
$collection = collect([myObj1,myObj2]); // The collection filled with custom type objects.

$myArray = $collection->values()->all(); // Then converted to an array. Just `all()` is not enough;

return view('myview', $myArray);

{{-- In your myview.blade.php --}}

Then in your JS window.myArray you get an array [], not an object {}.

A Bit Of Details

This is probably happens due to the fact that when an array indexes are not ascending ordered PHP considers the indexes to be object keys, then it considers the array to be an object. Thus the transformation to an object instead of an array. Laravel collection values() resets the array keys. I suspect it applies PHP array_values() under the hood.

answered Mar 31, 2020 at 12:57

Valentine ShiValentine Shi

5,4423 gold badges41 silver badges41 bronze badges

In my case I needed a Laravel Collection to pass through as an iterable array on the JavaScript client. The following worked:

return array_values($job_summaries->toArray());

answered Aug 13, 2021 at 8:51

GrantGrant

4,8851 gold badge34 silver badges43 bronze badges

Using the blade directive @json was the simplest thing that worked for me.

Here is the full list of parameters for @json and json_encode https://www.php.net/manual/en/json.constants.php

• Both jsArray and JSON.parse() are javascript
• The blade directive is @json()
• No curly braces needed with directives

answered May 25 at 2:24

Gui LeFleaGui LeFlea

6933 silver badges9 bronze badges

Simply, escape the special characters using the blade syntax. Try this.

var array = {!! $theArray !!};

Best part, you don't need to parse it to its object form in JavaScript.

answered Aug 28, 2018 at 7:41

AmanAman

3894 silver badges12 bronze badges

Can you pass PHP array to JavaScript?

Can I put an array in an array JavaScript?

What is the correct way to JavaScript array?

How do you initialize an array in JavaScript?