Combining elements from a single array list and transferring them to another array list using Angular 4

In my arrayList called selectedSources, I have items such as:

this.selectedSources.push(
  { id: 0, text: "A" },
  { id: 1, text: "B" },
  { id: 2, text: "C" },
  { id: 3, text: "D"}
); 

The user has the option to select one or more of these items. When items are selected, I need to dynamically move a combination of them into another arrayList.

Currently, I am achieving this using if/else statements. Is there a more dynamic way to accomplish this?

Here is a snippet of my code :

  if (
    this.selectedSources.some(x => x.Value === "B") &&
    this.selectedSources.some(x => x.Value === "C")
  ) {
    if (this.formulalist != undefined) {
      //this.formulalist.length = 0;
      this.formulalist = [];
    }
    this.formulalist.push({
      Value: "B - C",
      Name: "B - C",
      IsVisible: true,
      UpdateFlag: "A",
      Market: "",
      FormulaType: "diff",
      FormulaSet1: "1",
      FormulaSet2: "3",
      checked: null
    });
    this.formulalist.push({
      Value: "% B - C",
      Name: "% B - C",
      IsVisible: true,
      UpdateFlag: "A",
      Market: "",
      FormulaType: "percent",
      FormulaSet1: "1",
      FormulaSet2: "3",
      checked: null
    });
   else if (
    this.selectedSources.some(x => x.Value === "B") &&
    this.selectedSources.some(x => x.Value === "D")
  ) {
    if (this.formulalist != undefined) {
      //this.formulalist.length = 0;
      this.formulalist = [];
    }
    this.formulalist.push({
      Value: "B - D",
      Name: "B - D",
      IsVisible: true,
      UpdateFlag: "A",
      Market: "",
      FormulaType: "percent",
      FormulaSet1: "1",
      FormulaSet2: "4",
      checked: null
    });
    this.formulalist.push({
      Value: "% B - D",
      Name: "% B - D",
      IsVisible: true,
      UpdateFlag: "A",
      Market: "",
      FormulaType: "percent",
      FormulaSet1: "1",
      FormulaSet2: "4",
      checked: null
    });
    ............
    ............

If the user selects B and C, I need to push a combination of these items. For example: (B - C) and % B - C.

How can we achieve this dynamically without using hard-coded values, but based on the user selection in angular 4

The selectedSources array contains the list selected by the user.

If the user selects B, A, C, I need to push these items into another array list with combinations like A - C, % A - C, A - B, % A - B, B - C, % B - C

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

Angular's ng-select fails to select the value when generating the dynamic control

Currently, I am working on dynamically adding cities using ng-select in order to have search functionality while entering city names. For example, if I have two city names saved in a form and need to display them in separate ng-select controls when editing ...

Accessing specific values from a JSON object in JavaScript

I'm fairly new to JSON and have a JSON String that I'd like to access and print to a DIV. I've managed to get it working using the following code snippet: document.getElementById("product_content").innerHTML=javascript_array[5].name; The s ...

List of COM ports accessible with Serialport npm

I am encountering an issue with a specific part of my program and although I have identified the problem, I am unable to find a solution on my own. Therefore, I am reaching out for your assistance. It seems like the problem does not lie within the serialp ...

Troubleshooting Event.target Problem in Firefox 6

When working in Firefox 6, I encountered an issue while trying to identify the target element on which the event occurred. Instead of displaying the desired element, it was showing as undefined in the alert message. Utilizing the Firebug tool for debugging ...

What is the best way to ensure that multiple queries are returned in the correct sequence?

In the interface below, there is a search input box along with data displayed. As you type in the search input, the data below filters accordingly. Each letter typed triggers a request to retrieve the relevant data. For instance, if you type "folder," the ...

Avoiding conflicts among jquery prototype/plugin methods

Imagine I have a primary JavaScript file on my website that includes the following code: $.fn.extend({ break: function(){ // Add your custom code here }, cut: function(){ // More code here }, // ...and many other methods }); When using t ...

how to open a new tab using JavaScript with Selenium

My code is supposed to open a new window that goes from the login window to the main menu, module, reports, and finally the report name. The report name should be opened in the next tab. Issue: The report name is not opening in a new tab; it's openin ...

Regular expression in JavaScript that specifically matches numbers formatted in the style of JavaScript

My goal is to develop a javascript regular expression that specifically identifies valid Javascript-style numbers. The requirements entail accommodating an optional minus or plus sign before the number, recognizing the decimal dot, and supporting exponent ...

403 Forbidden Error encountered when attempting to incorporate JavaScript

I have encountered an issue with my code where I am trying to grab a form from another website. The PHP code in the header is meant to sanitize the GET string in the URL for security purposes. Essentially, I have a page called order.html which functions pr ...

Can ng-content be utilized within the app-root component?

I have successfully developed an Angular application, and now I am looking to integrate it with a content management system that generates static pages. In order to achieve this, I need to utilize content projection from the main index.html file. The desi ...

What is the best way to determine the count of elements in an array that have the active property set to true?

Can anyone help me figure out the most efficient way to solve this problem? (Filter, ng-repeat, or another method?) <div>Number of active items: {{product.length}} </div> //total number of items <div>Number of inactive items: {{product.l ...

Distinguishing div identifiers for jQuery displaying and concealing

Although I am not a coder, I am still learning and trying to improve my skills. I have multiple div elements listed by a MySQL query. I require a JavaScript code that can display the class="qform" div based on which button is clicked. If button-1 is clic ...

Error message "route is not defined" appears during Angular 2 deployment on IIS using Visual Studio 2015

Currently, I have a .Net Core project in Visual Studio 2015 (update 3) that utilizes Angular 2. It runs smoothly within Visual Studio using IIS Express on my Windows 10 professional PC. However, upon attempting to deploy the application to my local IIS ins ...

Troubleshooting radio name input binding in Angular 2

In Angular2, there seems to be an issue with one-way binding to the name attribute for a group of radio inputs. For example: <div [ngFormModel]="form"> <input type="radio" [name]="varName" [id]="id1" ngControl="r1"> <input type="radio" ...

Angular2 Edit form does not have radio button selected according to the value

When editing a form, the radio button does not appear checked according to the value retrieved. I was able to retrieve the last name from the database, but when trying to bind the gender with the radio button, it does not show as checked. <div clas ...

The popup is unable to remain in the center of the screen because the background page keeps scrolling back to the top

Whenever I click a button to open a popup window, the page unexpectedly scrolls to the top. It's frustrating because if I'm at the bottom of the page and press the 'submit' button, the popup doesn't display in the center as intende ...

Leveraging server-side data with jQuery

When my client side JQuery receives an array of JSON called crude, I intend to access and use it in the following way: script. jQuery(function ($) { var x = 0; alert(!{JSON.stringify(crude[x])}); ...

Creating a dropdown feature for menu items in Vue when the number or width of items exceeds the menu bar's limits

I am working on a navigation bar that displays menu items as tabs. One issue I am encountering is when the number of menu items exceeds the space available, I need to move the excess items into a dropdown menu (showmore) using Vue. Here is an example of t ...

Tips for revealing a hidden HTML tag

I am currently trying to validate the content within #textd to ensure it is not empty and contains more than 150 characters. If it meets these conditions, I need to transfer the content to another webpage; otherwise, display an error message based on the c ...

Creating a concise TypeScript declaration file for an established JavaScript library

I'm interested in utilizing the neat-csv library, however, I have encountered an issue with it not having a typescript definition file available. Various blogs suggest creating a basic definition file as a starting point: declare var neatCsv: any; M ...