Vue 2 Laravel 5.3 Group object by one of the column's value

Question

My project allows the clients to put items into their cart. where each item relate to a shop with the shop_id. I would want to list out the items in the cart view. However, I want these items to be grouped under a table for those that have the same shop_id. So if the client bought from 3 different shops, there will be 3 tables in the cart view where each table consists of the respective items that the client bought from that shop. Is there a good way to do this?

Here is my unfinished Cart.vue code for your reference but I dont think it can help much

<template>
    <div class="row">
    <div class="col-md-12 cart-container">
        <table class="table table-hover" v-for="cart in carts">
        <thead>
          <tr>
            <th>{{cart.shop.name}}</th> //cart includes shop by eloquent
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <div class="cart-img-wrapper">
                <img class="cart-img" :src="cart.product_choice.img1">
              </div>
            </td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        carts:{},
      }
    },
    props:[
    ],
    mounted(){
        this.getCartItems()
    },
    updated(){
    },
    methods:{
        getCartItems(){
            var vm = this
        vm.$http.get('/getCartItems/').then((response)=>{
          vm.carts = response.data
        });
        },
    },
    computed:{
    }
  }
</script>

my carts table structure:

    Schema::create('carts', function (Blueprint $table) {
        $table->increments('id');
        $table->integer('product_id')->unsigned();
        $table->integer('product_choice_id')->unsigned();
        $table->integer('user_id')->unsigned();
        $table->integer('shop_id')->unsigned();
        $table->integer('qty');
        $table->integer('complete')->default(0);
        $table->timestamps();
        $table->foreign('user_id')
                ->references('id')
                ->on('users')
                ->onDelete('cascade')
                ->onUpdate('cascade');
        $table->foreign('product_id')
                ->references('id')
                ->on('products')
                ->onDelete('cascade')
                ->onUpdate('cascade');
        $table->foreign('shop_id')
                ->references('id')
                ->on('shops')
                ->onDelete('cascade')
                ->onUpdate('cascade');
        $table->foreign('product_choice_id')
                ->references('id')
                ->on('product_choice')
                ->onDelete('cascade')
                ->onUpdate('cascade');
    });

score 0 · Answer 1 · edited May 23 '17 at 12:16

This should be solvable using a GROUP BY query to your DB. If you are using MySql you can write such queries like this:

SELECT column_name, aggregate_function(column_name)
FROM table_name
WHERE column_name operator value
GROUP BY column_name;

If you have javascript array and you want to process that, you can write a method similar to following:

var groupBy = function(xs, key) {
  return xs.reduce(function(rv, x) {
    (rv[x[key]] = rv[x[key]] || []).push(x);
    return rv;
  }, {});
};

source

However delegating such things to database is more efficient in general and less error prone.

Vue 2 Laravel 5.3 Group object by one of the column's value

1 Answers1