Combining two arrays in typescript using the map method

Question

Combining two arrays in typescript using the map method

I have an array of heart rate, height, and weight values.

{
    "heart_rate": 27,
    "height": 82,
    "weight": 78
}

There is also a second array containing information about each value, such as ID, label, and description.

[
    {
    "id": "heart_rate",
    "description": "le ratio coeur",
    "label":"ratio coeur"
    },
    {
        "id": "height",
        "label": "taille",
        "description": "la taille"
    },
    {
        "id": "weight",
        "label": "poids",
        "description": "le poids"
    }
]

My question is, can I use the map function to match the key of the first array with the ID of the second array in order to create a new result array like this?

[
{
 "label": "poids",
 "value": 82,
 "description": "le poids"
},
{
 "label": "taille",
 "value": 78,
 "description": "la taille"
},
{
 "label": "ratio coeur",
 "value": 27,
 "description": "le ratio coeur"
},
]

arrays angular typescript

Answer 1

Answer №1

MGX is spot on. Your initial item does not constitute an array but rather an object.

Here's what you need to do to make it compatible with an object.

const valueObject = {
    "heart_rate": 27,
    "height": 82,
    "weight":78
};

const array = [
    {
        "id": "heart_rate",
        "description": "le ratio coeur",
        "label":"ratio coeur"
    },
    {
        "id": "height",
        "label": "taille",
        "description": "la taille"
    },
    {
        "id": "weight",
        "label": "poids",
        "description": "le poids"
    }
]

const keys = Object.keys(valueObject);
const values = Object.values(valueObject);

const result = array.map((item) => { 
  return {
    label: item.label,
    value: values[keys.findIndex(key => key === item.id)],
    description: item.description,
  };
});

Alternatively, you can transform your valueObject into a Map for a more straightforward solution:

const map = new Map(Object.entries(valueObject));

const result = array.map((item) => { 
  return {
    label: item.label,
    value: map.get(item.id),
    description: item.description,
  };
});

Answer 2

MGX is spot on. Your initial item does not constitute an array but rather an object.

Here's what you need to do to make it compatible with an object.

const valueObject = {
    "heart_rate": 27,
    "height": 82,
    "weight":78
};

const array = [
    {
        "id": "heart_rate",
        "description": "le ratio coeur",
        "label":"ratio coeur"
    },
    {
        "id": "height",
        "label": "taille",
        "description": "la taille"
    },
    {
        "id": "weight",
        "label": "poids",
        "description": "le poids"
    }
]

const keys = Object.keys(valueObject);
const values = Object.values(valueObject);

const result = array.map((item) => { 
  return {
    label: item.label,
    value: values[keys.findIndex(key => key === item.id)],
    description: item.description,
  };
});

Alternatively, you can transform your valueObject into a Map for a more straightforward solution:

const map = new Map(Object.entries(valueObject));

const result = array.map((item) => { 
  return {
    label: item.label,
    value: map.get(item.id),
    description: item.description,
  };
});

Combining two arrays in typescript using the map method

Answer №1

Similar questions

What is the best way to utilize TypeScript module augmentation with material-ui components?

Oops! An unhandled promise error occurred when trying to fetch a URL with a status of 0. The response received has a status code of

Need help with Swift? Want to learn how to incorporate multiple items into a JSON array?

What is the best way to retrieve the height and width of a device's display in Angular 2 using Typescript

Encountering an issue: a function is required to return a value if its declared type is not 'undefined', 'void', or 'any'

Proper utilization of react-hook-form in conjunction with TypeScript and material-ui to display error messages efficiently

Creating an image array in VB.NET using project resources

Guide for retrieving a user object from an HTTP request

Interested in embedding DocuSign within an Angular application using an iframe?

Problem with rendering Ionic v2 HTML in Angular 2

Utilizing Material-UI with MobileDialog HOC in TypeScript: A Beginner's Guide

Unable to transform the singular JSON object received from the server into the necessary format in order to analyze the data

Stop receiving notifications for channel events in Stream with the GetStream.io Chat API

What is the best way to populate an array when I'm uncertain about the type of items it will

The struggle of implementing useReducer and Context in TypeScript: A type error saga

Managing sessions within a Spring OAuth2 client acting as a gateway for secure communication

Having trouble calling a method from one component to another using its instance

Running multiple versions of the Angular CLI on one machine

Right-align the text in the title of the material card

developing an email feature within Angular, incorporating confirmation emails