What is the easiest method to iterate through nested objects within an object?

Question

What is the easiest method to iterate through nested objects within an object?

Hey there! I'm working on implementing a "your cart" feature for an ecommerce website in my project, and I could use some assistance with coding to loop through an object within an object. Below is the code snippet I've been working on:

var products = {
  product1: {
    name: "Balenciaga Black Shoes",
    quantity: 2,
    price: 50,
    size: "L",
    shipping: 20
  },
  product2: {
    name: "Gucci Pink Bag",
    quantity: 1,
    price: 70,
    size: "Big",
    shipping: 20
  }
};

function myFunc() {

  for (const key in products) {
    for (const key2 in key) {

      console.log(`${key2}: ${key[key2]}`);
    }
  }
}

myFunc()

javascript

Answer 1

Answer №1

You are currently iterating over the key name directly, which is just a string:

for (const key2 in key) {

Instead, iterate over the property indicated by that key:

for (const key2 in products[key]) {

Similarly, make sure to reference that property when displaying output:

console.log(`${key2}: ${products[key][key2]}`);

To provide a clearer understanding of the property hierarchy and values:

console.log(`${key}:${key2}: ${products[key][key2]}`);

For instance:

var products = 
{
    product1: {
        name: "Balenciaga Black Shoes",
        quantity: 2,
        price: 50,
        size: "L",
        shipping: 20
    },
    product2: {
        name: "Gucci Pink Bag",
        quantity: 1,
        price: 70,
        size: "Big",
        shipping: 20
    }
};

function myFunc() {

    for (const key in products) {
        for (const key2 in products[key]) {

            console.log(`${key}:${key2}: ${products[key][key2]}`);
        }
    }
}

myFunc();

Answer 2

You are currently iterating over the key name directly, which is just a string:

for (const key2 in key) {

Instead, iterate over the property indicated by that key:

for (const key2 in products[key]) {

Similarly, make sure to reference that property when displaying output:

console.log(`${key2}: ${products[key][key2]}`);

To provide a clearer understanding of the property hierarchy and values:

console.log(`${key}:${key2}: ${products[key][key2]}`);

For instance:

var products = 
{
    product1: {
        name: "Balenciaga Black Shoes",
        quantity: 2,
        price: 50,
        size: "L",
        shipping: 20
    },
    product2: {
        name: "Gucci Pink Bag",
        quantity: 1,
        price: 70,
        size: "Big",
        shipping: 20
    }
};

function myFunc() {

    for (const key in products) {
        for (const key2 in products[key]) {

            console.log(`${key}:${key2}: ${products[key][key2]}`);
        }
    }
}

myFunc();

Answer 3

Answer №2

Have you considered storing your products in an array instead of an object? In any case, the approach here is to iterate through all the values of your products object and then iterate through all the keys of each product:

let products = [
  {
    name: 'Balenciaga Black Shoes',
    quantity: 2,
    price: 50,
    size: 'L',
    shipping: 20,
  },
  {
    name: 'Gucci Pink Bag',
    quantity: 1,
    price: 70,
    size: 'Big',
    shipping: 20,
  },
];

for (const product of products) {
  for (const key in product) {
    console.log(`${key}: ${product[key]}`);
  }
}

Answer 4

Have you considered storing your products in an array instead of an object? In any case, the approach here is to iterate through all the values of your products object and then iterate through all the keys of each product:

let products = [
  {
    name: 'Balenciaga Black Shoes',
    quantity: 2,
    price: 50,
    size: 'L',
    shipping: 20,
  },
  {
    name: 'Gucci Pink Bag',
    quantity: 1,
    price: 70,
    size: 'Big',
    shipping: 20,
  },
];

for (const product of products) {
  for (const key in product) {
    console.log(`${key}: ${product[key]}`);
  }
}

What is the easiest method to iterate through nested objects within an object?

Answer №1

Answer №2

Similar questions

Innovative react route

Unable to modify the name of an element's class due to restrictions in JavaScript

Using VueJS to iterate through an array while applying a condition to filter out certain elements (combining v-for with v-if)

Methods for organizing an array of objects by a specific key in JavaScript, but in the case of duplicate values, the objects can be sorted by a different

Check for mobile browser without having to refresh the page

Is there a convenient HTML parser that is compatible with Nativescript?

The persistent issue persists with the Sails.js Node server where the req.session remains devoid of any data, despite utilizing

"Learn how to clear an input field using jQuery with this simple guide

Implementing a callback function following the completion of file reading in Phonegap

Tips for receiving user input with custom values and assigning them to variables through multiple selection criteria using Jquery

Live calculation feature for dropdown menus

Form an object using elements of a string array

What is causing express.js not to authenticate properly?

Transferring extra data from jQuery autocomplete to a PHP script

Weird State / Unusual Effectiveness with NextJS Links

What is the best way to handle .jsx files in my library bundling process with Rollup?

Communicate with Internet Explorer's JavaScript console using VBA within Excel

JavaScript array contains duplicate values

The state value is not preserved after redirecting to another page

Implement Javascript Event Listener