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

What is the procedure in AngularJS to obtain an ID from a URL? My current approach involves utilizing Restangular for communication with REST APIs

Utilizing AMAZON_COGNITO_USER_POOLS in conjunction with apollo-client: A comprehensive guide

Personalized path-finding tree iterator

Variable Stores the Results of Node.js http.request

Unable to establish connection via web socket with SSL and WSS in JavaScript

Tips for transforming an Observable stream into an Observable Array

When you access the `selectedIndex` property in JavaScript, it will return an object of type `HTMLSelect

Changing the Position of HTML Scripts in React

Utilizing the map function to display elements from a sub array

Having trouble publishing project on Vercel because of a naming issue

Padding-left in InfoBox

Trouble reading property 'map' in a react-redux todo application

Javascript is handling the JSON Request flawlessly, however, when using Nodejs, an error is encountered with a status

What is the best way to create a list from a matrix using JavaScript?

Can you explain how to utilize prop values for setting attributes in styled-components v4 with TypeScript?

Steps to automatically populate the dropdown upon page load

How can I change an icon and switch themes using onClick in react js?

What is the best way to showcase the chosen items from a treeview in ReactJS?

Exploring the various methods of creating controllers and services in AngularJS and understanding the rationale behind each approach

Organizing JSON objects into groups of x items