What is the best way to use the index of an array when setting a property of that array within a JavaScript class?

Question

What is the best way to use the index of an array when setting a property of that array within a JavaScript class?

Apologies if the title is confusing, allow me to clarify

Imagine I have a 2d array representing different flavors of ice cream and milkshakes

menu = [ ['vanilla', 'chocolate', 'almond'],
         ['vanilla', 'pineapple', 'strawberry'] ]

Now, I am creating a class that takes this array as an input

class cafe{
  constructor(menu){
    this.iceCreams = menu[0]
    this.milkshakes = menu[1]
  }
}

I want to set a 'price' property for each flavor of milkshake.

this.milkshakes[n].price =  < a function that calculates price based on n >

This way, I can access them like so : cafe.milkshakes[0].price

How can I include the index 'n' of the array when defining the property?

I haven't attempted anything yet as I'm unsure how to proceed ☹️

javascript arrays class indexing properties

Answer 1

Answer №1

If you want to achieve this functionality, you can implement it within your constructor method.

Simply extract the names from the data and utilize the map function to manipulate them as needed. Below is an example code snippet where the calculatePrice function determines the price based on the index:

class Cafe {
constructor (menu) {
    this.iceCreams = menu[0].map((flavor, index) => {
      return {
        flavor,
        price: calculatePrice(index)
      }
    });

    this.milkshakes = menu[1].map((flavor, index) => {
      return {
        flavor,
        price: calculatePrice(index)
      }
    });
}

This response provides a basic outline of how to approach the task at hand.

UPDATE: For a more comprehensive and enhanced solution, refer to: https://codesandbox.io/s/cafe-example-wxp2c4

Answer 2

If you want to achieve this functionality, you can implement it within your constructor method.

Simply extract the names from the data and utilize the map function to manipulate them as needed. Below is an example code snippet where the calculatePrice function determines the price based on the index:

class Cafe {
constructor (menu) {
    this.iceCreams = menu[0].map((flavor, index) => {
      return {
        flavor,
        price: calculatePrice(index)
      }
    });

    this.milkshakes = menu[1].map((flavor, index) => {
      return {
        flavor,
        price: calculatePrice(index)
      }
    });
}

This response provides a basic outline of how to approach the task at hand.

UPDATE: For a more comprehensive and enhanced solution, refer to: https://codesandbox.io/s/cafe-example-wxp2c4

Answer 3

Answer №2

For the array called milkshakes, ensure that each element is an object and not a string.

drinks = [ ['latte', 'cappuccino', 'espresso'],
         [{ type: 'latte' }, { type: 'matcha' }, { type: 'chai' }] ]

Then, you can iterate through the array to assign prices, similar to the following example.

drinks.milkshakes.forEach((item, index) => item.cost = index))

Answer 4

For the array called milkshakes, ensure that each element is an object and not a string.

drinks = [ ['latte', 'cappuccino', 'espresso'],
         [{ type: 'latte' }, { type: 'matcha' }, { type: 'chai' }] ]

Then, you can iterate through the array to assign prices, similar to the following example.

drinks.milkshakes.forEach((item, index) => item.cost = index))

Answer 5

Answer №3

Utilize objects in your code:

itemList = [
  [
    {
      item: "apple",
      cost: 1.00,
    },
    {
      item: "banana",
      cost: 0.50,
    },
    {
      item: "orange",
      cost: 0.75,
    },
  ],
  [
    {
      item: "milk",
      cost: 2.00,
    },
    {
      item: "juice",
      cost: 1.50,
    },
    {
      item: "soda",
      cost: 1.25,
    },
  ],
];

Next, define a class like so:

class groceryStore{
  constructor(itemList){
    this.fruits = itemList[0]
    this.drinks = itemList[1]
  }
}

Now the fruits and drinks have properties of price and name

For example:

fruits[n].cost
fruits[n].item

Answer 6

Utilize objects in your code:

itemList = [
  [
    {
      item: "apple",
      cost: 1.00,
    },
    {
      item: "banana",
      cost: 0.50,
    },
    {
      item: "orange",
      cost: 0.75,
    },
  ],
  [
    {
      item: "milk",
      cost: 2.00,
    },
    {
      item: "juice",
      cost: 1.50,
    },
    {
      item: "soda",
      cost: 1.25,
    },
  ],
];

Next, define a class like so:

class groceryStore{
  constructor(itemList){
    this.fruits = itemList[0]
    this.drinks = itemList[1]
  }
}

Now the fruits and drinks have properties of price and name

For example:

fruits[n].cost
fruits[n].item

What is the best way to use the index of an array when setting a property of that array within a JavaScript class?

Answer №1

Answer №2

Answer №3

Similar questions

Exploring AngularJS - Understanding how dependency injection works in services, factories, filters, and beyond

Correctly formatted onclick

Finding indexes that are not being utilized

How can I improve the organization of my NPM scripts for better readability?

Encountering a window undefined error while using React-leaflet

set up the router by defining the behavior for each route

How can I use AJAX/PHP to change a value in MySQL when a checkbox that was created dynamically is clicked?

I'm currently facing an issue with toggling the visibility of a div using JavaScript

Would it be considered improper to apply ID's to DOM elements for the purpose of automation, as it may transform their CSS classes into individual entities?

Convert the date format to "DD-MM-YYYY"

How can I use a Google extension to interact with buttons on a webpage?

Unable to modify the color of the title text on a card component using React Native Paper

Having an issue with redirecting in Jquery Ajax after a successful call

Unable to submit live data due to unobtrusive validation issue in MVC 4.5

Encountering a Next.js prerendering issue when using getStaticPaths

The AJAX functionality for $_POST requests appears to be malfunctioning

Is there a way to include a different component without it automatically displaying within a div element?

Using an image as an onclick trigger for a JavaScript function

What is the best way to make an element's width match the width of the window?

Changing the background image of a specific div using CSS and JavaScript: a beginner's guide