How to retrieve a refined selection of items

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

https://i.sstatic.net/VreXd.png

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

Formatting Date and Time in the Gridview of my Asp.net Application

I have been using this format to display the date and time in a grid. The issue I am facing is that I cannot retrieve the exact HH:MM from the database. Even though the database shows 11:11, my grid is displaying 11:03 instead. Here is the value stored in ...

javascriptjqueryasp.netasp.net-mvcdatetime

Eliminate the need for background video buffering

I have a piece of code that I'm using to remove all the created players for my video elements. The code works fine, but I'm facing an issue where the video keeps buffering in the background after it's changed via an ajax call success. Can yo ...

javascriptjqueryhtmlvideomediaelement.js

Collaborative spreadsheet feature within a browser-based software platform

I am using an Angular-based SPA for my web application. My goal is to be able to open an Excel file within the application itself. Currently, I have a menu button or link that is linked to a specific path, for example //192.168.10.10/sharedExcels/myExcel. ...

javascripthtmlexcelangular

Streaming videos on Xbox One is not supported while in developer mode

Currently, I am facing a challenge with my UWP app that runs a web application made for Xbox One. There is a bug that only appears after approximately 4 hours of streaming video content, causing the app to freeze unexpectedly on the machine. The issue lie ...

javascriptuwpxbox-one

How to detach functions in JavaScript while preserving their context?

Can functions in JavaScript be detached while still retaining access to their context? For instance, let's say we have an instance of ViewportScroller called vc. We can retrieve the current scroll position with the following method: vc.getScrollPosi ...

javascriptnode.jstypescript

The AJAX call returned undefined, leading to an error when trying to access the length property

I've scoured various resources to find a solution for this issue, but unfortunately, I haven't had any luck with implementing the code. The problem lies with my JSON parser function, which is designed to construct a table based on data received ...

javascriptjqueryjsonajax

The Object filter is experiencing a delay with processing 10,000 items

When an API returns over 10,000 objects in the format of {firstName:'john',lastName:'Cena'}, I am faced with a performance issue. In my parent React component, I make the API call in componentDidMount and pass this object to child compo ...

javascripttypescript

Issue: Unauthorized access: nodeMailer despite correct configuration

Having trouble with an error when using the less app option on Gmail. I don't have 2-factor authentication enabled, and my credentials are correct. I can log in to my file to verify this, but the error still persists. const nodemailer = require(" ...

javascriptnode.jsemailnodemailer

Can Google Maps be initialized asynchronously without the need for a global callback function?

Currently, I am working on developing a reusable drop-in Module that can load Google Maps asynchronously and return a promise. If you want to take a look at the code I have constructed for this using AngularJS, you can find it here. One issue I have enco ...

javascriptangularjsgoogle-mapsgoogle-maps-api-3asynchronous

What is the most effective approach to building this function in React JS rather than the existing .map method?

Hello, I'm fairly new to all of this so please bear with me. I've been working on developing a search function for my app, but I've encountered a problem. The search function in my header component is being rendered like this in my index: &l ...

javascriptnode.jsreactjsmongodbnext.js

Framer motion layout animation fails to account for page scrolling during transitions in NextJs routes

Currently, I am working on a fascinating NextJS project that showcases a series of interactive blocks. As the user navigates through the app, these blocks dynamically adjust their size and position on the screen. To achieve this effect, I'm leveragin ...

javascriptnext.jsframer-motionnextjs-dynamic-routing

Displaying object properties within another object obtained from an API request in a React component

Dealing with API data can be tricky, especially when there are nested objects involved. I've encountered an error message stating 'undefined is not an object (evaluating 'coin.description.en')', as the description property of the c ...

javascriptreactjsnested-objectjsonobjectrequest

Disabling a button after it's been clicked using Vue.js

I have a button on my website that grants bonuses to the user. This button has multiple conditions within it: <button class="btn btn--small btn--purple" :disabled="isDisabled" @click="takeBonus">Take</button> < ...

vue.js

Importing Angular libraries with the * symbol

One of the key modules in my library is sha256. To import it, I had to use the following syntax: import sha256 from 'sha256'; However, while researching this issue, I came across a question on Stack Overflow titled: Errors when using MomentJS ...

javascriptangulartypescriptnpm

Distinguishing a button based on its class

I am currently designing a website to showcase personalized store products. Each product info box includes a button, as shown in the screenshot below: https://i.sstatic.net/hiXiY.png Upon clicking on the "Options" button, users can view information about ...

javascriptjquery

Determine the height of an element in JavaScript or jQuery by using the CSS property height: 0;

I'm facing a challenge in determining the actual height of an element, which currently has a CSS height property set to: height: 0; When I check the console, it shows a height of 0, but I'm looking to find the real height of the element. I als ...

javascriptjquerycssheight

Issue with vue-template-compiler in Vue.js 3 webpack configuration

I am currently working on integrating vuejs 3 into a project that already utilizes webpack. I have been looking into using vue-loader as part of this process. After consulting the official documentation, I came across the following information: Every new ...

javascriptvue.jswebpackvuejs3vue-loader

Error: Access Denied - discord.js bot command cannot be executed due to lack of authorization

Every time I initiate the bot and try to execute my "ping" command, an error occurs: js:350 throw new DiscordAPIError(data, res.status, request); ^ DiscordAPIError: Missing Access at RequestHandler.execute (C: ...

javascriptnode.jsdiscorddiscord.jsbots

With a GroupAvatar, my Avatar named "max" likes to dance to the beat of its own drum rather than following the rules of my

I am currently working on creating an AvatarGroup using MaterialUi. I have successfully applied a style to all my avatars, except for the avatar that is automatically generated by AvatarGroup when the "max" parameter is defined. const styles = makeStyl ...

javascriptreactjstypescriptmaterial-uiavatar

Leveraging npm in vanilla JavaScript applications

Because of limitations set by the governance of my current project, I am unable to utilize many of the modern JS libraries and frameworks. Therefore, for our MVP, we are resorting to using vanilla JS directly loaded to the client (un-minified), which is no ...

javascriptnpmecmascript-5