What is the method for returning a string array?

My query is about how to return a string[]. Currently, TypeScript is throwing an error because each element of the array has a type of ( T[keyof T] extends readonly (infer InnerArr)[] ? InnerArr : T[keyof T] ). How can I accept the 'property' argument as a string to return string[]? If I just use 'string' instead of keyof T, TypeScript throws an error because it can't identify property in the unknown type on the line item[property].


interface IMovie {
  genre: string[];
  actors: string[];
}

const movies: IMovie[] = [
  {
    genre: ['Action', 'Sci-Fi', 'Adventure'],
    actors: ['Scarlett Johansson', 'Florence Pugh', 'David Harbour'],
  }
];

function collectByProperty<T>(arr: T[], property: keyof T): string[] {
  const array = arr.map((item) => item[property]).flat();
  const elem = array[0];
  const final = [...new Set(array)];
  return final;
}
const genres = collectByProperty<IMovie>(movies, 'genre');
const actors = collectByProperty<IMovie>(movies, 'actors');

console.log(genres);
console.log(actors);

I attempted to create a variable within the function body and assign the property to it.

Answer №1

Opt for flatMap over map followed by flat:

let array = arr.flatMap((element) => element[property]);

Answer №2

It is important to ensure that the array in your collectByProperty function is flattened, as it initially generates a nested array structure (for example:

[['Action', 'Sci-Fi'], ['Drama']]
). By flattening this array, you will transform it into a one-dimensional array (['Action', 'Sci-Fi', 'Drama']), aligning with the desired output.

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

Mastering the Art of Tab Selection with Jquery

I am trying to implement a tabs control using jQuery. Here is the HTML code I have: <div id="tabs" class="news1"> <ul> <li><a href="#tabs-1">Track</a></li> <li><a href="#tabs-2">History&l ...

Can the lib property in tsconfig.json override the target property?

Just starting out with Typescript, I have a query regarding the lib and target properties. Below is my tsconfig.json file: { "compilerOptions": { "target": "es5", "outDir": "./dist", "rootDir": "./src", "noEmitOnError": true, } } //index.ts consol ...

Wait for response after clicking the button in Vue before proceeding

When the button is clicked for the first time and the data property is empty, I need to pause the button click code until an ajax response is received. Currently, when I press the button, both wait and scroll actions happen immediately without waiting for ...

Prevent dragging events while clicking on a link

Recently, I encountered a drag event over an attached div.image element. Whenever I click and hold the mouse down on the div, the drag event initiates. In order to achieve this functionality, I utilized the nestable.js plugin. However, I am facing a chall ...

Press a single button to toggle between displaying and hiding the table

$(document).ready(function() { $("#t1").hide(); // hide table by default $('#sp1').on('click', function() { $("#t1").show(); }); $('#close').on('click', function() { $("#t1").hide(); }); }); <li ...

How can I create space between a checkbox and its label in Google Web Toolkit (GWT)?

How can I create space between a Checkbox and its content in GWT? Checkbox c = new Checkbox("checkme"); c.setStyleName("checkbox_style"); When I try using padding or margin, the entire checkbox and its content move together. Is there a way to achieve a g ...

Adjust the text within the treeview node for proper alignment

My treeview has nodes that display text, but when the length of the text increases, it moves to the next line and starts one place before the upper text, causing alignment issues. Is there a way to use CSS or JavaScript to properly align the text? Regards ...

preserve functionality when switching between pages

I have created two simple functions that can change the background color of the body. <script type="text/javascript"> function switchBackground(color){ document.body.bgColor=color; } </script> I am using links with onclick to execute thes ...

Vue transition isn't functioning correctly without the specified mode parameter of 'out-in'

I'm struggling to comprehend why the transition doesn't smoothly roll from top to bottom without mode="out-in". When using out-in, it rolls as expected (albeit with a delay), but without it, the transition just suddenly appears after rolling dow ...

What are some solutions to troubleshoot the baseurl bug in Axios for a Node.js application?

An application was developed for a specific device using Vue.js on the front end and Express.js on the back end. The Axios library was utilized to fetch data from an API. However, when attempting to localize the base URL in Axios, connecting to the site t ...

Trouble initializing Google Maps in an Angular directive

I'm currently working on integrating the Google Maps API into an Angular website, but I'm encountering initialization issues. Within my HTML page, I'm utilizing bootstrap nav nav-tabs and switching between tabs using an Angular controller. ...

Preserve the XHR-generated configuration when the browser is refreshed

My PHP page features a navigation menu with options such as Home, About Us, and Profile. When clicking on the "About Us" link from the home page, it loads an Ajax response displaying the information without reloading the page. However, if the user decide ...

Javascript does not execute properly in Google Apps Script

Encountering issues while attempting to execute the code provided in Google app script. // 1.foldername = Folder name | 3.templateId = ID of the template to use // 2.SheetId = ID of spreadsheet to use. | 4.rootFolder = ID of the root fold ...

Error message: "In Jade and Express.js, the attribute req.body.[name of form] is not defined

I am encountering an issue while trying to update a database using a drop-down form. The problem is that req.body.[name of form] is coming up as undefined. Upon checking the console, I found that req.body shows up as an empty object {}. Below is the code ...

Updating lodash when it depends on jshint: A guide to NPM

After successfully passing an audit in npm, I received the following results: Now, I am attempting to update my lodash package but I'm unsure of the correct method to do so. I attempted using npm -i --save lodash, however this created another package ...

Using styled-components in React

I came across this interesting code snippet in the styled-components documentation. Here it is: const Button = styled.button<{ $primary?: boolean; }>` background: ${props => props.$primary ? "#BF4F74" : "white"}; color: ${p ...

Forecast the width of an element using JavaScript

Is there a way to display tab elements on a webpage without them automatically wrapping into a new row if there are too many? Instead, I would like an arrow icon to appear at the end of the tabs so users can cycle between tab groups. The challenge is that ...

The CSS formatting is not being properly applied within the innerHTML

I have a scenario where I am trying to display a Bootstrap card using innerHTML in my TS file, but the styles are not being applied to this content. I suspect that the issue might be because the styles are loaded before the component displays the card, cau ...

Unable to manage the DatePicker error in Material UI

I am facing an issue with the DatePicker component where it displays a red border when there is an empty value. Setting true/false to error attribute does not seem to have any effect. Even passing error to the TextField component does not change anything. ...

What is the proper way to utilize --legacy-peer-deps or enforce in a vite build?

I encountered an issue with a package called react-typed in my project. To install it, I had to use --legacy-peer-deps. When deploying, I need to use vite build. However, when I run the command, I receive the following errors: 8:59:31 AM: npm ERR! node_mo ...