A TypeScript example showcasing a nested for-of loop within several other for loops

Question

A TypeScript example showcasing a nested for-of loop within several other for loops

Is it possible to generate values from an Array of objects in the following way?

const arr = [
  {
    type: "color",
    values: [
      {
        name: "Color",
        option: "Black",
      },
      {
        name: "Color",
        option: "Blue",
      },
    ],
  },
  {
    type: "size",
    values: [
      {
        name: "Size",
        option: "XS",
      },
      {
        name: "Size",
        option: "M",
      },
    ],
  },
];

let oldArr: any[] = [];
if (arr.length === 1) {
  for (const iterator of arr[arr.length - 1].values) {
    oldArr.push(iterator);
  }
} else if (arr.length === 2) {
  for (const iterator of arr[arr.length - 1].values) {
    for (const iterator2 of arr[arr.length - 2].values) {
      oldArr.push([iterator, iterator2]);
    }
  }
} else if (arr.length === 3) {
  for (const iterator of arr[arr.length - 1].values) {
    for (const iterator2 of arr[arr.length - 2].values) {
      for (const iterator3 of arr[arr.length - 3].values) {
        oldArr.push([iterator, iterator2, iterator3]);
      }
    }
  }
} else if (arr.length === 4) {
  for (const iterator of arr[arr.length - 1].values) {
    for (const iterator2 of arr[arr.length - 2].values) {
      for (const iterator3 of arr[arr.length - 3].values) {
        for (const iterator4 of arr[arr.length - 4].values) {
          oldArr.push([iterator, iterator2, iterator3, iterator4]);
        }
      }
    }
  }
}

Can this be done recursively N times with real Array of objects given?

The expected output needed is an array of arrays:

 const oldArr = [

[
    {
        "name" : "Color", 
        "option" : "Blue", 
    }, 
    {
        "name" : "Size", 
        "option" : "XS"
    }
],
[
    {
        "name" : "Color", 
        "option" : "Black", 
    }, 
    {
        "name" : "Size", 
        "option" : "XS"
    }
],
[
    {
        "name" : "Color", 
        "option" : "Blue", 
    }, 
    {
        "name" : "Size", 
        "option" : "M"
    }
],
[
    {
        "name" : "Color", 
        "option" : "Black", 
    }, 
    {
        "name" : "Size", 
        "option" : "M"
    }
]
]

What other details should be included before posting this?

javascript typescript

Answer 1

Answer №1

Presented here is a recursive function that should yield the desired results. Extensive testing has been done with inputs up to 4 nested loops, all producing successful outcomes. The arguments are fairly self-explanatory; arr represents the array being read, oldArr signifies the array being written to, vals acts as a list for tracking iterator values (begin with an empty list), level indicates the "recursion level," and target_level specifies the final recursion level sought after. To utilize this function, consider running something like

recursive_func(arr, oldArr, [], 1, 4)

to mimic the behavior of your example with 4 nested loops.

If the number of nested for loops always matches the length of arr, kindly inform me so adjustments can be made to simplify the function.

function recursive_func(arr, oldArr, vals, level, target_level) {
    for (const it_n of arr[arr.length - level].values) {
        vals.push(it_n);
        if (level == target_level) {
            oldArr.push(JSON.parse(JSON.stringify(vals)));
        } else {
            recursive_func(arr, oldArr, vals, level + 1, target_level);
        }
         vals.pop()
    }
}

const arr = [
  {
    type: "color",
    values: [
      {
        name: "Color",
        option: "Black",
      },
      {
        name: "Color",
        option: "Blue",
      },
    ],
  },
  {
    type: "size",
    values: [
      {
        name: "Size",
        option: "XS",
      },
      {
        name: "Size",
        option: "M",
      },
    ],
  },
];
let oldArr = [];
recursive_func(arr, oldArr, [], 1, arr.length);

console.log(oldArr);

Answer 2

Presented here is a recursive function that should yield the desired results. Extensive testing has been done with inputs up to 4 nested loops, all producing successful outcomes. The arguments are fairly self-explanatory; arr represents the array being read, oldArr signifies the array being written to, vals acts as a list for tracking iterator values (begin with an empty list), level indicates the "recursion level," and target_level specifies the final recursion level sought after. To utilize this function, consider running something like

recursive_func(arr, oldArr, [], 1, 4)

to mimic the behavior of your example with 4 nested loops.

If the number of nested for loops always matches the length of arr, kindly inform me so adjustments can be made to simplify the function.

function recursive_func(arr, oldArr, vals, level, target_level) {
    for (const it_n of arr[arr.length - level].values) {
        vals.push(it_n);
        if (level == target_level) {
            oldArr.push(JSON.parse(JSON.stringify(vals)));
        } else {
            recursive_func(arr, oldArr, vals, level + 1, target_level);
        }
         vals.pop()
    }
}

const arr = [
  {
    type: "color",
    values: [
      {
        name: "Color",
        option: "Black",
      },
      {
        name: "Color",
        option: "Blue",
      },
    ],
  },
  {
    type: "size",
    values: [
      {
        name: "Size",
        option: "XS",
      },
      {
        name: "Size",
        option: "M",
      },
    ],
  },
];
let oldArr = [];
recursive_func(arr, oldArr, [], 1, arr.length);

console.log(oldArr);

A TypeScript example showcasing a nested for-of loop within several other for loops

Answer №1

Similar questions

Vue js is throwing an error because it is unable to find the "buscador" property or method that is being referenced in the render function

Implementing Pagination in Vue: How to Make it Work with Response Data

The navigation bar in React Router is interfering with the loading of other components

What is the best way to set an initial value retrieved from the useEffect hook into the textField input field?

The property is returning an empty string, but the function is functioning perfectly

What is the quickest way to redirect a URL in WordPress?

Clarifying the concept of invoking generic methods in TypeScript

Utilizing conditional statements within the array.forEach method to select specific sub-objects within an array of objects

simulated xhr server along with the locales in polymer appLocalizeBehavior

How can React and react-router be used to direct users to a specific group of URLs

Enhanced approach to building with React and Express

Using ng-repeat and selectize in AngularJS to populate a multi-select drop-down with values and set selected values

Can you explain the distinction between ajaxComplete and beforesend when making an Ajax call with JavaScript?

Transformation of visuals with alteration of status

Exploring jasmine testing with ajax requests

Solutions for concealing the current div when clicking on a new div that reveals a fresh one

Animate jQuery Images - Transform and smoothly reveal element

Heroku is showing an Error R10 (Boot timeout) message, indicating that the web process was unable to bind to the designated $PORT within one minute of launching

Having Multiple File Inputs [type=file] in one webpage

What is the best way to ensure that the swf loads only after all the images and text have loaded completely