Push Laravel collection in a javascript array

Question

I am new to Lavarel and I wrote this portion of code to add my collection to a javascript array and it does not seem to work.

$(document).ready(function() {

            var data = [];
            @foreach($products as $product )
                data.push({'{{ $product->id }}' : '{{ $product->name }}'});
            @endforeach

//            Im trying to get a variable which looks like this
//            data: [
//                {
//                    id: 'The ID goes here',
//                    text: 'Text to display'
//                },
//                // ... more data objects ...
//            ]
        });

Kindly help me solve this problem

Jerodev · Accepted Answer · 2017-01-10 15:57:17Z

1

It's better to create a Laravel Collection and convert this to json so javascript can read this.

var data = {{ $products->map(function ($product) { return ['id' => $product->id , 'text' => $product->name];})->toJson() }};

It would be even cleaner to generate this json string in your controller.

answered Jan 10, 2017 at 15:57

Jerodev

33.3k11 gold badges96 silver badges113 bronze badges

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

Comments

Aaron Dressler · Accepted Answer · 2017-01-10 16:10:30Z

1

Why dont you just convert the collection to JSON in your Laravel Controller:

$collectionArr = Collection::all()->toJson();

Then echo it out in the HTML:

<script>
    var jsArray = {{$collectionArr}};
</script>

Here's more info from the Laravel Site: https://laravel.com/docs/5.3/eloquent-serialization#serializing-to-json

edited Jan 10, 2017 at 16:10

answered Jan 10, 2017 at 15:57

Aaron Dressler

11810 bronze badges

Comments

apokryfos · Accepted Answer · 2017-01-10 16:21:43Z

1

You can simply write:

$(document).ready(function() {    
    var data = {!! json_encode($products) !!}; // Note the {!! !!} to not encode html entities since we'll probably have quotes in here                 
});

answered Jan 10, 2017 at 16:21

apokryfos

40.9k11 gold badges85 silver badges128 bronze badges

Collectives™ on Stack Overflow

Push Laravel collection in a javascript array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related