How to process array from vue form send through axios in laravel?

Question

Hi have a vue component as shown below. I am using an array to include dynamic number of inputs. Which is then pass through axios as a post request to a laravel function. Where it is processed and create multiple table rows based on the number of rows in that array. Array I used to pass the values is chargeArrays.
How can I process the array sent through axios from laravel function to create multiple table rows?

'

    <div class="form-group row">
    <a class="btn btn-primary col-offset-sm-8" @click="addRow">Add row</a>
        <label for="charges" class="col-sm-2 col-form-label">charges</label>
        <div class="col-sm-8 form-inline">
            <li v-for="(chargeArray,index) in chargeArrays" class="list-group-item">
                <select class="form-control" v-model="chargeArray.chargeType" @change="updatePrice(index)">
                  <option disabled value="">Please select one</option>
                  <option v-for="charge in list" v-bind:value="charge.id">{{ charge.name }}</option>
                </select>
                <input class="form-control" type="text" v-model="chargeArray.chargedPrice" @change="updateTotal(index)">
                <input class="form-control" type="text" v-model="chargeArray.nos" @change="updateTotal(index)">
                <input class="form-control" type="text" v-model="chargeArray.total" disabled>
            </li>
        </div>
    </div>
    <div class="form-group row col-sm-offset-6">
        <label class="col-form-label col-sm-3 pull-left">Grand Total</label>
        <div class="col-sm-4">
            <input type="text" v-model="grandTotal"  class="form-control" disabled>
        </div>
    </div>        
     <a class="btn btn-success" @click="formSubmit">Submit</a>



</div>

export default {
    data : function(){
        return{

            total:'',
            list:[],
            chargeArrays:[
            {chargeType:'',nos:'',chargedPrice:'',total:''}]

        }
    },
    mounted() {
        console.log('Component mounted.')
    },
    computed: {
        grandTotal:function(){
            this.total=0;
            for(var i=0;i<this.chargeArrays.length;i++){
                this.total+=this.chargeArrays[i].total;
            }
            return this.total;
        }
    },
    created(){
        this.fetchPriceList();

    },
    methods:{

        addRow: function(){
          this.chargeArrays.push({chargeType:'',nos:'',chargedPrice:'',total:''});
        },
        updatePrice:function(index){
            axios.get('/api/pricechart/'+event.target.value).then((res) => {
                this.chargeArrays[index].chargedPrice = res.data;
            });

        },
        updateTotal:function(index){

                this.chargeArrays[index].total = this.chargeArrays[index].chargedPrice*this.chargeArrays[index].nos  ;


        },
        fetchPriceList:function() {
            axios.get('/api/pricechart').then((res) => {
                this.list = res.data;
            });
        },

        formSubmit:function(){

            axios.post('/job/create',{
            chargeArrays:this.chargeArrays,


            }).then(function(response){
            console.log(response);
            }).catch(function (error) {
                console.log(error);
              });
        }
    }
}'

Answer 1

It does not look like your value names (camelCase) would match your table column names (charge_type), this is just a guess, so you need to probably loop through the array something like the following.

$charges = $request->all('chargeArrays');
foreach($charges as $i => $charge){
  $c = [
      'charge_type'   => $charge['chargeType'],
      'nos'           => $charge['nos'],
      'charged_price' => $charge['chargedPrice'],
      'total'         => $charge['total']
  ];

  // insert the data...
  DB::table('the_charge_table')->insert($c);
}

Answer 2

I got the answer by using the following loop

$priceInput=$request->only('chargeArrays');
    foreach($priceInput as $i => $chargeArray){
        foreach ($chargeArray as $j=> $charge) {
             $c = [
                  'charge_type'   => $charge['chargeType'],
                  'nos'           => $charge['nos'],
                  'charged_price' => $charge['chargedPrice'],
                  'total'         => $charge['total']
              ];
              \Log::info($c); 
        }

    }