Sum of all loop values | Vuejs | Javascript | Element table

Question

Looping the list of values in element.io table. I need to display the sum of list of weights. I am unable to sum all the weight values.

var val= [ 
  { 
    "NmVehiclePlanning.deliveryBranch": "Madurai", 
    "NmVehiclePlanning.deliveryCity": "Madurai", 
    "NmVehiclePlanning.weight": 30106 
  }, 
  { 
    "NmVehiclePlanning.deliveryBranch": "Madurai", 
    "NmVehiclePlanning.deliveryCity": "Virudhunagar", 
    "NmVehiclePlanning.weight": 3498 
  }, 
  { 
    "NmVehiclePlanning.deliveryBranch": "Madurai", 
    "NmVehiclePlanning.deliveryCity": "KANYAKUMARI", 
    "NmVehiclePlanning.weight": 500 
  },  ]

The above data is my json data. Need to sum of all (Key name: NmVehiclePlanning.weight)

<el-table-column label="weight">
    <template slot-scope="scope">
        <span v-for="data in scope.row.details">
            {{ data['NmVehiclePlanning.weight'] }}
        </span>
     </template>
</el-table-column>

Received value is

30106 3498 500

Expected value is

Tech Key · Accepted Answer · 2019-09-30 11:05:21Z

1

Try with this. Hope it will work

<el-table-column label="weight">
    <template slot-scope="scope">
        {{ calculateSum(scope.row.details) }}
    </template>
</el-table-column>

Add this function in your script.

calculateSum(val){
    var sum = 0;
    for(let value in val){
        sum += val[value]['NmVehiclePlanning.weight']
    }
    return sum;
},

answered Sep 30, 2019 at 11:05

Tech Key

1012 bronze badges

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

Comments

Ali Khan · Accepted Answer · 2019-09-30 10:49:13Z

1

I think you need to calculate this value in your javaScript and then display the sum.

calculateSum(){
    var sum = 0;
    for(let value in val){
        sum += value['NmVehiclePlanning.weight']
    }
    return sum;
}

answered Sep 30, 2019 at 10:49

Ali Khan

1101 silver badge8 bronze badges

Collectives™ on Stack Overflow

Sum of all loop values | Vuejs | Javascript | Element table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related