?
Solved

Get array elements with condition in javascript

Posted on 2016-08-03
7
Medium Priority
?
137 Views
Last Modified: 2016-08-13
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
Comment
Question by:ksd123
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
7 Comments
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41742247
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
 

Author Comment

by:ksd123
ID: 41743605
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
 

Author Comment

by:ksd123
ID: 41745928
Hi Experts,

Looking for some help on the above issue.
0
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
LVL 4

Expert Comment

by:Srinivasulu Muppala
ID: 41753432
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
 
LVL 58

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 41753530
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
 

Author Closing Comment

by:ksd123
ID: 41754576
Thank you
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41754621
You are welcome.
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question