Convert a Laravel Collection/Array to a Javascript Array

Question

I would like to assign an array from Laravel to a JavaScript array. I have gotten the array from my AppServiceProvider and json_decoded it like:

View::composer('*', function($view)
{
   $users = Users::all();
   $view->with(compact(users );
}

I then access my $usersArray from my javascript file like:

  var dataSet = JSON.parse({!!$users !!});

I am however getting the following error;

jQuery.Deferred exception: Unexpected token o in JSON at position 1 SyntaxError: Unexpected token o in JSON at position 1
at JSON.parse (<anonymous>)

Check the actual output in the page. What does the JS code look like? Debug it from there — Rory McCrossan, Mar 20 '19 at 09:29
Possible duplicate of [Convert php array to Javascript](https://stackoverflow.com/questions/5618925/convert-php-array-to-javascript) — Yosvel Quintero, Mar 20 '19 at 09:29
In which case case you should Google the error. It leads to this: https://stackoverflow.com/q/43217872/519413 — Rory McCrossan, Mar 20 '19 at 09:38
That new error is because you're calling `JSON.parse()` on a value which is not JSON formatted. Now you need to check the actual output in the page to debug the problem as my first comment mentioned. — Rory McCrossan, Mar 20 '19 at 09:54
@RoryMcCrossan Okay. Currently, in the console log, I am seeing jquery.min.js:2 Uncaught SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse () That is the only Javacript output I can see — gerry, Mar 20 '19 at 10:00
That's the error in the console. I mean that you actually need to view the source of the page to read the JS — Rory McCrossan, Mar 20 '19 at 10:00

Zakaria Acharki · Accepted Answer · 2019-03-21T14:52:09.213

7

Since you're encoding it in the server side, you need to decode it in the client side like:

$chequesArray = Users::all()->toJson();

var dataSet = JSON.parse({!!json_encode($chequesArray)!!});

Or also Using "base64_encode" to conserve the json format like:

$chequesArray = base64_encode(Users::all()->toJson());

var dataSet = JSON.parse(atob('{{$chequesArray}}');

The main difference comes from the use of {{ }} vs {!! !!}, the first one escapes the special chars so it will turn the quotes "" to " then the JS will be unable to parse the string (that why we can use `base64_encode``to conserve the format), the second one will conserve the format and allow the quotes what gives the JS part the ability to parse it simply.

edited Mar 21 '19 at 14:52

answered Mar 20 '19 at 09:35

Zakaria Acharki

66,747
15
75
101

Thank you for your answer. I am now getting the error "jQuery.Deferred exception: Unexpected token & in JSON at position 2 SyntaxError: Unexpected token & in JSON at position 2" – gerry Mar 20 '19 at 09:40
You're welcome, That happens because "$users" isn't an array it's a collection. – Zakaria Acharki Mar 20 '19 at 09:46
Okay. Kindlyy explain how I can convert it from an collection to an array – gerry Mar 20 '19 at 09:51
convert like this $users->toArray(); – Amy Mar 20 '19 at 09:54
I get the Laravel error "Array to string conversion" when I do var dataSet = JSON.parse({!! $users->toArray !!}); – gerry Mar 20 '19 at 09:55
I'd suggest the use of base64 to conserve the format of your JSON, check my update. – Zakaria Acharki Mar 20 '19 at 09:58
1

Thank you very much Zakaria. It works! Please please explain what just happened – gerry Mar 20 '19 at 10:04
You're welcome brother, I was playing with for a while, you could see my updated answer with too working versions. – Zakaria Acharki Mar 20 '19 at 10:17
The main difference comes from the use of "{{ }}" vs "{!! !!}", the first one escape the special chars so it will turn the quotes `""` to `"` then the JS will be unable to parse it, the second one will conserve the format and allow the quotes. – Zakaria Acharki Mar 20 '19 at 10:19
1

Ok. Noted. Thanks again Zakaria – gerry Mar 21 '19 at 14:21

score -2 · Answer 2 · answered Mar 20 '19 at 09:29

-2

var dataSet = @php $chequesArray @endphp;

answered Mar 20 '19 at 09:29

narayansharma91

2,273
1
12
20

Convert a Laravel Collection/Array to a Javascript Array

2 Answers2

Linked