CODEWITHSUNDEEP
javascriptangulartypescript
James Delaney
James Delaney

Reputation: 1776

How to dynamically remove and turn back two items from array?

I have two buttons and one array.

Button "OR" and Button "AND" and one Array(Dropdown) which have 7 items.

When you user click on "OR" button there should be removed 2 items from array.

But when user click on "AND" button there should be initial 7 items.

I would try to dynamically add and remove that two items from array. Which is best way to implement that?

Here is HTML of buttons(ruleOperator): 

<label *ngFor="let ruleOperator of ruleOperatorArray"
       [class.active]="rule.ruleOperator === ruleOperator.value"
       (click)="rule.ruleOperator = ruleOperator.value"
       class="nano-radio-button">
    <span>
        {{ ruleOperator.name }}
    </span>
</label>

Here is dropdown and that is on the same page with buttons: This "arrayOfOptions" is array from which I need to add/remove that items. 

<nano-drop-down [arrayOfOptions]="audienceRuleTypes"
                [selectedOptions]="rule.ruleClass"
                (selectedOptionsChange)="rule.onRuleChange($event)">
</nano-drop-down>

Here is how that array looks: 

export const RULE_ARRAY = [
    {value: 'SimplePixel', name: 'Simple Pixel Call'},
    {value: 'SearchTerms', name: 'Search Terms'},
    {value: 'DataPartner', name: 'Data Partner'},
    {value: 'Category', name: 'Category Rule'},
    {value: 'GeoCountry', name: 'Geo Location Country'},
    {value: 'GeoCity', name: 'Geo Location City'},
    {value: 'ImpressionAdvertiser', name: 'Advertiser (Viewer)'},
    {value: 'ImpressionCampaign', name: 'Campaign (Viewer)'},
    {value: 'ClickAdvertiser', name: 'Advertiser (Clicker)'},
    {value: 'ClickCampaign', name: 'Campaign (Clicker)'},
    {value: 'ConversionAdvertiser', name: 'Advertiser (Buyer)'},
    {value: 'ConversionCampaign', name: 'Campaign (Buyer)'}
];   
public audienceRuleTypes = RULE_ARRAY;

Upvotes: 0

Views: 79

Answers (1)

Vicky Kumar
Vicky Kumar

Reputation: 1408

As i understood from your question is that you have below array

[
    {value: 'SimplePixel', name: 'Simple Pixel Call'},
    {value: 'SearchTerms', name: 'Search Terms'},
    {value: 'DataPartner', name: 'Data Partner'},
    {value: 'Category', name: 'Category Rule'},
    {value: 'GeoCountry', name: 'Geo Location Country'},
    {value: 'GeoCity', name: 'Geo Location City'},
    {value: 'ImpressionAdvertiser', name: 'Advertiser (Viewer)'},
    {value: 'ImpressionCampaign', name: 'Campaign (Viewer)'},
    {value: 'ClickAdvertiser', name: 'Advertiser (Clicker)'},
    {value: 'ClickCampaign', name: 'Campaign (Clicker)'},
    {value: 'ConversionAdvertiser', name: 'Advertiser (Buyer)'},
    {value: 'ConversionCampaign', name: 'Campaign (Buyer)'}
];

On some event you want 5th and 6th element to be removed so the resulting array will be

[
    {value: 'SimplePixel', name: 'Simple Pixel Call'},
    {value: 'SearchTerms', name: 'Search Terms'},
    {value: 'DataPartner', name: 'Data Partner'},
    {value: 'Category', name: 'Category Rule'},
    {value: 'ImpressionAdvertiser', name: 'Advertiser (Viewer)'},
    {value: 'ImpressionCampaign', name: 'Campaign (Viewer)'},
    {value: 'ClickAdvertiser', name: 'Advertiser (Clicker)'},
    {value: 'ClickCampaign', name: 'Campaign (Clicker)'},
    {value: 'ConversionAdvertiser', name: 'Advertiser (Buyer)'},
    {value: 'ConversionCampaign', name: 'Campaign (Buyer)'}
];

For that what i will suggest is to keep two array like this

export const STATIC-PART = [
    {value: 'SimplePixel', name: 'Simple Pixel Call'},
    {value: 'SearchTerms', name: 'Search Terms'},
    {value: 'DataPartner', name: 'Data Partner'},
    {value: 'Category', name: 'Category Rule'},
    {value: 'ImpressionAdvertiser', name: 'Advertiser (Viewer)'},
    {value: 'ImpressionCampaign', name: 'Campaign (Viewer)'},
    {value: 'ClickAdvertiser', name: 'Advertiser (Clicker)'},
    {value: 'ClickCampaign', name: 'Campaign (Clicker)'},
    {value: 'ConversionAdvertiser', name: 'Advertiser (Buyer)'},
    {value: 'ConversionCampaign', name: 'Campaign (Buyer)'}
]; 

export const DYNAMIC-PART = [
    {value: 'GeoCountry', name: 'Geo Location Country'},
    {value: 'GeoCity', name: 'Geo Location City'}
]

Now on the event when you you want larger array add the DYNAMIC-PART and use and when you want smaller array simply use static part

To add dynamic part try this code

const z = STATIC-PART.splice(4, 0, DYNAMIC-PART[0], DYNAMIC-PART[1]);

First parameter to splice indicates to change at 4th position Second parameter indicates how many item to remove for us it is 0 Rest other indicates items to be inserted https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice Read more on splice

Upvotes: 1

Related Questions