Remove element from associative array in TypeScript

I encountered a code snippet like the one below

let  failures: Map<string, Array<string>> = new Map([
  ['1', ['a', 'b']],
  ['2', ['c', 'd']],
  ['3', ['e', 'f']]
])

Now suppose I have a specific key value as follows

const keyItem = '2'.

Given this keyItem, how can I remove 'c' from the array of strings in the failures map?

Answer №1

To retrieve the original array, you can utilize failures.get(keyItem), then eliminate c using either Array.prototype.splice() or Array.prototype.filter(). Finally, use

failures.set(keyItem, modifiedArray)
to update it back into the Map.

let failuresMap: Map<string, Array<string>> = new Map([
  ['1', ['a', 'b']],
  ['2', ['c', 'd']],
  ['3', ['e', 'f']]
])

const keyItemToUpdate: string = '2'

const updatedArray: Array<string> = (failuresMap.get(keyItemToUpdate) ?? [])
  .filter(character => character !== "c")

failuresMap.set(keyItemToUpdate, updatedArray)

console.log([...failuresMap])

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

What is the best way to include the ID in a Vue.js Ajax request for posts?

Is there a way to pass an "id" obtained as data in vue js? The id is coming as "agnt.basic.actor". Considering the presence of multiple ids, how can I achieve this? <tr v-for="agnt in agentlist"> <td v-if="agnt.basic">{{agnt.basic.actor}}< ...

Comparing two tables in jQuery/Javascript for matching data

I want to check for matches between the rows of two HTML tables, where the data in the first cell can be duplicated but the data in the second cell is always unique. The goal is to determine if the combination of values in the first and second cells of tab ...

Vue Js and form-data Event: A deeper look into handling form

Hey there #Vue.js2 I'm facing an issue while trying to create a function that is called within a form submit event. This particular function needs both the EVENT and ID as parameters. The problem arises when I call this function, as I am unable to spe ...

Discover how to extract a whole number (and *exclusively* a whole number) using JavaScript

Is it possible to convert a string to a number in a way that only integers produce a valid result? func('17') = 17; func('17.25') = NaN func(' 17') = NaN func('17test') = NaN func('') = NaN func('1e2& ...

Erasing the content of a text field with the help of a final-form computation tool

I'm attempting to utilize the final-form calculator in order to reset a field whenever another field is modified. In my scenario, there are two fields. Whenever the first field changes, the second field gets reset as expected. However, an issue aris ...

The import specifier "Nuxt 3 package #internal/nitro" is not recognized

After attempting to upgrade Nuxt.js to the latest version using the command: npx nuxi init nuxt-app I successfully ran and tested a project in Nuxt 3. However, upon running the following command: npm run generate An error message was displayed: ERROR ...

Learn the steps to create a 3D carousel that spins on its own without the need for manual clicks and pauses once the

Looking for a solution to create a 3D carousel that rotates continuously without the need for buttons to be clicked, and pauses when the mouse hovers over it, then resumes rotation when the mouse is not hovering over it. var carousel = $(".carousel"), ...

What is the best way to get process.argv to display only the arguments and exclude the node command and path?

As the title suggests, I am working on a substantial project that involves AppleScript and iMessage. After testing the script, it successfully opens Terminal and executes: node ~/Desktop/chatbot [argument]. However, at the moment, all it returns is: [ &apo ...

Can anyone suggest an effective method for displaying images using JavaScript by specifying a route and filename?

Currently, I have the following code snippet: const route = '/Images/Banner/'; const slides = [ { name: "banner-01", url: `${route}banner-01.png` }, { name: "banner-02", url: `${route}banner-02.pn ...

Craft fresh items within HTTP request mapping

I am currently working on a function that subscribes to a search api. Within the map function, my goal is to transform items into objects. I haven't encountered any errors in my code, but the response always turns out empty. Here's the snippet o ...

Issue detected: Props that are of type Object/Array must utilize a factory function in order to provide the default value

I recently started using Vue-Cli3.0 and came across this interesting module for Vue.js called https://github.com/holiber/sl-vue-tree It's a customizable draggable tree component for Vue.js, but I encountered an issue where it couldn't copy funct ...

Tips for showing the React-Select array label in a text field

I'm a beginner in the world of React and I've encountered a puzzling issue. I'm attempting to showcase the selected value from a dropdown component in the adjacent text field in my React project. Can anyone guide me on how to achieve this? ...

nanoExpress Route Isolation

I am facing an issue while trying to separate route directories in my project. The error I encountered is as follows: rror [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './cjs' is not defined by "exports" in /mnt/.../projects/.../nan ...

Utilize Multer to seamlessly upload a file in Node.js and Angular environment

I am facing a challenge while trying to upload a file to my SQLite3 database. Every time I attempt the code below, I encounter a 500 error, although there is no indication of such an error in my request. I also experimented with using formData, but unfortu ...

Draggable bar charts in Highcharts allow users to interact with the data by clicking

I'm working on creating a chart that allows for setting values by clicking and dragging. While the dragging functionality is working fine, I've run into an issue with the click event. When I click to set a new value, the draggable feature acts er ...

Ways to combine multiple then() promises into a single one

I have a section of code where I am using multiple then() methods. I am looking to streamline this and have it only utilize one then(). Is there a way to achieve this? getGreeting = () => { fetch(url) .then((response) => response.json()) ...

What is the best way to navigate through this array within my nextjs/typescript/fetch application?

Having trouble finding a way to efficiently search through the CustomersList array. Any help would be greatly appreciated. Here's what happens after fetching the data: const data = await res.json(); return { props: { CustomersList: data, ...

Triggering JavaScript Function When Scrolling in Overflowed DIV

After using jQuery and searching for various ways to make this script work, I finally found a solution that works for my index.html file. <div style="overflow-y:scroll; height:300px"> <div style="background-color:black; height:500px"> </div ...

HTML integration of JavaScript not working as expected

My experience with separating files in HTML and JS has been positive - everything works smoothly when I link the JS file to the HTML. However, an issue arises when I decide to include the JS code directly within <script> tags in the HTML itself. The ...

Retrieve all elements within the iframe element

I have encountered a situation where I am using an iframe tag to load an epub file. However, I'm unsure of how to access all the elements within the iframe tag. jQuery(document).ready(function($) { var content = $('#epub_loader iframe&apo ...