[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 170
  • Last Modified:

Get array elements with condition in javascript

Hi,

I am working on AngularJS and have a menu with 5 items ,here is a working pen menu that demonstrates my scenario, I took array of elements and passing item to the function. My requirement is I have to show menu items based on condition.ie. sometimes I can see only 2 items in the menu.How can I achieve in a efficient way in javascript.

Thanks in advance
0
ksd123
Asked:
ksd123
  • 3
  • 3
1 Solution
 
Julian HansenCommented:
Angular 1.x or Angular 2?

Why not use ng-show / ng-hide

https://docs.angularjs.org/api/ng/directive/ngShow
https://docs.angularjs.org/api/ng/directive/ngHide

Without knowing the specifics of your code and the conditions you want to hide show on - cannot provide a code solution - however if you do  something like this

<ul>
  <li ng-repeat="item in items" ngShow="item.value==condition">{{item.option}}</li>
</ul>

Open in new window

Or if you need more control over the condition
<ul>
  <li ng-repeat="item in items" ngShow="showItem(item)">{{item.option}}</li>
</ul>

Open in new window

And the in your controller you return true or false from the showitem function based on the criteria you want to show / hide on
0
 
ksd123Author Commented:
Thank you for your response.I am using Angular 1.5 . Could you please elaborate the above explanation.

My requirement is , In the pen I took array of elements in javascript to show in menu (In reality the  Menu items will be New, Delete, Update, Print etc.) . From API I get some data and based on condition the menu items will change.

Ex:

If condition1==true
showMenuItems=["NEw", "Print"];

If condition2==true
showMenuItems=["Update","Print"]

If condition3==true
showMenuItems=["New"," Delete", "Update", "Print"]

My question is should I take 3 separate arrays as I have 3 conditions with different array of elements or should I add / remove elements in the array based on condition . It would be great if you provide sample code.

Thanks in advance
0
 
ksd123Author Commented:
Hi Experts,

Looking for some help on the above issue.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Srinivasulu MuppalaCommented:
var conditions = {
      {         Option: “New”,
                          Condition: 1,
            Option: “Print”,
                          Condition: 1,
      },
      {         Option: “Update”,
                          Condition: 2,
            Option: “Print”,
                          Condition: 2,
      },
}
Var filterCondition = 1;
You can filter the JSON data as
Var showMenuItems  = Conditions.filter(function(item){ return item.Condition == filterCondition; })
0
 
Julian HansenCommented:
I have created a new fork http://codepen.io/anon/pen/akPgaw

This makes the following changes
HTML
<md-menu md-offset="0 -7">
  <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
    <md-icon md-menu-origin="" md-svg-icon="call:chat"></md-icon>
  </md-button>
  <md-menu-content width="2">
    <md-menu-item 
      ng-repeat="item in ctrl.menuItems" 
      ng-show="item.conditions.indexOf(ctrl.condition) != -1">

      <md-button  ng-click="ctrl.announceClick(item)"> <span md-menu-align-target=""></span> {{item.caption}}</md-button>
    </md-menu-item>

  </md-menu-content>
</md-menu>

Open in new window

Angular
function DemoCtrl($mdDialog) {
  var vm = this;

  // condition determins what is shown
  vm.condition = 3;
  
  // menuItems array changed to be an array
  // of objects with a caption and an array
  // that specifies what conditions are 
  // valid for this menu item
  
  vm.menuItems=[{
    caption: "Option 1",
    conditions: [1,2]
  },{
    caption: "Option2",
    conditions: [2,3]
  },{
    caption: "Option3",
    conditions: [1,2,3]
  },{
    caption: "Option4",
    conditions: [2]
  },{
    caption: "Option5",
    conditions: [1,2,3,4]
  }];
  
  ...
}

Open in new window

You will see that the Angular code changes the definition of the menuItems so they are now an array of objects with a caption and an array showing what conditions the item is valid for.
The HTML has an ng-show that shows the item based on whether the current ctrl.condition value is contained in the items conditions array.
0
 
ksd123Author Commented:
Thank you
0
 
Julian HansenCommented:
You are welcome.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now