Laravel vue SUM array data inside array

Question

I have array of data which has array inside of it, in second array i need to sum one column and get the result back.

Screenshot

Code

controller

public function index()
{
  $zones = ZoneRegion::orderby('id', 'desc')->with(['areas', 'segments', 'links', 'cabels'])->get();
  return response()->json([
    'data' => $zones,
    'message' => 'Zona Wilayah berhasil diambil.'
  ]);
}

component

data() {
    return {
        regions: [],
    }
},
methods: {
    fetchRegions() {
        axios
        .get('/api/admin/zones', {
            headers: {
                Authorization: 'Bearer ' + localStorage.getItem('access_token')
            }
        })
        .then(response => {
            this.regions = response.data.data;
        })
        .catch(function (error) {
            console.log('error', error);
        });
    },
}

Any suggestion?

I posted an answer, but now I believe that you only want to sum cable lengths for each row in your data array? Or do you want total length of all rows together? — Robert Kujawa
– Robert Kujawa, Commented Apr 15, 2020 at 3:45
Let me know what you need so I can update my answer, the reduce method shall be used either way. — Robert Kujawa
– Robert Kujawa, Commented Apr 15, 2020 at 3:47
@RobertKujawa thank you, yes i only need sum for each row. i'll try your code and let you know — mafortis
– mafortis, Commented Apr 15, 2020 at 3:50

Robert Kujawa · Accepted Answer · 2020-04-15 04:08:13Z

1

You can use the js reduce method to sum all the cable lengths together.

data() {
    return {
        regions: []
    }
},
methods: {
    fetchRegions() {
        axios
        .get('/api/admin/zones', {
            headers: {
                Authorization: 'Bearer ' + localStorage.getItem('access_token')
            }
        })
        .then(response => {
            this.regions = response.data.data.map(region => ({
                ...region,
                totalCableLength: region.links.reduce((total, link) => {
                    return total + parseInt(link.cable_length);
                }, 0)
            }));
        })
        .catch(function (error) {
            console.log('error', error);
        });
    }
}

This will save your regions just like you retrieved them from the server, but it will add the sum of all the links cable length to each region, it will be keyed by 'totalCableLength'.

edited Apr 15, 2020 at 4:08

answered Apr 15, 2020 at 3:44

Robert Kujawa

9977 silver badges22 bronze badges

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

12 Comments

mafortis Over a year ago

Hi, I've tried your code in component it does return the result but as i need to use it in my table it shows nothing (you know tables are looped, so i think this getCableLength(data) somehow should be pushed to this.regions maybe?)

mafortis Over a year ago

i think your code sum all values at once, what i'm looking for is row based so let say (row 1 = 1000 & row 2 = 1500) but what i get now is total 2500

Robert Kujawa Over a year ago

I updated my answer, so you can retrieve your total simply by looping through your regions array and accessing region.totalCableLength.

Robert Kujawa Over a year ago

Sorry, my bad, remove the semicolon. I update my answer again.

mafortis Over a year ago

should be }, 0) })); less 1 ) before ;

|

Collectives™ on Stack Overflow

Laravel vue SUM array data inside array

Screenshot

Code

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Screenshot

Code

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related