How to extract specific elements from an array of objects and generate a new array in Typescript?

I am interested in transforming a separate array object into an array of strings.

export interface box{
    image: string,
    link: string,
    button_name: string,
    info: string, 
    description: string
}

export const BOX: box[] = [
    {image: 'image here', link: 'google.com',
    button_name: 'name', info: 'some information', description: "a description"
    },

    {image: 'image here again', link: 'another google.com',
    button_name: 'another name', info: 'some more information', description: "another description"
    },
]

My goal is to extract just the 'info' field from this existing data and create a new array with that information. I have attempted to use the forEach function like this:

infos: string[] = BOX.forEach(element => element.info);

However, I encountered an error stating that

Type 'void' is not assignable to type 'string[]'

How can I successfully generate an array of strings containing only the 'info' fields from my original array?

arraysangulartypescriptfor-loop

Answer №1

If you need to extract information from a BOX-array, you can utilize the map function. This will create a new array containing the specified data based on the arrow function provided. For instance, if you are only interested in the element's info, you can achieve this with the following code snippet:

infos: string[] = BOX.map(element => element.info);

The code above demonstrates an implicit return statement, which is essentially a shorthand version of the following longer syntax for the same function:

infos: string[] = BOX.map(element => {
   return element.info;
});

To explore further details on this topic, check out this resource.

Answer №2

let data = BOX.map(item => item.data);

Answer №3

data: string[] = BOX.forEach(item => item.data);

Array.prototype.forEach behaves as expected according to its definition. It iterates over each element of the array, but does not return a new array.

To achieve your desired result, you should use Array.prototype.map instead to create a new array based on the original data.

const newData = BOX.map(e => e.data);

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

Enhancing Type Safety with TypeScript in 2020: A User-Friendly Approach

It is widely understood that TypeScript conducts type-checking solely at compile-time. While there are existing methods, like io-ts, to incorporate runtime checks, I can't help but wonder if a more straightforward approach exists. For instance, cons ...

javascriptnode.jstypescriptbabeljstypescript2.0

Triggering ngOnInit in Angular when reloading the component

Currently, I am working with Angular2 and need to display content on the Settings page for each account. The URL structure is as follows: URL1 http://example.com/account/NICKNAME_1/settings URL2 http://example.com/account/NICKNAME_1/orders URL3 http://e ...

angularangular2-routing

Changing the Value of Primeng Date Navigator

My issue is with the Primeng DatePicker configuration. I have set the options like this: [monthNavigator]="true" [yearNavigator]="true" [yearRange]="2017:2030" The problem arises when I click on the < button after selecting January and 2017 from the n ...

angularprimengprimeng-calendar

What is the best way to merge two different types in TypeScript?

JavaScript is struggling to merge two objects with identical properties. During development, there's a need to combine two configurations. if (mode === 'development') { return merge(productionConfig, Configuration); } The interfaces ...

reactjstypescriptwebpack

Visuals failing to display following Angular project compilation

After completing the coding for my app, I attempted to put it into production mode and after testing, I noticed that the images were not displaying as the logo in the app. However, in development mode, everything seems to be working fine. This is the struc ...

javascriptimageangularangular-cliproduction-environment

@nrwl/node:build: Tips for customizing the generated output file name

I've been working on a project in a nx monorepo that involves Angular CLI and a Node backend. In my angular.json file, I have a custom webpack configuration to adjust the filename of the bundle. When I run ng build app (which triggers @nrwl/node:build ...

node.jsangularnrwlnrwl-nx

Getting node siblings within an Angular Material nested tree: A comprehensive guide

Struggling to retrieve the list of sibling nodes for a specific Angular Material tree node within a nested tree structure. After exploring the Angular Material official documentation, particularly experimenting with the "Tree with nested nodes," I found t ...

angulartypescriptangular-material2angular-cdk

The identification of the field is not being transmitted by ng-select

Looking for help with Angular! I have an ng-select box where I can choose countries, and it's working fine when I select an option and submit - it submits the id as expected. However, when pre-populating the ng-select with data and submitting, it&apos ...

javascripthtmlangulartypescript

What is the dimensionality of structured arrays within numpy?

This particular question is similar to another one found at ndim in numpy array loaded with scipy.io.loadmat?, but the issue here is more fundamental. Let's start with a structured array: import sys import numpy as np from pprint import pprint a = ...

pythonarraysnumpy

Issue with pre-selected default value in AngularJS TypeScript Kendo UI DropDownList

I have successfully implemented a list of objects for items, but now I am facing a challenge in adding a default selected value. Below is the HTML code for the drop-down: <select kendo-drop-down-list k-options="selectItems" k-ng-mode ...

angularjstypescriptkendo-uidropdowndefault-selected

Launching in an Angular reactive form

When working with Angular reactive forms, I am facing an issue where I want to set a form control value using a property from a service. However, upon submitting the form, the value of the form control does not reflect the expected property value from the ...

javascripthtmlangularangular-reactive-formslifecycle

How to use MongoDB aggregate to filter out documents with non-empty arrays

I can't figure out how to write an aggregate query in MongoDB for a collection that has a field called "events", which is an array. The query needs to check if the events array is not empty. What I am looking for is something along the lines of: db.c ...

arraysmongodbmatchaggregateis-empty

eslint rule prohibiting directly checking numbers

Does eslint have a rule that flags an error for the code snippet below: function parseNumber(numberToCheck: number | undefined) { // I want an error here: !0 is true, so we will get "no number" here if (!numberToCheck) { return "no n ...

javascripttypescripteslint

How can you set a checkbox to be selected when a page loads using Angular?

On page load, I need a checkbox to already be 'checked', with the option for the user to uncheck it if they want. Despite trying to add [checked]="true" as recommended in some Stack Overflow answers, this solution is not working for me. <label ...

angularjstypescriptcheckbox

Including elements into an array encoded in JSON

After coming across a solution on stackoverflow, I implemented a method to encode my MYSQL output into a JSON encoded array. $sth = mysql_query("SELECT ..."); $rows = array(); while($r = mysql_fetch_assoc($sth)) { $rows[] = $r; } print json_encode( ...

phpsqlarraysjson

I require assistance in displaying a dynamic, multi-level nested object in HTML using AngularJS

I have a complex dynamic object and I need to extract all keys in a nested ul li format using AngularJS. The object looks like this: [{"key":"campaign_1","values":[{"key":"Furniture","values":[{"key":"Gene Hale","values":[{}],"rowLevel":2},{"key":"Ruben A ...

javascriptjqueryangular

What is the method for transforming data retrieved from the database into an associative array in Laravel 8?

I am pulling data from a database in the controller and I need to transform it into an associative array Here is the code snippet for fetching the data $dosen = Criteria::with(['lecturer'])->get(); I want to convert the fetched data into an ...

phparrayslaravellaravel-8

Loading pointers into an array from a file using C

I need help with reading data that is formatted using fprintf(fp,"%s %s %s\n", p->name,p->surname,p->tc);. I have created a struct patients **p in the following way: struct patients **create_array(struct patients **ptr,int length){ int i; ...

carraysfilepointers

Utilizing React Native services in a similar fashion to Angular, incorporating features such as Injector

Currently experimenting with various frameworks for hybrid mobile development. Although I lean towards React Native over Angular, I am really impressed by the Injector and Provider mechanisms in Angular. The ability to have a single instance of a class cou ...

angularreact-nativeserviceprovider

Make sure to verify the existence of a value before attempting to render it in Angular 4

I am currently working on a project that involves Angular 4. Here is an example of the code I am using : <div *ngFor="let item of results"> <p> {{item.location.city}} </p> <p> {{item.location.country}} </p> </div> T ...

angular