{"id":9473,"date":"2024-02-02T05:30:05","date_gmt":"2024-02-02T05:30:05","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=9473"},"modified":"2024-02-02T05:34:38","modified_gmt":"2024-02-02T05:34:38","slug":"conditional-javascript-filter","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/javascript\/conditional-javascript-filter","title":{"rendered":"Conditional Javascript Filter"},"content":{"rendered":"<p>Based on the question example, we can apply filter conditionally<\/p>\n<p>Let\u2019s say we want to skip the filter for the all type condition but what to do filter for all the other types. We can use <strong>if condition<\/strong> or <strong>ternary operator<\/strong> to check is and return result based on that<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">let assets = [\r\n   { id: 1, type: 'image', url: 'image.jpg' },\r\n   { id: 2, type: 'video', url: 'video.mp4' }\r\n]\r\n\r\nlet currentOption = 'image'\r\n\r\nfunction getFilteredResult() {\r\n   if (currentOption === 'all') {\r\n       return assets\r\n   } else {\r\n       return assets.filter(a =&gt; a.type === currentOption)\r\n   }\r\n}\r\ngetFilteredResult();<\/pre>\n<p>Not if you look at the code above. We have an assets array with all the different types of data for image and video.<\/p>\n<p><strong>currentOption<\/strong> is the current data we want to filter from assets. And if currentOption is `all` we will return all data from array. We have create one <strong>getFilteredResult<\/strong> function which will do it conditionally.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Based on the question example, we can apply filter conditionally Let\u2019s say we want to skip the filter for the all type condition but what to do filter for all the other types. We can use if condition or ternary operator to check is and return result based on that let assets = [ { [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":9477,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[22],"tags":[],"class_list":["post-9473","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9473"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=9473"}],"version-history":[{"count":3,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9473\/revisions"}],"predecessor-version":[{"id":9476,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9473\/revisions\/9476"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/9477"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=9473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=9473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=9473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}