Melodia
2 months ago
117
5
Vue

How do I set an end point with an array of values

Posted 2 months ago by Melodia

I used localstorage to save the product id of every product that is added to the cart.

Then I have a button called "View Order". When I click on that button, I want to view details of each product that has been added to the cart such as the title, description, image and be able to update the quantity.

The view order button calls a function which looks like the following:

view_order(){
    if (localStorage.getItem('order')) {
        try {
            this.order = JSON.parse(localStorage.getItem('order'));
            this.$store.dispatch('list_orders', this.order.length);
        } catch(e) {
            localStorage.removeItem('order');
        }

    }
    const order = this.order.map(x => x.id); //[array of order ids]

    axios.get('api/list/order/', {
        params: {
            order: order
        }
    })
    .then(res => console.log(res.data))
    .catch(err => console.log(err));

}

In web.php I have this:

Route::get('api/list/order/{order?}', '[email protected]_order');

In the OrderController I have this:

public function list_order($order = null){
    if ($order == null) {
        abort(404, 'No order was passed');
    }

    $order = explode(',', $order);
    
    $orders = DB::table('products')->whereIn('id', $order)->get();

    return $orders;
}

When I click on view order I see the following error in the console:

VM4305:1 GET http://challenge-shopping.local/api/list/order?order[]=3&order[]=2 404 (Not Found)

Please sign in or create an account to participate in this conversation.