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
var app = @json($array);
Works like a charm
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) }}');
Unexpected token if using this {{ }}. then I change to {!! !!} then this will work. maybe cuz of laravel versionThis works for me :)
var array = {!! json_encode($theArray) !!};
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:
<script>
var app = <?php echo json_encode($array); ?>;
</script>
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:
<script>
var app = @json($array);
var app = @json($array, JSON_PRETTY_PRINT);
</script>
The @json directive is also useful for seeding Vue components or data-* attributes:
<example-component :some-prop='@json($array)'></example-component>
https://laravel.com/docs/5.8/blade#blade-and-javascript-frameworks
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.
htmlentities() expects parameter 1 to be string, array givenUsing the blade directive @json was the simplest thing that worked for me.
<script>
var jsArray = JSON.parse(@json($phpArray, JSON_PRETTY_PRINT));
</script>
Here is the full list of parameters for @json and json_encode https://www.php.net/manual/en/json.constants.php
jsArray and JSON.parse() are javascript@json()
this one worked for me.
let array = JSON.parse('{!! json_encode($array) !!}');
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 --}}
<script>window.myArray= @json($myArray)</script>
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.
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());
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.
