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);
              });
        }
    }
}'

Can you add an example of how the actual posted array appears? — skribe
– skribe, Commented Jan 23, 2018 at 8:47
[{chargeType: 1, nos: "3", chargedPrice: 200, total: 600},{chargeType: 3, nos: "3", chargedPrice: 200, total: 600}]. Like this array is send through axios — RAHUL VENNEERS
– RAHUL VENNEERS, Commented Jan 23, 2018 at 8:52
when I Log::info($request->only('chargeArray')) I am getting the following result array ( 'chargeArrays' => array ( 0 => array ( 'chargeType' => 1, 'nos' => '1', 'chargedPrice' => 200, 'total' => 200, ), 1 => array ( 'chargeType' => 2, 'nos' => '2', 'chargedPrice' => 45, 'total' => 90, ), ), ) — RAHUL VENNEERS
– RAHUL VENNEERS, Commented Jan 23, 2018 at 8:58

skribe · Accepted Answer · 2018-01-23 10:47:56Z

2

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);
}

edited Jan 23, 2018 at 10:47

answered Jan 23, 2018 at 9:28

skribe

3,6254 gold badges30 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RAHUL VENNEERS Over a year ago

local.ERROR: ErrorException: Undefined index: chargeType in /home/dc/projects/quotation/app/Http/Controllers/JobController.php:27 I am getting this error

skribe Over a year ago

Sorry I could not see exactly how the request array would be returned.

RAHUL VENNEERS · Accepted Answer · 2018-01-23 10:29:27Z

1

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); 
        }

    }

answered Jan 23, 2018 at 10:29

RAHUL VENNEERS

337 bronze badges

2 Comments

skribe Over a year ago

I am glad you got it working. It is unfortunate that I gave you the work, but you posted your own answer with 90% copy and paste of my answer. If you would have added 'chargeArrays' to the ->all() function I believe it would have worked. If my code was what helped, and now workes as I have updated it, I would appreciate the credit. FYI the "only()" function I believe is new in Laravel 5.5.

RAHUL VENNEERS Over a year ago

Thanks for your effort

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related