[Vuejs]-Use child array to get count for table

by

0👍

✅

Okay so what you need to do is transform some data. Basically change the way a certain data is stored / represented. Now the Strings are in a consistent format, so we can use a combination of string operations to get a key => value store out of it (I am going to use ES6 syntax to simplify boilerplate)

let parseString = str => {
    let pairs = str.split(',');
    let obj = {};
    pairs.forEach(pair => {
        pair = pair.split(':');
        obj[pair[0]] = pair[1];
    });
    return obj;
};

This function simply takes one of your strings, “DogType:Lab,Age:3,Name:Bowser” for example, and splits out an object such as {'DogType': 'Lab', 'Age': 3...}. Now that we have this, we can start to manipulate and group the data itself (if you’re not sure what array.map does, it basically gives a new array after running a function on each of the array’s values). 

let comboBoxPairs = data.ComboBoxPairs.map(comboBoxPair => {
    comboBoxPair.Children = comboBoxPair.Children.map(children => parseString(children));
    return comboBoxPair;
});

Now we have replaced the incomprehensible array of strings into an array of objects we can start to group. First we need to figure out a data structure. You’re grouping by dog type first, so our object’s keys are the Dog’s Type. Then we simply need to add each quantity into the dog’s type and increment a count each time the quantity is encountered.

let dogType = {};
comboBoxPairs.forEach(comboBoxPair => {
    comboBoxPair.Children.forEach(children => {
        if (typeof dogType[children.DogType] === 'undefined') {
             dogType[children.DogType] = {};
        }
        if (typeof dogType[children.DogType][comboBoxPair.Value.Key] === 'undefined') {
             dogType[children.DogType][comboBoxPair.Value.Key] = 0;
        }
        dogType[children.DogType][comboBoxPair.Value.Key]++;
   });
});

And you’re done! This gives you a Object such as :

{
    'Lab': {
        '1 Gallon': 2,
         ....
     },
};

You can then loop through this object to display the values and totals.

-1👍

Is your table example illustrative or is it meant to represent your sample data?

Your table does not seem to tally with the sample data so I am in doubt as to whether my understanding is correct?

If I can start with a generalised answer – which may not be enough but it may head you in the right direction~
1. If you can parse the data in full before seeking to output your results then you can build a summary array which makes your ‘un-ordered’ input data trivial – then presentation becomes a separate step.
2. If you have to do it in one pass – then you would normally think about sorting the data first – on the input – this is so you can handle mutt’s appearing at non-contiguous points.

Make sense?

My personal preference would be to build your running totals into a separate data structure – whether you have scenario 1 or 2 so that you can trap the increment no matter what level you find your relevant keys at within the for-in.

In short – is there any conceptual problem with building a new object for your summary?

Leave a comment