What is the most effective method for analyzing data that has various dimensions?

Here's the simple situation: I'm currently developing an internal calculator for my team to determine the pricing of the t-shirts we offer.

https://i.sstatic.net/k9J2n.png

We have a similar pricing grid as shown in the image provided. The form has fields for entering quantity and number of colors for screen printing. How can I efficiently store this information for calculations without resorting to a messy nested if-else structure?

I've experimented with using arrays, but I am uncertain about the most effective way to organize the data.

if (parseInt(this.qty, 10) < 36) return
if (parseInt(this.qty, 10) <= 72) return 0.85
if (parseInt(this.qty, 10) <= 144) return 0.75
if (parseInt(this.qty, 10) <= 288) return 0.65

This current method is far from optimal, although it functions to some extent. I am seeking a cleaner solution that incorporates the number of colors into the calculation without relying on numerous if statements.

What would be the best approach to tackle this issue? I don't necessarily require specific code, just a theoretical concept. This project serves as a learning opportunity for me, so I aspire to handle it independently, but I could use guidance on where to start.

javascriptvue.js

Answer №1

In my opinion, a convenient approach would be to utilize a pricing object that stores key-value pairs representing quantity price limits and corresponding price multipliers. For instance:

const pricingObject = {36: 1, 72: 0.85, 144: 0.75, 288: 0.65};

function calculateDiscount(quantity){
    for (let limit in pricingObject) {
        if (parseInt(this.quantity, 10) < limit)
            return pricingObject[limit];
    }
}

This method allows for easy expansion by simply adding more quantity ranges and discounts.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The click event is malfunctioning. Could someone demonstrate the correct way to troubleshoot this issue?

I encountered an error message that says: Uncaught ReferenceError: toFahrenheit is not defined at HTMLInputElement.onclick I am currently investigating the root cause of this issue, but more importantly, I am seeking guidance on the steps to follow in or ...

javascripthtmldomonclick

Deciphering HTML encoding for text fields

As I transition from the Microsoft stack, specifically WPF, to HTML5, I apologize for any beginner-level questions. Today's topic is HTML encoding and decoding. Imagine an HTML5 application making AJAX calls to a C# backend using HTTP. The server al ...

javascriptjqueryhtmlencodingtextbox

What is the best way to incorporate a Django variable's name into an href attribute?

I'm having trouble adding dynamic images to a page. When I try, I receive an error: https://i.sstatic.net/B5Yym.png <img src="{% static 'geonode/img/layers/{{layer.title}}.png' %}" ...

javascripthtmldjangovariables

I'm keen on utilizing Vue locally, however, it seems to be not functioning properly

In my index.html file, I have the following code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Title</title> </head> <body> <script type="module"> import Vue ...

vue.jslocal

Using CSS3 keyframe animations to stop and remain on the final frame

I'm having trouble getting a CSS3 keyframe animation to stick at the last frame after it has completed. I thought setting animation-fill-mode to forwards would work, but it doesn't seem to be doing anything. .animatedSprite { .animation-nam ...

javascriptcssanimationless

Combine the selected values of two dropdowns and display the result in an input field using Angular

I am working on a component that consists of 2 dropdowns. Below is the HTML code snippet for this component: <div class="form-group"> <label>{{l("RoomType")}}</label> <p-dropdown [disabled] = "!roomTypes.length" [options]= ...

javascriptangulartypescriptprimeng

Creating dynamic nested objects using Javascript

In my quest to create serialized objects within the main object, I have come up with the concept of a solar system as an example of nesting. This allows me to access a variable by referencing it like this: universe.system1.planet4.x The hierarchy is univ ...

javascriptobjectdynamicnested

"An error occurred in Vue: The property or method 'msg' is not defined on the current instance but is being referenced during rendering. Please check your code for any typos or missing declarations

This is the code for my view page <div id="app"> @{{ msg }} @{{ content }} Including a form here <form method="post" enctype="multipart/form-data" v-on:submit.prevent="addPost"> <textarea v-model="content" id="postTe ...

phplaravelvue.js

Using JQuery append causes a CSS loading issue with the toggle button

I am currently facing an issue with a toggle button that is not loading the relevant CSS properly when using jQuery to append content. The appended content includes check boxes loaded with the Labelauty jQuery Plugin, which are functioning correctly. Belo ...

javascriptjquerycssnode.jsejs

No content found in the responseText when sending an XMLHttpRequest

I am facing an issue where the alert is blank when I send a request. The files are being uploaded successfully, but there is no response text being displayed. Is there something wrong with my code below? var request = new XMLHttpRequest(); request.open( ...

phpjavascriptxmlajaxxmlhttprequest

Tips for customizing the ion-alert header in Ionic framework

I have recently created an alert controller and am struggling to customize the appearance of the header within the alert popup. Despite going through the documentation, I have not been able to find a suitable solution. async customizeAlert(header, subHea ...

javascriptangulartypescriptionic-frameworkionic4

I have the latitude and longitude for both the shop and user, and I am looking to display a list of shops in order based

Currently, I have the latitude and longitude for both my shop and the user. My objective is to display a list of shops that fall within the geographic area between the user's location and the shop's coordinates using Sequelize ORM. Can you provid ...

javascriptexpresssequelize.jslatitude-longitudegoogle-latitude

I am attempting to embed a Vue component within another component

When trying to mount a component within another component, specifically a paginator, using props in the paginate component, I encountered an issue. The console displayed the error message "Failed to mount component: template or render function not defined. ...

laravelvue.jspaginationvue-component

Using an environment variable to set the base href in Angular 2

Is it possible to set a different base href in my Angular 2 app for development and production? I've come across similar questions with solutions, but I'm looking for the best approach. One solution is to set base href from an environment varia ...

javascripthtmlangular

Most effective method to change a specific attribute in every element within a nested array of objects

Below is an example of my data object structure: const courses = [ { degree: 'bsc', text: 'Some text', id: 'D001', }, { degree: 'beng', text: 'Some text&apos ...

javascriptarraysloopsforeachiteration

React - Incorrect components experiencing style changes due to setTimeout

Check out the code snippet here: https://jsfiddle.net/69z2wepo/204131/ A main component displays two 'notifications' each with different disappearance timings. class Page extends React.Component { constructor(props) { super(props); t ...

javascriptreactjs

Redirecting script upon successful connection detection

I have created a script that checks for internet connectivity using an image, and redirects if internet is available. However, the issue is that it caches the images, leading to attempts to load them even when offline. Is there a different approach I can ...

javascripthtml

Tips for defining the operational scope of orbit controls in three.js

I've been working on creating an orientation cube in threeJS and have set up 2 scenes with different viewports, cameras, and controls. Check out the fiddle here var controls = new THREE.OrbitControls( view.camera, container.domElement ); In the fid ...

javascriptthree.js

Just beginning my journey with node.js and looking for guidance on implementing an npm module into my front-end vanilla JavaScript project

Starting off, I must admit that my knowledge of node.js and web development is quite limited. Despite searching through stackoverflow and Google for a solution, I've come up empty-handed. My main concern is figuring out the necessary steps to take sin ...

javascriptnode.jsnpmimportnode-modules

The indicated processing instruction is incompatible with the provided payment source. PayPal's hosted fields for credit card payments do not support this specific processor

I'm currently working on integrating credit card payments with hosted fields into my checkout process. However, I keep encountering an UNPROCESSABLE_ENTITY error when making the confirm-payment-source request through the PayPal JS SDK. Here is the co ...

javascriptphppaypalpaypal-sandbox