Tips for Iterating through Nested Arrays using the Inside Array in a Dynamic Way

Question

Tips for Iterating through Nested Arrays using the Inside Array in a Dynamic Way

I am facing an issue with my code as it lacks flexibility when a new array is added to the nested array, in which case the new array is not considered. My main concern is how to access the elements of each nested array simultaneously.

Here's an example:

    const nestedArr = [
    [
            "ITEM A",
            "ITEM B",
            "ITEM C"
        ],
        [
            "$50.00",
            "$30.00",
            "$20.00"
        ],
        [
            "5",
            "2",
            "7"
        ]
    ]

const ordersObj = []

for (let i=0; i< nestedArr[0].length; i++){
    var name = orderArr[0][i];
    var price = Number(orderArr[1][i].replace("$",""));
    var qty = orderArr[2][i];
    var amount =  price * qty;
    ordersObj.push({name,price,qty,amount})
 }

I want to avoid manually specifying positions (0, 1, 2) to access different nested arrays and instead run a loop or modify the code to achieve this dynamically.

Best Regards

javascript multidimensional-array javascript-objects nested-loops

Answer 1

Answer №1

I would suggest avoiding trying to handle everything in a single loop. Instead, create a constructor function for your object and transform the source nestedArr into a more manageable 2D array where each property is located at its designated index within the sub-arrays. This can be achieved using a utility zip function (refer to this question for further discussion).

const nestedArr = [
  ['COCA - COLA ORIGINAL 355 ML VIDRIO RET', 'COCA - COLA ORIGINAL 600 ML PET NR', 'COCA - COLA ORIGINAL 2.5 LT RET'],
  ['$176.02', '$100.00', '$130.00'],
  ['10', '3', '15'],
];

const OrderObj = ([name, price, qty]) => {
  const _price = Number(price.replace('$', ''));
  const _qty = Number(qty);

  return {
    name,
    price: _price,
    qty: _qty,
    amount: _price * _qty,
  };
};

const zip = (...rows) => [...rows[0]].map((_, i) => rows.map((row) => row[i]));

const orderObjs = zip(...nestedArr).map(OrderObj);

console.log(orderObjs);

// console.log(zip(...nestedArr));
/*
[
  [ 'COCA - COLA ORIGINAL 355 ML VIDRIO RET', '$176.02', '10' ],
  [ 'COCA - COLA ORIGINAL 600 ML PET NR', '$100.00', '3' ],
  [ 'COCA - COLA ORIGINAL 2.5 LT RET', '$130.00', '15' ]
]
*/

When adding additional rows to the nestedArr, you simply need to update your constructor to accommodate the new rows by utilizing destructured parameters as a guide for the rows in the nestedArr.

const nestedArr = [
  ['COCA - COLA ORIGINAL', 'COCA - COLA ORIGINAL', 'COCA - COLA ORIGINAL'],
  ['$176.02', '$100.00', '$130.00'],
  ['355 ML VIDRIO RET', '600 ML PET NR', '2.5 LT RET'], // <─── added row
  ['10', '3', '15'],
];

//                               ┌───────────────────────────── added index
const OrderObj = ([name, price, size, qty]) => {
  const _price = Number(price.replace('$', ''));
  const _qty = Number(qty);

  return {
    name,
    size, // <───────────────────────────────────────────────── added property
    price: _price,
    qty: _qty,
    amount: _price * _qty,
  };
};

const zip = (...rows) => [...rows[0]].map((_, i) => rows.map((row) => row[i]));

const orderObjs = zip(...nestedArr).map(OrderObj);

console.log(orderObjs);

Answer 2

I would suggest avoiding trying to handle everything in a single loop. Instead, create a constructor function for your object and transform the source nestedArr into a more manageable 2D array where each property is located at its designated index within the sub-arrays. This can be achieved using a utility zip function (refer to this question for further discussion).

const nestedArr = [
  ['COCA - COLA ORIGINAL 355 ML VIDRIO RET', 'COCA - COLA ORIGINAL 600 ML PET NR', 'COCA - COLA ORIGINAL 2.5 LT RET'],
  ['$176.02', '$100.00', '$130.00'],
  ['10', '3', '15'],
];

const OrderObj = ([name, price, qty]) => {
  const _price = Number(price.replace('$', ''));
  const _qty = Number(qty);

  return {
    name,
    price: _price,
    qty: _qty,
    amount: _price * _qty,
  };
};

const zip = (...rows) => [...rows[0]].map((_, i) => rows.map((row) => row[i]));

const orderObjs = zip(...nestedArr).map(OrderObj);

console.log(orderObjs);

// console.log(zip(...nestedArr));
/*
[
  [ 'COCA - COLA ORIGINAL 355 ML VIDRIO RET', '$176.02', '10' ],
  [ 'COCA - COLA ORIGINAL 600 ML PET NR', '$100.00', '3' ],
  [ 'COCA - COLA ORIGINAL 2.5 LT RET', '$130.00', '15' ]
]
*/

When adding additional rows to the nestedArr, you simply need to update your constructor to accommodate the new rows by utilizing destructured parameters as a guide for the rows in the nestedArr.

const nestedArr = [
  ['COCA - COLA ORIGINAL', 'COCA - COLA ORIGINAL', 'COCA - COLA ORIGINAL'],
  ['$176.02', '$100.00', '$130.00'],
  ['355 ML VIDRIO RET', '600 ML PET NR', '2.5 LT RET'], // <─── added row
  ['10', '3', '15'],
];

//                               ┌───────────────────────────── added index
const OrderObj = ([name, price, size, qty]) => {
  const _price = Number(price.replace('$', ''));
  const _qty = Number(qty);

  return {
    name,
    size, // <───────────────────────────────────────────────── added property
    price: _price,
    qty: _qty,
    amount: _price * _qty,
  };
};

const zip = (...rows) => [...rows[0]].map((_, i) => rows.map((row) => row[i]));

const orderObjs = zip(...nestedArr).map(OrderObj);

console.log(orderObjs);

Answer 3

Answer №2

Looks like the code could use some organizing:

const productArr = [
    [
            "APPLE - MACBOOK AIR",
            "APPLE - IMAC 27 INCH",
            "APPLE - IPHONE 13 PRO MAX"],
        [
            "$999.99",
            "$1799.00",
            "$1399.00"
        ],
        [
            "5",
            "2",
            "10"
        ]
    ]

const productsObj = []

for (let i=0; i< productArr[0].length; i++){
    var name = productArr[0][i]
    var price = Number(productArr[1][i].replace("$",""));
    var qty = productArr[2][i];
    var total =  price * qty;
    productsObj.push({name,price,qty,total})
 }

Answer 4

Looks like the code could use some organizing:

const productArr = [
    [
            "APPLE - MACBOOK AIR",
            "APPLE - IMAC 27 INCH",
            "APPLE - IPHONE 13 PRO MAX"],
        [
            "$999.99",
            "$1799.00",
            "$1399.00"
        ],
        [
            "5",
            "2",
            "10"
        ]
    ]

const productsObj = []

for (let i=0; i< productArr[0].length; i++){
    var name = productArr[0][i]
    var price = Number(productArr[1][i].replace("$",""));
    var qty = productArr[2][i];
    var total =  price * qty;
    productsObj.push({name,price,qty,total})
 }

Tips for Iterating through Nested Arrays using the Inside Array in a Dynamic Way

Answer №1

Answer №2

Similar questions

Ending the jQuery Modal box

Using JavaScript to eliminate brackets

Struggling to dynamically create form controls within Angular forms and receiving the following error in the console: "TypeError: feature_r5.get is not a function"

What methods are available for updating the href color of an element using the DOM?

Error encountered: jquery form validation fails to register changes

Using a JavaScript variable to be displayed in a PHP code

The video in the TypeScript code within the Owl Carousel is not displaying properly - only the sound is playing. The video screen remains stationary

What could be causing my button to not capture the value of this input text field?

Graphs vanish when they are displayed in concealed sections

Website: Showcase Opentok using a Picture-in-Picture design

Setting up flowplayer for multiple div elements: a tutorial

I am having trouble grasping certain syntax in JavaScript when it comes to using `${method_name}`

Check for the presence of an Outlook add-in within a web application

Displaying the most recent queries retrieved from a search API

I am encountering errors when running NPM start

Error: The term "Particles" has not been defined

The search text box is mysteriously absent from each column in the datatables

How can I find the week of the month using Moment.js? (similar to Google Calendar)

Sorting method in Ext JS 6.2.0 using mode

Reactjs rendering problem related to webpack