Looping through an array within an object and dynamically adding properties

Question

Looping through an array within an object and dynamically adding properties

Having an issue with recursion regarding the following data:

let data = {
    label: "Root",
    datasets: [
        {
            label: "Parent 1"
            datasets: [
                {
                    label: "Child 1",
                    dataMax: 100,
                    datasets: 30
                },
                {
                    label: "Child 2",
                    dataMax: 30,
                    datasets: 30
                }
            ]
        },
        {
            label: "Parent 2",
            dataMax: 50,
            datasets: 30
        }
    ]
};

The goal is to add a dataMax property and values in every parent that does not have one, and for parents with multiple children, the dataMax should contain the total of its children's values.

Note that the depth and length of data are variable.

Here is what has been attempted so far:

let data = {
          label: "Root",
          datasets: [
              {
                  label: "Parent 1",
                  datasets: [
                      {
                          label: "Child 1",
                          dataMax: 100,
                          datasets: 30
                      },
                      {
                          label: "Child 2",
                          dataMax: 30,
                          datasets: 30
                      }
                  ]
              },
              {
                  label: "Parent 2",
                  dataMax: 50,
                  datasets: 30
              }
          ]
      };

      let setDatas = function(x, i, p){
          if (x == undefined) {
              console.log("--- This is x==undefined ---");
              return 1;
          } else if (Array.isArray(x.datasets)) {
              console.log("-------------- " + x.label + ", datasets[" + [i] + "]:");
              console.log(x.datasets[i]);
              return setDatas(x.datasets[i], i, x);
          } else {
              console.log("It's not an Array");
              ++i;
              return setDatas(p, i, p);
          }
      }

      setDatas(data, 0);

Managed to reach the desired depth but struggling to return to the root. It feels like something is missing. What could be wrong?

Expected Output:

let data = {
    label: "Root",
    dataMax: 180, // Total sum from Parent 1 and 2 dataMax values
    datasets: [
        {
            label: "Parent 1",
            dataMax: 130, // Total sum of "Child 1" and "Child 2" dataMax values
            datasets: [
                {
                    label: "Child 1",
                    dataMax: 100,
                    datasets: 30
                },
                {
                    label: "Child 2",
                    dataMax: 30,
                    datasets: 30
                }
            ]
        },
        {
            label: "Parent 2",
            dataMax: 50,
            datasets: 30
        }
    ]
};

Appreciate any assistance or further information required. Thank you.

javascript arrays object recursion

Answer 1

Answer №1

Ensure to iterate over the nested data.datasets in your function, not just check for the given data.

You can utilize a mix of Array#map() and Array#reduce() methods as shown below:

function calculateMax(data) {
  if (data.datasets && Array.isArray(data.datasets)) {
    data.datasets = data.datasets.map(item => {
      if (!item.dataMax) {
        if (Array.isArray(item.datasets)) {
          // For nested datasets, make recursive call
          calculateMax(item);
        }
      }
      return item;
    });
  }
  if (!data.dataMax)
    data.dataMax = data.datasets.map(item => item.dataMax).reduce((a, b) => (a + b));
}

Example:

let dataSet = {
  label: "Root",
  datasets: [{
      label: "Parent 1",
      datasets: [{
          label: "Child 1",
          dataMax: 100,
          datasets: 30
        },
        {
          label: "Child 2",
          dataMax: 30,
          datasets: 30
        }
      ]
    },
    {
      label: "Parent 2",
      dataMax: 50,
      datasets: 30
    }
  ]
};


function calculateMax(data) {
  if (data.datasets && Array.isArray(data.datasets)) {
    data.datasets = data.datasets.map(item => {
      if (!item.dataMax) {
        if (Array.isArray(item.datasets)) {
          calculateMax(item);
        }
      }
      return item;
    });
  }
  if (!data.dataMax)
    data.dataMax = data.datasets.map(item => item.dataMax).reduce((a, b) => (a + b));
}
calculateMax(dataSet);
console.log(dataSet)

Answer 2

Ensure to iterate over the nested data.datasets in your function, not just check for the given data.

You can utilize a mix of Array#map() and Array#reduce() methods as shown below:

function calculateMax(data) {
  if (data.datasets && Array.isArray(data.datasets)) {
    data.datasets = data.datasets.map(item => {
      if (!item.dataMax) {
        if (Array.isArray(item.datasets)) {
          // For nested datasets, make recursive call
          calculateMax(item);
        }
      }
      return item;
    });
  }
  if (!data.dataMax)
    data.dataMax = data.datasets.map(item => item.dataMax).reduce((a, b) => (a + b));
}

Example:

let dataSet = {
  label: "Root",
  datasets: [{
      label: "Parent 1",
      datasets: [{
          label: "Child 1",
          dataMax: 100,
          datasets: 30
        },
        {
          label: "Child 2",
          dataMax: 30,
          datasets: 30
        }
      ]
    },
    {
      label: "Parent 2",
      dataMax: 50,
      datasets: 30
    }
  ]
};


function calculateMax(data) {
  if (data.datasets && Array.isArray(data.datasets)) {
    data.datasets = data.datasets.map(item => {
      if (!item.dataMax) {
        if (Array.isArray(item.datasets)) {
          calculateMax(item);
        }
      }
      return item;
    });
  }
  if (!data.dataMax)
    data.dataMax = data.datasets.map(item => item.dataMax).reduce((a, b) => (a + b));
}
calculateMax(dataSet);
console.log(dataSet)

Answer 3

Answer №2

Let's test this out:

information = {
    label: "Main",
    datasets: [{
        label: "First Parent",
        datasets: [{
            label: "First Child",
            dataMax: 100,
            datasets: 30
        }, {
            label: "Second Child",
            dataMax: 30,
            datasets: 30
        }]
    }, {
        label: "Second Parent",
        dataMax: 50,
        datasets: 30
    }]
}

function updateData(information) {
    if (Array.isArray(information.datasets)) {
        let childMaximum = 0;

        for (let i = 0; i < information.datasets.length; i++) {
            childMaximum += updateData(information.datasets[i]);
        }

        if (information.dataMax === undefined) {
            information.dataMax = childMaximum;
        }
    }

    return information.dataMax;
}

updateData(information);

Answer 4

Let's test this out:

information = {
    label: "Main",
    datasets: [{
        label: "First Parent",
        datasets: [{
            label: "First Child",
            dataMax: 100,
            datasets: 30
        }, {
            label: "Second Child",
            dataMax: 30,
            datasets: 30
        }]
    }, {
        label: "Second Parent",
        dataMax: 50,
        datasets: 30
    }]
}

function updateData(information) {
    if (Array.isArray(information.datasets)) {
        let childMaximum = 0;

        for (let i = 0; i < information.datasets.length; i++) {
            childMaximum += updateData(information.datasets[i]);
        }

        if (information.dataMax === undefined) {
            information.dataMax = childMaximum;
        }
    }

    return information.dataMax;
}

updateData(information);

Answer 5

Answer №3

One way to achieve this is by utilizing the .reduce method in JavaScript, which allows you to maintain the original data intact.

const datasets = [
        {
            label: "Parent 1",
            datasets: [
                {
                    label: "Child 1",
                    dataMax: 100,
                    datasets: 30
                },
                {
                    label: "Child 2",
                    dataMax: 30,
                    datasets: 30
                }
            ]
        },
        {
            label: "Parent 2",
            dataMax: 50,
            datasets: 30
        }
    ]; 

const refinedDataset = datasets.reduce((prev, curr) => {
    if (curr.dataMax) { 
        return prev.concat([curr]);
    } else {
        if (curr.datasets.length > 0) {
            const dataMax = curr.datasets.reduce((pds, cds) => pds += cds.dataMax, 0);
            const nds = Object.assign(curr, { dataMax });
            return prev.concat([nds]);
        }
    }
}, []);

console.log(refinedDataset);

Answer 6

One way to achieve this is by utilizing the .reduce method in JavaScript, which allows you to maintain the original data intact.

const datasets = [
        {
            label: "Parent 1",
            datasets: [
                {
                    label: "Child 1",
                    dataMax: 100,
                    datasets: 30
                },
                {
                    label: "Child 2",
                    dataMax: 30,
                    datasets: 30
                }
            ]
        },
        {
            label: "Parent 2",
            dataMax: 50,
            datasets: 30
        }
    ]; 

const refinedDataset = datasets.reduce((prev, curr) => {
    if (curr.dataMax) { 
        return prev.concat([curr]);
    } else {
        if (curr.datasets.length > 0) {
            const dataMax = curr.datasets.reduce((pds, cds) => pds += cds.dataMax, 0);
            const nds = Object.assign(curr, { dataMax });
            return prev.concat([nds]);
        }
    }
}, []);

console.log(refinedDataset);

Looping through an array within an object and dynamically adding properties

Answer №1

Answer №2

Answer №3

Similar questions

What is the process for creating JavaScript code to append a div element for each item?

What is causing TypeScript to compile and remove local variables in my Angular base controller?

Issue with Vue js counter increment and decrement function not performing as anticipated

Enhancing HTML through Angular 7 with HTTP responses

The argument type 'bool' in EAzureBlobStorageFile is unrecognized, along with the exception '*** -[__NSArrayM objectAtIndexedSubscript:]'

Tips for extracting values using forEach in JavaScript

Tips for altering an element's style attribute using ERB and JQuery while including a % symbol within the value

Displaying Real-Time Values in ReactJS

Nuxt and Webpack error: Failed to parse module - Unexpected character (1:0)

Using Angular 4 Component to Invoke JavaScript/jQuery Code From an External File

Creating a new application to manage and oversee my mathematics classes

modifying output of data when onchange event is triggered

Detect if the user is using Internet Explorer and redirect them to a different

Navigating protected routes in a React application

Error: Attempting to use the 'append' method on an object that does not support the FormData interface

Submit a data array using formData through axios

Encountering an 'error' event during installation of the Meteorite router package with the command 'mrt add router'

What is the best way to implement consts from various files in React JS?

Transfer the value of a JavaScript variable to paste it into a fresh tab on Google Chrome

What is the process for setting a particular array list to designated data?