Get Response: --> [object Object]

When I selected the date. I see in the console

Get Response: --> [object Object]

I want to get a date and product id, and warranty id.

<script>
    let product_id = "{{ $product->id}}";
    let warranty_id= "{{ $warranty->id}}";
    const app = new Vue({
        el: '#app',
        data: {
            dates: [],
            products: [],
            warranties: [],
            date: '',
            product_id:  product_id,
            warranty_id: warranty_id,
        },
        watch: {
            date(newDate) {
                const showType = document.getElementById('showType');
                showType.textContent = newDate;
                axios.get('{{ route('product.warranty.save') }}', {
                    date: newDate,
                    product_id: this.product_id,
                    warranty_id: this.warranty_id,
                })
                    .then(response => {
                        console.log('Get Response: -->  ' + response.data);
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        },
        components: {
            DatePicker: VuePersianDatetimePicker
        }
    });
</script>

Controller.php

public function save(Request $request)
{
    $product_id = $request->post('product_id');
    $warranty_id = $request->post('warranty_id');
    $date = $request->post('date');
    return response()->json([
        'product_id' => $product_id,
        'warranty_id' => $warranty_id,
        'date' => $date,
    ]);

LaryAI

3 years ago

Best Answer

Level 58

The issue is that the response is an object and not a string. To see the contents of the response, you can use console.log(JSON.stringify(response.data)) instead of console.log('Get Response: --> ' + response.data).

Additionally, the axios.get method should be changed to axios.post since you are sending data in the request body.

Here's the updated code:

<script>
    let product_id = "{{ $product->id }}";
    let warranty_id = "{{ $warranty->id }}";
    const app = new Vue({
        el: '#app',
        data: {
            dates: [],
            products: [],
            warranties: [],
            date: '',
            product_id: product_id,
            warranty_id: warranty_id,
        },
        watch: {
            date(newDate) {
                const showType = document.getElementById('showType');
                showType.textContent = newDate;
                axios.post('{{ route('product.warranty.save') }}', {
                    date: newDate,
                    product_id: this.product_id,
                    warranty_id: this.warranty_id,
                })
                    .then(response => {
                        console.log(JSON.stringify(response.data));
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        },
        components: {
            DatePicker: VuePersianDatetimePicker
        }
    });
</script>

1 like

Please or to participate in this conversation.