Utilize the child array to retrieve the total number in the table

Question

Utilize the child array to retrieve the total number in the table

Dealing with JSON data, my task is to count the number of strings within a specific child element and then group them by part of the string to create a table. While this may seem like a confusing and daunting challenge, it's what we need to accomplish.

Admittedly, I'm not entirely sure where to begin with this. Even displaying the strings accurately posed quite a challenge.

Below is a snippet of example JSON that I'm working with:

"DataValues": [
 {
    "Key": "Stuff Type",
    "Id": "95492",
    "ComboBoxPairs": [
       {
          "Value": {
             "Key": "3 Gallon",
             "Value": "3 Gallon",
             "ExtraValues": []
          },
          "Children": [
             {
                "Key": "Scan",
                "Id": "93478",
                "Strings": [
                   "DogType:Lab,Age:3,Name:Bowser",
                   "DogType:Lab,Age:5,Name:Dingo", 
                   ...
                ]
             }
          ]
       },
       {
          "Value": {
             "Key": "1 Gallon",
             "Value": "1 Gallon",
              ...
       }
    ]
 }
]

My goal is to build a table like this:

DogType ContainerType   Quantity    Volume
Lab         
        3 Gallon        2           6 Gallon
Mutt            
        1 Gallon        1           1 Gallon
        3 Gallon        2           6 Gallon
Weiner          
        3 Gallon        1           3 Gallon
Puppy           
        1 Gallon        2           6 Gallon
        3 Gallon        4           12 Gallon

I am unsure how to proceed and if this even feasible. The table needs to be grouped by the 'DogType' substring from the strings. The quantity of each dog type in each container type will determine the values for the 'Quantity' and 'ContainerType' columns in the table. 'Volume' is calculated by multiplying the gallon value by the quantity.

Considering the dynamic nature of the data with potentially multiple container types, finding a solution seems overwhelming at this point.

The structure of the data was not designed by me and cannot be modified. Getting to this stage has been quite challenging. Does anyone have any suggestions on how to approach this problem?

javascript arrays json object vue.js

Answer 1

Answer №1

To transform the data, you need to change the way it is stored or represented. The Strings are now in a consistent format, allowing us to use string operations to create a key => value store (utilizing ES6 syntax for simplicity).

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

This function takes strings like "DogType:Lab,Age:3,Name:Bowser" and creates an object like {'DogType': 'Lab', 'Age': 3...}. With this, we can manipulate and group the data using array.map.

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

We have converted the strings into objects and can now start grouping them. We'll create a data structure where keys are the Dog's Type. Then we add each quantity to the type and increment a count for each occurrence.

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

Now you have an Object like :

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

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

Answer 2

To transform the data, you need to change the way it is stored or represented. The Strings are now in a consistent format, allowing us to use string operations to create a key => value store (utilizing ES6 syntax for simplicity).

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

This function takes strings like "DogType:Lab,Age:3,Name:Bowser" and creates an object like {'DogType': 'Lab', 'Age': 3...}. With this, we can manipulate and group the data using array.map.

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

We have converted the strings into objects and can now start grouping them. We'll create a data structure where keys are the Dog's Type. Then we add each quantity to the type and increment a count for each occurrence.

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

Now you have an Object like :

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

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

Answer 3

Answer №2

Is your table meant to be illustrative or does it accurately represent your sample data?

I'm noticing discrepancies between your table and the sample data, causing me to question if I am understanding things correctly.

If I may offer a broad response - it might not cover everything, but could point you in the right direction~ 1. It's helpful to first parse your data completely before generating results. This allows you to create a summary array that simplifies processing of your unordered input data, with presentation as a separate step. 2. If you need to process everything at once, consider sorting the data initially to handle unexpected elements appearing at various points.

Does this make sense so far?

In my opinion, it would be beneficial to store running totals in a separate data structure, regardless of which scenario you are working with. This ensures that increments can be captured no matter where your relevant keys appear within the for-in loop.

To sum up - do you see any issues in creating a new object for your summary data?

Answer 4

Is your table meant to be illustrative or does it accurately represent your sample data?

I'm noticing discrepancies between your table and the sample data, causing me to question if I am understanding things correctly.

If I may offer a broad response - it might not cover everything, but could point you in the right direction~ 1. It's helpful to first parse your data completely before generating results. This allows you to create a summary array that simplifies processing of your unordered input data, with presentation as a separate step. 2. If you need to process everything at once, consider sorting the data initially to handle unexpected elements appearing at various points.

Does this make sense so far?

In my opinion, it would be beneficial to store running totals in a separate data structure, regardless of which scenario you are working with. This ensures that increments can be captured no matter where your relevant keys appear within the for-in loop.

To sum up - do you see any issues in creating a new object for your summary data?

Utilize the child array to retrieve the total number in the table

Answer №1

Answer №2

Similar questions

Dealing with POST redirection and retrieving parameters in Next.js

Adding new information to MongoDB

Merge and organize two arrays of varying lengths. Subsequently, convert the elements to 0s and 1s in a C program

Identify variables passed in recursive functions (C)

Obtain the RadNumericTextBox value using JavaScript or jQuery in an ASP.NET environment

Utilizing Angular's ng-repeat with varying directives for each iteration

I am having trouble getting the hoverOffset feature to work with doughnut charts in vue-charts.js

Troubleshooting problem: Unable to restrict table selections - issue with Material UI table in React

Uploading files from a local directory to an API using node.js and multipart/form-data

Troubleshooting NameError when Parsing JSON with Python 2.7 and Handling NULL Results

`No valid form submission when radio buttons used in AngularJS`

Guide on sharing Photo Blogs on Tumblr using the "tumblr.js" NodeJS module

Deleting elements in an array that have a last digit of 1 - how is it done

Is there a way to instantly remove script from the document head using jQuery instead of waiting a few seconds?

Retrieve three distinct elements from an array in Swift, each containing unique values

I am utilizing client-side JS to send a large number of requests. What methods can I implement to enable my server to cache this content

What causes JavaScript parseFloat to add additional value in a for loop implementation?

Developing a void or vacancy using three.js

Tips for updating CSS styles for multiple innerHTML elements using a JavaScript for loop

Tips for positioning elements in a way that prevents CSS fixed from overlapping upon page loading