How to retrieve a refined selection of items

In my scenario, there are two important objects - dropdownOptions and totalItem

The requirement is as follows:

  • If 12 < totalItems < 24, then display "Show 12, Show 24"
  • If 24 < totalItems < 36, only show "Show 12, Show 24, Show 36"

This pattern continues. I attempted to use a computed property, but struggling with how to implement these conditions within the object.

const dropdownOptions = {
 12: "Show 12",
 24: "Show 24",
 36: "Show 36",
 48: "Show 48",
}

const totalItem = 19

const dropdownOptionFiltered = computed(() => {
 if (dropdownOptions) {}
 return dropdownOption
})
javascriptvue.js

Answer №1

const dropdownOptions = {
  12: "display 12",
  24: "display 24",
  36: "display 36",
  48: "display 48",
}

const totalItem = 19

const filteredOptions = () => {
  let num = Object.keys(dropdownOptions).filter(x => x < totalItem).length + 1
  return Object.fromEntries(
    Object.entries(dropdownOptions).slice(0, num)
  )
}
console.log(filteredOptions())

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

change the width of a div element to match that of its nearest sibling element

Can the width of a div be automatically set to match its closest sibling when the width is set to width: auto;? In my coding example on jsFiddle, you can observe three colored divs - red, green, and blue. I am aiming for the blue div to adjust its size ba ...

javascriptjqueryhtmlcssstyling

Monitoring Vue for ongoing HTTP requests

Upon mounting a component, it initiates 4 HTTP requests (using Axios) to fetch the necessary data. Is there a method to monitor for any outstanding HTTP requests? To simplify: Are there any pending HTTP requests? yes -> Loading=true no -> Loading ...

vue.jshttphttpsaxios

JQuery: Issue with closing modal on certain popups

I have configured a popup that is associated with 6 different products. While it functions correctly for the first product, it does not seem to work properly for the rest. <script> //var modal = document.getElementById("m ...

javascriptjquery

Executing a serverless function in Next.js using getStaticPaths: A step-by-step guide

In my current project, I am utilizing Next.js and the Vercel deployment workflow. To set up page generation at build time, I have been following a guide that demonstrates how to generate pages based on an external API's response. // At build time, t ...

javascriptnode.jsnext.jsserverlessvercel

Developing Modules in NodeJS using Constructors or Object Literals

I am currently developing a nodejs application that needs to communicate with various network resources, such as cache services and databases. To achieve this functionality, I have created a module imported through the require statement, which allows the a ...

javascriptnode.js

Click event not functioning in programmatically loaded HTML

I am facing an issue with a JSON file that contains the page content I am trying to load. The link within it appears as follows: <a data-ng-click='foo()'>Bar</a> When I load this page content into the HTML page: <p class="body" ...

javascriptangularjs

Capturing Screenshots with Ionic Framework

I am currently working on an Ionic application that utilizes geolocation via the Google API. However, I am facing a challenge with implementing a feature where a button in the upper right corner should take a screenshot and trigger a popover with options t ...

javascriptangularjscordovaionic-framework

I created a thorough duplicate that successfully addressed an issue with a table

Currently, I am facing an issue with the material-table library as it automatically adds a new element called tableData to my object when I update it using Patch in my code and API. To resolve this problem, I tried implementing both a conventional and cust ...

javascriptreactjsmaterial-uideep-copy

Utilize AngularJS to refine and sort through data retrieved from an API

I have an Angular application that is fetching hotel data from an API. I want to filter the results based on the minimum price of the hotels being less than $50. $http.get($rootScope.baseurl + 'api/hotels/', { params: { page_ ...

javascriptangularjs

Utilize the conditional GET method when including scripts through tags in an HTML webpage

Is it possible to benefit from HTTP conditional requests when including a script in the head section of a page? My goal is to cache dynamically downloaded JavaScript files that are added to the head section using script tags. If this approach isn't fe ...

javascripthtmlhttpfrontend

Step-by-Step Guide on Dividing Table Row Data into Two Distinct Tables

At present, I have created a dynamic table that retrieves data from the database using forms in Django. I'm facing an issue with this table as even though there are 7 columns, only 2 of them are visible. However, all 5 hidden columns do contain impor ...

javascriptjquery

Obtaining the selected date value from a Vue.js datepicker

How can I calculate the difference in days between two selected dates in Vue.js before the form is submitted? I want to provide a price based on this calculation. I am using a Persian date picker, which you can find here: https://github.com/talkhabi/vue- ...

javascriptphplaravelvue.js

Bring back object categories when pressing the previous button on Firefox

When working with a form, I start off with an input element that has the "unfilled" class. As the user fills out the form, I use dynamic code to remove this class. After the form is submitted, there is a redirect to another page. If I click the "back" ...

javascriptjquerycss

The current status of Dropzone.js is in a pending state, preventing the upload of any

I have integrated Multer in the back-end for file upload handling and Dropzone.js in the front-end. Testing my back-end code with Postman works perfectly, but when using Dropzone, the status remains pending and the file does not get uploaded. After waiting ...

javascriptnode.jsbackbone.jsexpressdropzone.js

Incorporate image into Vue.js form along with other information

I have been successfully sending the content of multiple fields in a form to the Database. Now I am looking to add an additional field for uploading images/files and including it with the other form fields, but I am unsure about how to accomplish this task ...

javascriptphpvue.js

Do we need to utilize a server folder in Nuxt 3 if we have API endpoints?

In Nuxt 3, there is a dedicated server folder containing an api subfolder. Why should we utilize this when we already have API endpoints built with a server-side programming language like Laravel? Are they linked in any way? For instance, consider these ...

javascriptvue.jsvuejs3nuxt.jsnuxt3

Tips for protecting API keys with Nuxt and ensuring their authentication

Currently, I am utilizing Nuxt, including SSR, PWA, Vuejs, Node.js, Vuex, and Firestore. I am seeking guidance or examples regarding the following: How can I ensure the security of an API key, such as for accessing the MailChimp API? I am unsure of how v ...

vue.jsvuejs2middlewarenuxt.jsapi-key

Locate every item that has a value that is not defined

My data is stored in indexeddb, with an index on a text property of the objects. I am trying to retrieve all objects where this property's value is undefined. I have been experimenting with IDBKeyRange.only(key), but when I use null, undefined, or an ...

javascriptindexeddb

What could be causing the <td> onclick event to fail in asp.net?

Having an issue with making a <td> clickable to display a div. Check out my code snippet below: <td id="tdmord" style="padding-left: 15px; color: #86A7C5; padding-right: 15px; font-family: Arial; font-size: small;" onclick="return showDiv1()"& ...

javascriptonclickhtml-table

``Is there a way to access the $attrs data of child DOM elements from within a controller?

Imagine having a controller and multiple children DOMs each with their unique data attributes. <!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> < ...

javascriptangularjsdomangularjs-scope