Passing (laravel) Array in Javascript

Question

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

Solution 1

var app = @json($array);

Works like a charm

Solution 2

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) }}');

Solution 3

This works for me :)

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

Solution 4

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

Solution 5

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.

View more solutions

Comments

[senty]

htmlentities() expects parameter 1 to be string, array given

[Fai Zal Dong]

I'm not sure why I got Unexpected token if using this {{ }}. then I change to {!! !!} then this will work. maybe cuz of laravel version

[Derek Brown]

your answer was flagged as low quality because of length. Consider expanding your answer to explain how it works.

[Mateus Felipe]

Your answer is the most concise and works like the others. Don't know why it' not the selected answer. What @DerekBrown said doesn't makes sense, as the other answers also doesn't explain how works.

[Muhmmad Aziz]

{{ }} will escape the output string, hence the error. while {!! !!} doesn't, it outputs the string as is. check the documentation laravel.com/docs/5.6/blade#displaying-data

[Muhmmad Aziz]

Thumps up for this answer. It uses the laravel blade directive instead of the manual way above.

[Rafael Moura]

I learnig more one method fantastic, thanks friend work with charm

[Farid Abbas]

its working .. as its predefine method in laravel for javascript

[senty]

@MateusFelipe it was not selected answer because the OP was from 2015 and this answer is 2018, that's a nice way, and that's the version I use now everyday. Fyi, I marked it as selected answer :)

[ManuEl Magak]

worked well for me. You could also use blade helper @json($theArray) . still works the same

[Delmontee]

Yes! This is the perfect solution for passing a Laravel array directly through to javascript