Display values from array base on the selected values (build a string from array)

Question

I need to display custom string values base on the selected values from an object array. I think I'm close but there is a small issue that I cannot figure out.

Right now If I selected everything from "Gained" and one Item from "Static" the return statement will be "Gained" and if I selected all from "Static" and one item from "Gained" the result will be Static,

HTML Block

<a class="customSegmentSelectorButton" title="{{ ::$parent.Labels.SEGMENTSELECT }}">
    <span ng-if="totalSelectedOptions() == 0">No KPIs</span>
    <span ng-if="totalSelectedOptions() > 0">Sum of {{selectedOptionsLabel()}} </span>
</a>

Component

customSegmentOptions = [
    {
        Label: "Gained",
        Children: [
            {
                Label: "New",
                Value: "New",
                Selected: true
            },
            {
                Label: "Win",
                Value: "Win",
                Selected: true
            },
            {
                Label: "Add-On",
                Value: "AddOn",
                Selected: true
            }
        ]
    },
    {
        Label: "Static",
        Children: [
            {
                Label: "Restart",
                Value: "Restart",
                Selected: true
            },
            {
                Label: "Repeat",
                Value: "Repeat",
                Selected: true
            }
        ]
    }
];

selectedOptionsLabel = function(){
    var customSegmentOptions = scope.$parent.customSegmentOptions;
    var isGainedSelected = false;
    var isStaticSelected = false;
    var isChildrenSelected = false;
    var selectedChildrenToDisplay = [];

    for(var index = 0; index < customSegmentOptions.length; index++){
        var item = customSegmentOptions[index];
        var children = item.Children.filter(x => x.Selected == true);
        if(item.Children.length == children.length){
            if(item.Label.toLowerCase() == 'gained'){
                isGainedSelected = true;
            }else{
                isStaticSelected = true;        
            }  
        }    
        selectedChildrenToDisplay = selectedChildrenToDisplay.concat(children.map(x => x.Label));                                      
    }

    isChildrenSelected = selectedChildrenToDisplay.length < 5 && !isGainedSelected ? true : false;

    switch (true) {
        case isGainedSelected && !isStaticSelected && !isChildrenSelected:
          return "Gained";
        case isStaticSelected && !isGainedSelected && !isChildrenSelected:
          return "Static";
        case isStaticSelected && isGainedSelected:
           return "Gained & Static";
        case (!isStaticSelected || !isGainedSelected) && isChildrenSelected:
           console.log(selectedChildrenToDisplay);
         return "children"
      }
};

What I am trying to build is when all of one section is selected then I need to return a string such as

"Sum of Gained" - if only Gained is selected
"Sum of Static - if only Static is selected
"Sum of Gained & Static" - if both Gained and Static are selected

When all of one section is NOT selected then I want to list the individual children names separated by commas when applicable and the last comma should be a "&" for example - "Sum of New, Win & Restart")

please share html as well

Naga Sai A
– Naga Sai A

2019-06-19 19:39:47 +00:00
Commented Jun 19, 2019 at 19:39 — Naga Sai A
– Naga Sai A, Commented Jun 19, 2019 at 19:39
@NagaSaiA Done, I have Added Html code. Thank you

Markov
– Markov

2019-06-19 19:45:44 +00:00
Commented Jun 19, 2019 at 19:45 — Markov
– Markov, Commented Jun 19, 2019 at 19:45

Gabe Gates · Accepted Answer · 2019-06-20 02:59:48Z

1

It looks like the following is only evaluating to true when all children have Selected equal to true.

if(item.Children.length == children.length){

If I’m not mistaken to get your desired output you would want:

if(children.length > 0){

Because children represents the Selected items in your list.

answered Jun 20, 2019 at 2:59

Gabe Gates

1,0501 gold badge16 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Markov Over a year ago

Yes that worked, had to modify the logic a bit, this helped me out thanks.

Collectives™ on Stack Overflow

Display values from array base on the selected values (build a string from array)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related