Obtain the Value of an Object using a Dynamic Key in Vue.js

In my configuration file, I have TypeScript data like this:

const filtersTracking = {
  [SEARCH_TYPE_ARTICLES]: {
    orderBy: {
        category: 'Search Filter Legal Tips',
        action: 'Sorting Selection',
    },
    practiceAreas: {
      category: 'Search Filter Legal Tips',
      action: 'Practice Area Selection',
    },
    ratingAverage: {
      category: 'Search Filter Legal Tips',
      action: 'Star Rating',
    },
    ratingCount: {
      category: 'Search Filter Legal Tips',
      action: 'Number of Ratings',
    },
    publicationYear: {
      category: 'Search Filter Legal Tips',
      action: 'Publication Year',
    },
    isGuide: {
      category: 'Search Filter Legal Tips',
      action: 'Guide',
    },
    hasVideo: {
      category: 'Search Filter Legal Tips',
      action: 'Video',
    },
    internationalLaws: {
      category: 'Search Filter Legal Tips',
      action: 'International Law',
    },
  },
}

I am trying to extract the 'category' and 'action' data using different methods but none seem to work:

  1. filtersTracking[SEARCH_TYPE_ARTICLES][key]
  2. filtersTracking[SEARCH_TYPE_ARTICLES].key
  3. filtersTracking[SEARCH_TYPE_ARTICLES].[key]

The variable 'key' dynamically holds the data key (e.g., 'orderBy' or 'practiceArea').

public function(key) {
console.log(filtersTracking[SEARCH_TYPE_ARTICLES][key])
}

Answer №1

Your query seems to be related to the error message you encountered:

BTL, export const SEARCH_TYPE_USERS = 'users'; Element implicitly has an 'any' type because expression of type 'string | number' cannot be used to index type.

To resolve this issue, you can refer to the following post:

Element implicitly has an 'any' type because expression of type 'string' cannot be used to inde

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

Compare and contrast the functions of scrollToIndex and manual scrolling in a React Native FlatList

Currently, my FlatList is set up to automatically scroll item by item based on a time series using the scrollToIndex function. However, I also want to allow users to manually scroll through the list and temporarily pause the automatic scrolling when this ...

Error TS6059 in Angular monorepo: The file 'ng-youtube-api.service.ngtypecheck.ts' is not located within the 'rootDir' directory. The 'rootDir' should include all source files

Creating multiple Angular libraries/packages is crucial for organizing code efficiently. In this case, I have developed three distinct packages: @example/ng-youtube-player: includes a YoutubePlayerComponent and the associated YoutubeApiService @example/ng ...

The inner map function isn't being executed in Rxjs

I have written some code that utilizes two pipes to load a product instance along with its playlist. In case there is an error while loading the playlist, the property is set to null: getProduct(productId: number): Observable<ProductDTO> { retur ...

How to effectively combine css() and delay() in jQuery?

fid: https://jsfiddle.net/k13sazuz/ Is there a way to create a delay chain for CSS rules using jQuery? $('.two').css('background','blue').delay(11800).css('background','red'); ...

JavaScript recording speed

I am currently working on a project that involves video recording on my website. After creating a canvas and pushing the recorded frames to it, I have encountered an issue. The playback of the video is too fast - a 10-second video plays in around 2 second ...

Creating a property or method on the instance prior to rendering

During my journey of learning Laravel and Vue.js, I encountered a challenging issue that has proven to be quite perplexing. Despite delving into the depths of Laravel and Vue.js documentation, as well as scouring the internet for solutions, I remain unable ...

A guide to simulating an imported component in cypress using Vue

I've been struggling to figure out how to mock an imported component in Cypress Component Testing. Imagine we have a Parent.vue component: <template> <ChildComponent /> </template> <script setup> import ChildComponent fro ...

How to Utilize Puppeteer for Redirecting Pages While Preserving Cache?

Currently, I am facing a challenge with my code in JavaScript that is responsible for opening a page and logging in. Once Puppeteer finishes the login process, I need it to redirect to another page on the same site without clearing the cache. I attempted ...

What is the best method for expanding the width of a <rect> element with animateTransform?

How can I make a <rect> in SVG expand its width using animateTransform based on a specified value? Additionally, I want the color of the <rect> to change according to the following conditions: If the <rect> value is between 0 and 29: {f ...

Chapter on how to generate a new bootstrap row for every pair of elements in Angular

I am facing a challenge with adding a row after every 2 elements in an ngFor loop. I have an array called studentNames which looks like this: studentNames=[ { name:"Jonas", age:22, number:"1234" }, { name:"Mathil ...

Utilizing multiple API requests within a single Angular service

I am using Angular $http requests to access an API and retrieve information about various football teams. If I were only dealing with one team, it would be simple - I would create a Service that makes the request and then use that function in my controlle ...

Click on the "Read More" button to display a popup notification confirming the successful payment

I'm working on adding a "read more" button, but I want it to have some extra functionality. When clicked, I'd like it to trigger a pop-up message that says successful payment received, and then reveal the remainder of the paragraph. Below is the ...

Stop the spread - Touch to choose - React with Material Design

I am currently utilizing ReactJS along with the library @material-ui/core. In my code, I am seeking to halt event propagation on Click. Here is the snippet: <NumPad.Number onChange={val => { this.setPrice(val) } }> <TextField ...

Initiate the Selenium server with Protractor using a specified port

The configuration below is causing the server to start on a different port each time by protractor, rather than the specified port. exports.config = { allScriptsTimeout: 11000, multiCapabilities: [ { browserName: 'chrome', shardTestFiles: ...

Ways To Create Multiple HTML Players

After successfully creating an audio player with html, css and javascript, I now face the challenge of adding multiple players to a single page. However, when attempting to play any player besides the first one, it only plays the initial player. How can ...

I am struggling to set up angular-localstorage4

I have been following the instructions in the provided link: angular-localstorage4 When attempting to import WebStorageModule and LocalStorageService from angular-localstorage, I encounter an error in the console even though the compilation is successful. ...

What is the best way to individually update elements in an array in Ionic v5?

As a newcomer to Ionic and TypeScript, I would appreciate your kindness in helping me with a problem I am facing. I have an array of objects that get updated when adding an 'exercise', where you can specify the number of sets and reps. The issue ...

retrieve the promise from the store following the dispatch of the redux thunk

I need help understanding how to properly chain dispatches with Redux Thunk function createSimpleAction(){ return {type: "SIMPLE_ACTION"} } export function createAsyncAction(){ return function(dispatch, getState){ return dispatch(createSimpleActi ...

Pros and Cons of Using HTML5 Mode versus Hash Mode in AngularJS

When using AngularJS 1.3, it is necessary to include the <base> tag in HTML5 mode. This led me to consider the pros and cons of HTML5 mode versus Hash mode. In Hash mode, the major drawback is that URLs can appear unattractive and may not be easy fo ...

Retrieve information from a dropdown menu that is dependent on the selected value from another dropdown

   Check out this sample API data - I currently have three dropdown menus set up: From Release To Release Compatibility When a specific from release is selected, all corresponding to releases associated with that specific from release should be displ ...