Strategizing the Organization of Numerous Choice Alternatives Across an Object Collection in Angular

I have a large array that looks something like this:

    $scope.providers = [{
providerName: 'John Doe',
colors: 1,
itemQuantity: 100,
item: 'pen',
price: 2.5
},
{
providerName: 'John Doe',
colors: 1,
itemQuantity: 200,
item: 'pen',
price: 2
},
providerName: 'John Doe',
colors: 3,
itemQuantity: 400,
item: 'clock',
price: 10
},
providerName: 'Jane Doe',
colors: 1,
itemQuantity: 50,
item: 'bag',
price: 15
}]

I am working on creating a proposal generator, where our employees need to choose which provider option they want to use. These providers simply put logos on our products, and the array of objects contains the prices based on colors, item type, and quantity.

My goal is to create a select input to choose the provider (let's say John Doe), followed by selecting the color quantity options only offered by John Doe. Then, another input for choosing the item type that John Doe works with for that color quantity, and so forth. Finally, I aim to calculate the total price for the selected options.

I am struggling to figure out how to implement this in AngularJS (version 1.5.8).

Furthermore, I believe there is a better way to organize my data than the current massive array.

Any suggestions on addressing these challenges would be greatly appreciated!

Thank you!

Answer №1

To simplify the process, you can link the comboboxes to each other (ignore the basic html, it was only for demonstration purposes):

Functional Plnkr

<body ng-controller="MainCtrl"> 
    Provider:
    <select ng-model="selectedProvider" ng-options="p.providerName as p.providerName for p in providers | unique:'providerName'">{{p}} </select>    
    <br/>
    Selected Provider: {{selectedProvider}}
    <br/>
    <br/>
    Number of Colors:   
    <select ng-model="selectedNumber" ng-options="n.colors as n.colors for n in providers | filter : {providerName:selectedProvider } | unique:'colors' "> </select>    
    <br/>
    Selected Number: {{selectedNumber}}
    <br/>
    <br/>
    Items:
    <select ng-model="selectedItem" ng-options="i.item as i.item for i in providers | unique:'item'  | filter : {providerName:selectedProvider, colors: selectedNumber}"> </select> 
    <br/>
    Selected Item: {{selectedItem}}
    <br/>
    Distinct Prices: 
    <div ng-repeat="p in providers | filter :  {providerName:selectedProvider, colors: selectedNumber, item: selectedItem}">
    <span>{{p.price}}</span>
</div>


Don't forget to add 'angular.filter' dependency and the .js file at the beginning of the plnkr. You might also need to ensure that the filtering is done for complete words, not just parts, but this should be a good starting point.

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

Denied the post request to an API

When attempting to send a post request to my API, I encountered an error indicating that the connection to 'http://127.0.0.1:3000/api/v1/users/login' was refused due to a Content Security Policy directive violation. The specific error message tha ...

Send in a form using AngularJS

I am completely new to AngularJs and am struggling with submitting a form. I used yeoman to create the angular application. Below is the code snippet from the main.html file <div class="jumbotron"> <h3>Test</h3> <br><br> ...

Implementing AJAX notifications in a contact form integrated with PHP, Google reCAPTCHA, and SweetAlert

I've implemented an AJAX script to handle the submission of a basic contact form with Google reCAPTCHA at the end of my HTML. Here's the relevant HTML code: <div class="col-md-6"> <form role="form" id="form" action="form.php" method ...

Seeking clarification on the distinction between using an input of type button versus an input of type submit when triggering a jQuery form submission

This particular code is designed to execute the following actions upon being clicked: Submit the form Disable the button in order to prevent double clicks Add a spinner to the button to indicate to the user that something is happening If the form is inva ...

Utilizing a pointer as an argument in a function to copy a string

#include <stdio.h> void stringcopy(char *, char *); int main(void) { char *name="John"; char *copyName; stringcopy(name,copyName); printf("%s",copyName);//why does it show null here? return 0; } void stringcopy( ...

Is there a more effective approach to managing an array of objects retrieved from an API call?

I'm attempting to extract an array of names from a JSON response that contains an array of objects, but I'm running into issues. When I try to print the array, it shows up empty. Is this the correct way to go about it? There don't seem to be ...

How can I incorporate dynamic data to draw and showcase graphs on my website using PHP?

I am currently working on a project that requires displaying a graph showing the profit of users per day. Currently, I have implemented code to display a static graph on my page. <script type="text/javascript" src="https://www.google.com/jsapi">< ...

Using the ES6 filter method to iterate through a double nested array of objects

Struggling with filtering a nested array of objects and specifically stuck at the filter part. Any idea on how to eliminate one of the marks? this.state = { data: [ { id: 1, name: "Main", subs: [ { id: "jay", ...

Explore our product gallery with just a simple hover

I am looking to design a product list page with a mouseover gallery similar to the one showcased on [this page][1]. I attempted to use a vertical carousel like the one illustrated in this Fiddle, but unfortunately, it does not function like Zalando and jc ...

How can I set the initial Number of SMS to 1 when the characters are less than or equal to 160?

I am working on a jQuery code that displays the current number of characters being typed, the remaining characters, and also the number of SMS. The rule is that any value between 0 and 160 represents 1 SMS, while any value above that but less than 321 repr ...

Exploring the contrast between RFC and RFCE in the realm of ReactJS

As a newcomer to Reactjs, I'm curious about the distinction between "react functional component" and "react functional component export". Can someone help explain? Below is an example of a react functional component: import React from 'react&apo ...

Can you tell me the JavaScript alternative to Jquery's .load() shortcut method?

Exploring the modernized version of jquery, specifically the .load() ajax shorthand method that is not deprecated. One example to consider is finding the javascript equivalent for the traditional jquery ajax shorthand method mentioned below: $("#targetdi ...

Leveraging highland.js for sequentially executing asynchronous functions while maintaining references to the initial stream data

I am dealing with a series of events: var eventStream = _([{ id: 1, foo: 'bar' }, { id: 2, foo: 'baz' }]); My task is to load an instance of a model for each event in the stream (my Data Access Layer returns promises) and then tri ...

Determine the appropriate value either through key retrieval or conditional statements

My goal is to enhance the efficiency of a slider that contains numerous conditional statements triggered during sliding/swiping actions. Which approach yields better performance? 1- Utilizing a predefined object with key conditions const controller = (c ...

Efficiently removing a duplicated component in Vue: A step-by-step guide

I am trying to find a way to target and remove a component that I duplicated using the v-for directive in my multiple stopwatch application. Currently, I can only delete the last duplicated component, but I want the ability to remove any targeted component ...

A guide on efficiently mapping all items from an object containing an unspecified number of items or item names within a reusable component

I am currently exploring the concept of building reusable components. In a personal project, I am in the process of mapping items retrieved from a database. My goal is to create a component that can dynamically map any number of unspecified types as table ...

Retrieving Values from Array Objects - Using JavaScript

Discovering the technique to retrieve property values. Given the following: let object1 = [{name: "HappyHands31"}, {job: "website developer"}, {city: "Chicago"}]; How can I output only the value of the second object, which is "website developer"? I am ...

What steps can be taken to align the Three.js coordinate system with the DOM transform coordinates?

Can we adjust the position in Three.js to start at the top/left of the scene, similar to DOM elements? I want to create a sphere so that when the position is 0,0,0, it will be at the top left corner, with its size specified in CSS pixel dimensions that do ...

Tips for invoking a function with dependencies in an external library

Recently diving into the world of Angular, I've encountered a challenge. I'm struggling to find a way to call a function on a provider that I have created from within a section of code executed under the context of an external component. The main ...

Error message: The call stack size has surpassed the limit, resulting in a RangeError. This issue is

I currently have a dynamic unordered list within my HTML file. Upon loading the page, certain list items are automatically added. The original format of the list is displayed as follows: <ul class="ui-front"> <li><div>1</div& ...