Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

david001's avatar

session data not displayed in vue for loop

I have some data in session, i got it in the following ways


public function listProduct(Request $request){
        $product = session()->get('product');
       
        return $product;
    }

data displayed by above method is in below format


[
"{"id":2,"name":"Marlene Reichert","description":"Debitis asperiores sed sit assumenda unde quo natus. Consequatur est labore tenetur quae. Eius distinctio ea omnis aspernatur porro earum quae.","category_id":3,"price":76,"image":"http://loremflickr.com/400/300?random=71","created_at":"2019-07-16 10:12:27","updated_at":"2019-07-16 10:12:27"}",
"{"id":1,"name":"Keyshawn McDermott Sr.","description":"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.","category_id":1,"price":59,"image":"http://loremflickr.com/400/300?random=36","created_at":"2019-07-16 10:12:27","updated_at":"2019-07-16 10:12:27"}",
"{"id":1,"name":"Keyshawn McDermott Sr.","description":"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.","category_id":1,"price":59,"image":"http://loremflickr.com/400/300?random=36","created_at":"2019-07-16 10:12:27","updated_at":"2019-07-16 10:12:27"}",
"{"id":1,"name":"Keyshawn McDermott Sr.","description":"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.","category_id":1,"price":59,"image":"http://loremflickr.com/400/300?random=36","created_at":"2019-07-16 10:12:27","updated_at":"2019-07-16 10:12:27"}",
"{"id":1,"name":"Keyshawn McDermott Sr.","description":"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.","category_id":1,"price":59,"image":"http://loremflickr.com/400/300?random=36","created_at":"2019-07-16 10:12:27","updated_at":"2019-07-16 10:12:27"}",
"{"id":1,"name":"Keyshawn McDermott Sr.","description":"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.","category_id":1,"price":59,"image":"http://loremflickr.com/400/300?random=36","created_at":"2019-07-16 10:12:27","updated_at":"2019-07-16 10:12:27"}",
"{"id":1,"name":"Keyshawn McDermott Sr.","description":"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.","category_id":1,"price":59,"image":"http://loremflickr.com/400/300?random=36","created_at":"2019-07-16 10:12:27","updated_at":"2019-07-16 10:12:27"}",
"{"id":1,"name":"Keyshawn McDermott Sr.","description":"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.","category_id":1,"price":59,"image":"http://loremflickr.com/400/300?random=36","created_at":"2019-07-16 10:12:27","updated_at":"2019-07-16 10:12:27"}",
"{"id":1,"name":"Keyshawn McDermott Sr.","description":"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.","category_id":1,"price":59,"image":"http://loremflickr.com/400/300?random=36","created_at":"2019-07-16 10:12:27","updated_at":"2019-07-16 10:12:27"}",
"{"id":1,"name":"Keyshawn McDermott Sr.","description":"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.","category_id":1,"price":59,"image":"http://loremflickr.com/400/300?random=36","created_at":"2019-07-16 10:12:27","updated_at":"2019-07-16 10:12:27"}",]

in vue js : part of code

<script>
    export default {

        data:function(){
            return {
               
                lists:[]// everything is pushed in lists array

            }

        },

in same file

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header"></div>

                    <div class="card-body" v-for="list in lists">
                        {{list.name}}

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

Problem: v-for won't display any data . However if i do {{lists}} it shows data

and moreover, if i changed my controller to following

//Now getting data from database products table not from session()
public function listProduct(Request $request){
        $product = Product::get();
       
        return $product;
    }

Now data is in below format

[
{
id: 1,
name: "Keyshawn McDermott Sr.",
description: "Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.",
category_id: 1,
price: 59,
image: "http://loremflickr.com/400/300?random=36",
created_at: "2019-07-16 10:12:27",
updated_at: "2019-07-16 10:12:27"
},
{
id: 2,
name: "Marlene Reichert",
description: "Debitis asperiores sed sit assumenda unde quo natus. Consequatur est labore tenetur quae. Eius distinctio ea omnis aspernatur porro earum quae.",
category_id: 3,
price: 76,
image: "http://loremflickr.com/400/300?random=71",
created_at: "2019-07-16 10:12:27",
updated_at: "2019-07-16 10:12:27"
}
]

Now v-fordisplay the data. But it won't display data they are fetched form session. i did json_decode() it didn;t worked.

I think my Session data are not in json format. Any help would be greatly appreciated

0 likes
18 replies
aurawindsurfing's avatar

Hi @david001

The example that works for you is a collection. The example that does not work is most likely just a key => value array.

What you need to do is not to try to json_decode it but to json_encode it. This way you will turn it into json and Vue will be able to work with that data.

Hope this helps!

david001's avatar

i did json_encode(), it didn't worked

aurawindsurfing's avatar

Try

$product = json_encode(session()->get('product');

also in your Vue do console.log(product) and see what you get.

steve_laracasts's avatar

the first data dump looks odd to me, it's like each array is enclosed in a string:

[
"{"id":2,"name":"Marlene Reichert", etc.}",
]

I would expect to see:

[
{"id":2,"name":"Marlene Reichert", etc.},
]

So perhaps the problem is how you are adding the data to the session variable?

I am also wondering why you are storing this in a session, seems to me that this is application data, not session data and should be stored and retrieved from a database rather than a session. But maybe you have your reasons ;)

david001's avatar

Hi @ke i am making shopping cart so need to store in session

1 like
david001's avatar

@aurawindsurfing @ my controller is


public function listProduct(Request $request){
        $product = json_encode(session()->get('product'));
        return $product;
    }

in vue component :


<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Cart Component</div>
                    <div class="card-body" v-for="list in lists">
                        {{list}}// it display data
  //but{{list.name}}// don't show data

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

if i use only {{list}} i get following, but {{list.name}} return nothing



{"id":2,"name":"Marlene Reichert","description":"Debitis asperiores sed sit assumenda unde quo natus. Consequatur est labore tenetur quae. Eius distinctio ea omnis aspernatur porro earum quae.","category_id":3,"price":76,"image":"http://loremflickr.com/400/300?random=71","created_at":"2019-07-16 10:12:27","updated_at":"2019-07-16 10:12:27"}
david001's avatar

@kel_ controller to add product

//store in session
public function StoreInCart(Request $request) {
        //dd($request->all());
        session()->push('product', $request->product);
        return session('product');
        
    }
//get product from session
public function listProduct(Request $request){
        $product = json_encode(session()->get('product'));
        return $product;
    }

in vue

      
    <div v-for="product in products">
          <div class="card" >
            
                <div class="card-body">
                     
                        <p>{{product.price}}</p>
                        <p>{{product.category_id}}</p>
                    </div>

 <button class="btn btn-primary" @click="addProductToCart(product)">Add to cart</button>
</div>

methods:{


            addProductToCart(product){
            var app = this;


                axios.get('/cart',{

                     params: {
                        product: product
                    }

                }).then((response)=>{
                   
            });
steve_laracasts's avatar

Have a look at the Laravel docs Pushing To Array Session Values:

https://laravel.com/docs/5.8/session

edit: I would go through each stage and make sure that all the data at every step of the way is how I expect it to be, it looks to me as though you are creating a string rather than an array, I can't say for sure without looking at it in detail and trying it out. Anyway, this is what I would do next to resolve this issue.

steve_laracasts's avatar

Just had a little brainwave - what do you get when you output

{{ list }}}

That should reveal what your issue with this code is ;)

david001's avatar

@kel_ This {{list}} gives following data

{{list}}
                </div>

{"id":1,"name":"Keyshawn McDermott Sr.","description":"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.","category_id":1,"price":59,"image":"http://loremflickr.com/400/300?random=36","created_at":"2019-07-16 10:12:27","updated_at":"2019-07-16 10:12:27"}
{"id":2,"name":"Marlene Reichert","description":"Debitis asperiores sed sit assumenda unde quo natus. Consequatur est labore tenetur quae. Eius distinctio ea omnis aspernatur porro earum quae.","category_id":3,"price":76,"image":"http://loremflickr.com/400/300?random=71","created_at":"2019-07-16 10:12:27","updated_at":"2019-07-16 10:12:27"}
{"id":1,"name":"Keyshawn McDermott Sr.","description":"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.","category_id":1,"price":59,"image":"http://loremflickr.com/400/300?random=36","created_at":"2019-07-16 10:12:27","updated_at":"2019-07-16 10:12:27"}
{"id":1,"name":"Keyshawn McDermott Sr.","description":"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.","category_id":1,"price":59,"image":"http://loremflickr.com/400/300?random=36","created_at":"2019-07-16 10:12:27","updated_at":"2019-07-16 10:12:27"}
{"id":2,"name":"Marlene Reichert","description":"Debitis asperiores sed sit assumenda unde quo natus. Consequatur est labore tenetur quae. Eius distinctio ea omnis aspernatur porro earum quae.","category_id":3,"price":76,"image":"http://loremflickr.com/400/300?random=71","created_at":"2019-07-16 10:12:27","updated_at":"2019-07-16 10:12:27"}

steve_laracasts's avatar

There you go - that's why it's not working when you try list.name!

Try something like:

<div class="card-body" v-for="product in lists.products">
                        {{ product.name}}
</div>
david001's avatar

@kel_ i got blank page ,no any result

in vue tool i have following array


lists:Array[7]
0:"{"id":1,"name":"Keyshawn McDermott Sr.","description":"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.","category_id":1,"price":59,"image":"http://loremflickr.com/400/300?random=36","created_at":"2019-07-16 10:12:27","updated_at":"2019-07-16 10:12:27"}"
1:"{"id":2,"name":"Marlene Reichert","description":"Debitis asperiores sed sit assumenda unde quo natus. Consequatur est labore tenetur quae. Eius distinctio ea omnis aspernatur porro earum quae.","category_id":3,"price":76,"image":"http://loremflickr.com/400/300?random=71","created_at":"2019-07-16 10:12:27","updated_at":"2019-07-16 10:12:27"}"
2:"{"id":1,"name":"Keyshawn McDermott Sr.","description":"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.","category_id":1,"price":59,"image":"http://loremflickr.com/400/300?random=36","created_at":"2019-07-16 10:12:27","updated_at":"2019-07-16 10:12:27"}"
3:"{"id":1,"name":"Keyshawn McDermott Sr.","description":"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.","category_id":1,"price":59,"image":"http://loremflickr.com/400/300?random=36","created_at":"2019-07-16 10:12:27","updated_at":"2019-07-16 10:12:27"}"
4:"{"id":2,"name":"Marlene Reichert","description":"Debitis asperiores sed sit assumenda unde quo natus. Consequatur est labore tenetur quae. Eius distinctio ea omnis aspernatur porro earum quae.","category_id":3,"price":76,"image":"http://loremflickr.com/400/300?random=71","created_at":"2019-07-16 10:12:27","updated_at":"2019-07-16 10:12:27"}"
5:"{"id":18,"name":"Heidi Kuhlman","description":"Eveniet et dolorum aut magnam ut amet reprehenderit eveniet. Nihil incidunt voluptas aut amet et.","category_id":7,"price":274,"image":"http://loremflickr.com/400/300?random=2","created_at":"2019-07-16 10:12:27","updated_at":"2019-07-16 10:12:27"}"

and when i do {{lists}} i get following

[ "{\"id\":1,\"name\":\"Keyshawn McDermott Sr.\",\"description\":\"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.\",\"category_id\":1,\"price\":59,\"image\":\"http://loremflickr.com/400/300?random=36\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":2,\"name\":\"Marlene Reichert\",\"description\":\"Debitis asperiores sed sit assumenda unde quo natus. Consequatur est labore tenetur quae. Eius distinctio ea omnis aspernatur porro earum quae.\",\"category_id\":3,\"price\":76,\"image\":\"http://loremflickr.com/400/300?random=71\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":1,\"name\":\"Keyshawn McDermott Sr.\",\"description\":\"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.\",\"category_id\":1,\"price\":59,\"image\":\"http://loremflickr.com/400/300?random=36\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":1,\"name\":\"Keyshawn McDermott Sr.\",\"description\":\"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.\",\"category_id\":1,\"price\":59,\"image\":\"http://loremflickr.com/400/300?random=36\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":2,\"name\":\"Marlene Reichert\",\"description\":\"Debitis asperiores sed sit assumenda unde quo natus. Consequatur est labore tenetur quae. Eius distinctio ea omnis aspernatur porro earum quae.\",\"category_id\":3,\"price\":76,\"image\":\"http://loremflickr.com/400/300?random=71\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":18,\"name\":\"Heidi Kuhlman\",\"description\":\"Eveniet et dolorum aut magnam ut amet reprehenderit eveniet. Nihil incidunt voluptas aut amet et.\",\"category_id\":7,\"price\":274,\"image\":\"http://loremflickr.com/400/300?random=2\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":17,\"name\":\"Miss Marianne Kuhlman\",\"description\":\"Dignissimos vitae distinctio voluptatem reiciendis. Et expedita consequatur necessitatibus quisquam qui distinctio ut.\",\"category_id\":5,\"price\":92,\"image\":\"http://loremflickr.com/400/300?random=2\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}" ]
[ "{\"id\":1,\"name\":\"Keyshawn McDermott Sr.\",\"description\":\"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.\",\"category_id\":1,\"price\":59,\"image\":\"http://loremflickr.com/400/300?random=36\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":2,\"name\":\"Marlene Reichert\",\"description\":\"Debitis asperiores sed sit assumenda unde quo natus. Consequatur est labore tenetur quae. Eius distinctio ea omnis aspernatur porro earum quae.\",\"category_id\":3,\"price\":76,\"image\":\"http://loremflickr.com/400/300?random=71\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":1,\"name\":\"Keyshawn McDermott Sr.\",\"description\":\"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.\",\"category_id\":1,\"price\":59,\"image\":\"http://loremflickr.com/400/300?random=36\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":1,\"name\":\"Keyshawn McDermott Sr.\",\"description\":\"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.\",\"category_id\":1,\"price\":59,\"image\":\"http://loremflickr.com/400/300?random=36\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":2,\"name\":\"Marlene Reichert\",\"description\":\"Debitis asperiores sed sit assumenda unde quo natus. Consequatur est labore tenetur quae. Eius distinctio ea omnis aspernatur porro earum quae.\",\"category_id\":3,\"price\":76,\"image\":\"http://loremflickr.com/400/300?random=71\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":18,\"name\":\"Heidi Kuhlman\",\"description\":\"Eveniet et dolorum aut magnam ut amet reprehenderit eveniet. Nihil incidunt voluptas aut amet et.\",\"category_id\":7,\"price\":274,\"image\":\"http://loremflickr.com/400/300?random=2\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":17,\"name\":\"Miss Marianne Kuhlman\",\"description\":\"Dignissimos vitae distinctio voluptatem reiciendis. Et expedita consequatur necessitatibus quisquam qui distinctio ut.\",\"category_id\":5,\"price\":92,\"image\":\"http://loremflickr.com/400/300?random=2\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}" ]
[ "{\"id\":1,\"name\":\"Keyshawn McDermott Sr.\",\"description\":\"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.\",\"category_id\":1,\"price\":59,\"image\":\"http://loremflickr.com/400/300?random=36\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":2,\"name\":\"Marlene Reichert\",\"description\":\"Debitis asperiores sed sit assumenda unde quo natus. Consequatur est labore tenetur quae. Eius distinctio ea omnis aspernatur porro earum quae.\",\"category_id\":3,\"price\":76,\"image\":\"http://loremflickr.com/400/300?random=71\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":1,\"name\":\"Keyshawn McDermott Sr.\",\"description\":\"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.\",\"category_id\":1,\"price\":59,\"image\":\"http://loremflickr.com/400/300?random=36\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":1,\"name\":\"Keyshawn McDermott Sr.\",\"description\":\"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.\",\"category_id\":1,\"price\":59,\"image\":\"http://loremflickr.com/400/300?random=36\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":2,\"name\":\"Marlene Reichert\",\"description\":\"Debitis asperiores sed sit assumenda unde quo natus. Consequatur est labore tenetur quae. Eius distinctio ea omnis aspernatur porro earum quae.\",\"category_id\":3,\"price\":76,\"image\":\"http://loremflickr.com/400/300?random=71\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":18,\"name\":\"Heidi Kuhlman\",\"description\":\"Eveniet et dolorum aut magnam ut amet reprehenderit eveniet. Nihil incidunt voluptas aut amet et.\",\"category_id\":7,\"price\":274,\"image\":\"http://loremflickr.com/400/300?random=2\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":17,\"name\":\"Miss Marianne Kuhlman\",\"description\":\"Dignissimos vitae distinctio voluptatem reiciendis. Et expedita consequatur necessitatibus quisquam qui distinctio ut.\",\"category_id\":5,\"price\":92,\"image\":\"http://loremflickr.com/400/300?random=2\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}" ]
[ "{\"id\":1,\"name\":\"Keyshawn McDermott Sr.\",\"description\":\"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.\",\"category_id\":1,\"price\":59,\"image\":\"http://loremflickr.com/400/300?random=36\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":2,\"name\":\"Marlene Reichert\",\"description\":\"Debitis asperiores sed sit assumenda unde quo natus. Consequatur est labore tenetur quae. Eius distinctio ea omnis aspernatur porro earum quae.\",\"category_id\":3,\"price\":76,\"image\":\"http://loremflickr.com/400/300?random=71\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":1,\"name\":\"Keyshawn McDermott Sr.\",\"description\":\"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.\",\"category_id\":1,\"price\":59,\"image\":\"http://loremflickr.com/400/300?random=36\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":1,\"name\":\"Keyshawn McDermott Sr.\",\"description\":\"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.\",\"category_id\":1,\"price\":59,\"image\":\"http://loremflickr.com/400/300?random=36\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":2,\"name\":\"Marlene Reichert\",\"description\":\"Debitis asperiores sed sit assumenda unde quo natus. Consequatur est labore tenetur quae. Eius distinctio ea omnis aspernatur porro earum quae.\",\"category_id\":3,\"price\":76,\"image\":\"http://loremflickr.com/400/300?random=71\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":18,\"name\":\"Heidi Kuhlman\",\"description\":\"Eveniet et dolorum aut magnam ut amet reprehenderit eveniet. Nihil incidunt voluptas aut amet et.\",\"category_id\":7,\"price\":274,\"image\":\"http://loremflickr.com/400/300?random=2\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":17,\"name\":\"Miss Marianne Kuhlman\",\"description\":\"Dignissimos vitae distinctio voluptatem reiciendis. Et expedita consequatur necessitatibus quisquam qui distinctio ut.\",\"category_id\":5,\"price\":92,\"image\":\"http://loremflickr.com/400/300?random=2\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}" ]
[ "{\"id\":1,\"name\":\"Keyshawn McDermott Sr.\",\"description\":\"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.\",\"category_id\":1,\"price\":59,\"image\":\"http://loremflickr.com/400/300?random=36\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":2,\"name\":\"Marlene Reichert\",\"description\":\"Debitis asperiores sed sit assumenda unde quo natus. Consequatur est labore tenetur quae. Eius distinctio ea omnis aspernatur porro earum quae.\",\"category_id\":3,\"price\":76,\"image\":\"http://loremflickr.com/400/300?random=71\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":1,\"name\":\"Keyshawn McDermott Sr.\",\"description\":\"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.\",\"category_id\":1,\"price\":59,\"image\":\"http://loremflickr.com/400/300?random=36\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":1,\"name\":\"Keyshawn McDermott Sr.\",\"description\":\"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.\",\"category_id\":1,\"price\":59,\"image\":\"http://loremflickr.com/400/300?random=36\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":2,\"name\":\"Marlene Reichert\",\"description\":\"Debitis asperiores sed sit assumenda unde quo natus. Consequatur est labore tenetur quae. Eius distinctio ea omnis aspernatur porro earum quae.\",\"category_id\":3,\"price\":76,\"image\":\"http://loremflickr.com/400/300?random=71\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":18,\"name\":\"Heidi Kuhlman\",\"description\":\"Eveniet et dolorum aut magnam ut amet reprehenderit eveniet. Nihil incidunt voluptas aut amet et.\",\"category_id\":7,\"price\":274,\"image\":\"http://loremflickr.com/400/300?random=2\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":17,\"name\":\"Miss Marianne Kuhlman\",\"description\":\"Dignissimos vitae distinctio voluptatem reiciendis. Et expedita consequatur necessitatibus quisquam qui distinctio ut.\",\"category_id\":5,\"price\":92,\"image\":\"http://loremflickr.com/400/300?random=2\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}" ]
[ "{\"id\":1,\"name\":\"Keyshawn McDermott Sr.\",\"description\":\"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.\",\"category_id\":1,\"price\":59,\"image\":\"http://loremflickr.com/400/300?random=36\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":2,\"name\":\"Marlene Reichert\",\"description\":\"Debitis asperiores sed sit assumenda unde quo natus. Consequatur est labore tenetur quae. Eius distinctio ea omnis aspernatur porro earum quae.\",\"category_id\":3,\"price\":76,\"image\":\"http://loremflickr.com/400/300?random=71\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":1,\"name\":\"Keyshawn McDermott Sr.\",\"description\":\"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.\",\"category_id\":1,\"price\":59,\"image\":\"http://loremflickr.com/400/300?random=36\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":1,\"name\":\"Keyshawn McDermott Sr.\",\"description\":\"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.\",\"category_id\":1,\"price\":59,\"image\":\"http://loremflickr.com/400/300?random=36\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":2,\"name\":\"Marlene Reichert\",\"description\":\"Debitis asperiores sed sit assumenda unde quo natus. Consequatur est labore tenetur quae. Eius distinctio ea omnis aspernatur porro earum quae.\",\"category_id\":3,\"price\":76,\"image\":\"http://loremflickr.com/400/300?random=71\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":18,\"name\":\"Heidi Kuhlman\",\"description\":\"Eveniet et dolorum aut magnam ut amet reprehenderit eveniet. Nihil incidunt voluptas aut amet et.\",\"category_id\":7,\"price\":274,\"image\":\"http://loremflickr.com/400/300?random=2\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":17,\"name\":\"Miss Marianne Kuhlman\",\"description\":\"Dignissimos vitae distinctio voluptatem reiciendis. Et expedita consequatur necessitatibus quisquam qui distinctio ut.\",\"category_id\":5,\"price\":92,\"image\":\"http://loremflickr.com/400/300?random=2\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}" ]
[ "{\"id\":1,\"name\":\"Keyshawn McDermott Sr.\",\"description\":\"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.\",\"category_id\":1,\"price\":59,\"image\":\"http://loremflickr.com/400/300?random=36\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":2,\"name\":\"Marlene Reichert\",\"description\":\"Debitis asperiores sed sit assumenda unde quo natus. Consequatur est labore tenetur quae. Eius distinctio ea omnis aspernatur porro earum quae.\",\"category_id\":3,\"price\":76,\"image\":\"http://loremflickr.com/400/300?random=71\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":1,\"name\":\"Keyshawn McDermott Sr.\",\"description\":\"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.\",\"category_id\":1,\"price\":59,\"image\":\"http://loremflickr.com/400/300?random=36\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":1,\"name\":\"Keyshawn McDermott Sr.\",\"description\":\"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.\",\"category_id\":1,\"price\":59,\"image\":\"http://loremflickr.com/400/300?random=36\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":2,\"name\":\"Marlene Reichert\",\"description\":\"Debitis asperiores sed sit assumenda unde quo natus. Consequatur est labore tenetur quae. Eius distinctio ea omnis aspernatur porro earum quae.\",\"category_id\":3,\"price\":76,\"image\":\"http://loremflickr.com/400/300?random=71\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":18,\"name\":\"Heidi Kuhlman\",\"description\":\"Eveniet et dolorum aut magnam ut amet reprehenderit eveniet. Nihil incidunt voluptas aut amet et.\",\"category_id\":7,\"price\":274,\"image\":\"http://loremflickr.com/400/300?random=2\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}", "{\"id\":17,\"name\":\"Miss Marianne Kuhlman\",\"description\":\"Dignissimos vitae distinctio voluptatem reiciendis. Et expedita consequatur necessitatibus quisquam qui distinctio ut.\",\"category_id\":5,\"price\":92,\"image\":\"http://loremflickr.com/400/300?random=2\",\"created_at\":\"2019-07-16 10:12:27\",\"updated_at\":\"2019-07-16 10:12:27\"}" ]

when i do {{product}} i got

{"id":1,"name":"Keyshawn McDermott Sr.","description":"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.","category_id":1,"price":59,"image":"http://loremflickr.com/400/300?random=36","created_at":"2019-07-16 10:12:27","updated_at":"2019-07-16 10:12:27"}
{"id":2,"name":"Marlene Reichert","description":"Debitis asperiores sed sit assumenda unde quo natus. Consequatur est labore tenetur quae. Eius distinctio ea omnis aspernatur porro earum quae.","category_id":3,"price":76,"image":"http://loremflickr.com/400/300?random=71","created_at":"2019-07-16 10:12:27","updated_at":"2019-07-16 10:12:27"}
{"id":1,"name":"Keyshawn McDermott Sr.","description":"Error aut quia id dolorem est aut doloribus nesciunt. Quod nihil tenetur ea id voluptas molestias id. Debitis amet dolor est fugiat sed autem.","category_id":1,"price":59,"image":"http://loremflickr.com/400/300?random=36","created_at":"2019-07-16 10:12:27","updated_at":"2019-07-16 10:12:27"}
steve_laracasts's avatar

Same thing... Your Vue tool is showing an array containing 7 elements each comprising one string element that just looks like an array - it isn't! You're not going to get anywhere until you fix that!

I still haven't tried to replicate this, but it still looks to me like you need to push an array to your session variable, not a string!!

Lists is escaping the string in each element of the array which is why you get all the backslashes. It's also confusing the structure because it's a string. I am amazed it works at all actually :)

Product is doing it's best to try and make an array out of these crazy strings, but it's messed up because it was never a proper array of arrays to start with.

Quick and dirty test - instead of making a call to your controller function, just copy and paste the content from the vue tool into your lists array in your Vue component. and remove the enclosing quotes. Then your template will work, then you can move on to fixing how you're creating your array in the first place.

...

It's 32 degrees here and I've just taken delivery of 7m3 of wood for the winter and had to store it all in the shed before the rain comes - I am melting heh!

1 like
jlrdw's avatar

OP couldn't you just do

[ "{\"id\":1,\"name\":\"Keyshawn McDermott Sr.\",\"description\":\"Error aut quia id 
// more

rather than putting that much in one reply. Some Android devices really bog down.

1 like
steve_laracasts's avatar

p.s. you're nearly there, don't give up!! Once you have got this you won't have to ever fight with it again ;)

1 like
david001's avatar
david001
OP
Best Answer
Level 5

using json_decode() This solved $request->session()->push('product',json_decode($request->product));

1 like

Please or to participate in this conversation.