Is there a way to combine multiple array objects by comparing just one distinct element?

Is there a way to combine these two arrays into one?

array1 = [
  { image: 'image1', title: 'title1' },
  { image: 'image2', title: 'title2' },
  { image: 'image3', title: 'title3' },
];

array2 = [
  { downloadLink: 'downloadLink1', fileName: 'fileName1' },
  { downloadLink: 'downloadLink2', fileName: 'fileName2' },
  { downloadLink: 'downloadLink3', fileName: 'fileName3' },
];

The desired output is:

array3 = [
  { image: 'image1', downloadLink: 'downloadLink1', fileName: 'fileName1' },
  { image: 'image2', downloadLink: 'downloadLink2', fileName: 'fileName2' },
  { image: 'image3', downloadLink: 'downloadLink3', fileName: 'fileName3' },
];
javascripttypescript

Answer №1

Here is a simple solution to consider:

const array1 = [
  { picture: 'picture1', name: 'name1' },
  { picture: 'picture2', name: 'name2' },
  { picture: 'picture3', name: 'name3' },
];

const array2 = [
  { link: 'link1', identifier: 'ID1' },
  { link: 'link2', identifier: 'ID2' },
  { link: 'link3', identifier: 'ID3' },
];

let mergedArray = []

array1.forEach(({picture},index) => {
  result[index] = {picture, ...array2[index]}
})

console.log(mergedArray)

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

Cypress - A Guide to Efficiently Waiting for the Outcome of a Javascript Function Import

I am interested in creating a Javascript library to act as a wrapper for 3rd party APIs. I have decided to write the API wrapper as a standalone file rather than using Cypress Custom functions, so that I can share the library with teams who are not using C ...

javascriptnode.jscypress

Leveraging Angular Dragula without the need for RequireJS

I'm eager to incorporate Drag and Drop functionality into my Angular project with the help of the angular-dragula module (https://github.com/bevacqua/angular-dragula). However, it appears that this module heavily relies on RequireJS. My experience wit ...

javascriptangularjsrequirejsdragula

Tips for passing a query parameter in a POST request using React.js

I am new to working with ReactJS and I have a question about passing boolean values in the URL as query parameters. Specifically, how can I include a boolean value like in a POST API call? The endpoint for the post call is API_SAMPLE: "/sample", Here is ...

javascriptreactjstypescript

Could someone provide a detailed explanation of exhaustMap in the context of Angular using rxjs?

import { HttpHandler, HttpInterceptor, HttpParams, HttpRequest, } from '@angular/common/http'; import { Injectable } from '@core/services/auth.service'; import { exhaustMap, take } from 'rxjs/operators'; import { Authe ...

javascriptangularangularjstypescriptrxjs

Preparing JSON data for creating a wind map with Leaflet

I am currently working on converting netCDF data to JSON in order to use it with leaflet-velocity. This tool follows the same format as the output of grib2json used by cambecc in earth. An example of sample JSON data can be found at wind-global.json. By u ...

javascriptjsonleafletdata-conversionnetcdf

Guide on automatically removing a DOM element in Jquery after a set amount of time

Is there a way to delete an HTML element after a specific period of time? If a certain condition is met before the allotted time, I want to pause the timer from deleting the element. Here's a snippet of code for reference: <ul> <li dat ...

javascriptjqueryhtmlnode.jstimer

What kind of function possesses additional attributes or characteristics?

I am finding it difficult to define the type for the function foo as demonstrated below: function foo() { do something } foo.boo = () => { do something else } foo("hello"); foo.boo("hello"); This JavaScript code is functioning corr ...

typescript

Problem with Bootstrap multiselect: it only opens the first time, and stops working after an ajax call

I am having trouble using Bootstrap multiselect with jQuery ajax. When I run the ajax code, the multiselect button stops working properly. To see the issue in action, click here: and look at the last multiselect dropdown. Here is the ajax code snippet: ...

javascriptjqueryajaxmulti-selectbootstrap-multiselect

Upon attempting to retrieve a package version, NPM responds with an error stating "bash command not found."

I recently set up my project with a package.json file that includes the nodemon package among others. When I run #npm list --depth 0 in the terminal, this is what I see: ├─┬ [email protected] However, when I try to check the version of nodemo ...

javascriptnode.jsnpmnode-modules

Using TypeScript - Implementing Reduce function with a return type containing optional fields

I am facing challenges in satisfying the TypeScript compiler with my code. I define a type that includes only optional fields, for example: interface UserData { email?: string; phone?: string; //... } and I have a reduction function that transforms ...

typescripttypesreduce

Jasmine has detected an undefined dependency

Testing out the following code: constructor(drawingService: DrawingService) { super(drawingService); //... } private writeOnCanvas(): void { this.drawingService.clearCanvas(this.drawingService.previewCtx); this.drawing ...

angulartypescriptunit-testingjasmine

When declaring an array of numbers in sequelize-typescript, it triggers a TypeScript error

In my application, I am working with PostgreSQL, Sequelize, Sequelize-TypeScript, and TypeScript. I have a need for a table called Role where each role has multiple permissions of type integer. I'm following the guidelines provided in the sequelize-ty ...

typescriptsequelize-typescript

Display a div element with Angular's ng-show directive

I am encountering difficulties with implementing ng-show and $pristine. Below is the code snippet (also available on CodePen): <blockquote ng-show="!comment.author.$pristine && !comment.rating.$pristine && !comment.comment.$pristine"&g ...

javascriptangularjsng-showangularjs-ng-show

Having trouble with Angular 2 @input binding?

Parent module: import {NgModule} from '@angular/core'; import {SharedModule} from "app/shared/shared.module.ts"; import {HeaderComponent} from './header.component'; import {UserinfoComponent} from './userinfo.component'; imp ...

angulartypescriptdropdown

Looping through JQuery change events

I have a challenge with handling checkboxes. Whenever a user checks one, I need to validate if they are permitted to do so. If not, I must notify them and uncheck the box. However, this process becomes recursive as it triggers the change event again! How c ...

javascriptjqueryformsloopsevent-binding

Transfer a PHP variable between pages to retrieve the appropriate item from a button

In my project, I have two pages named content.php and pagecontent.php. In content.php, I am fetching product information from a database and displaying it in table format. The table has a grid layout with 2 rows and 3 columns. Each cell contains the descri ...

javascriptphphtmlajax

Tips on delaying the return of the Angular compiler until the subscription is complete

I'm facing an issue with a function that needs to return a value while containing a subscription. The problem I'm encountering is that the return line is being executed before the subscription ends, testFunc(){ let objectType; let modul ...

angulartypescriptasynchronoussubscribe

Server Error: Experiencing an overload of renders. React has set limits on the number of renders to avoid getting caught in an endless loop

I am currently attempting to develop a basic stopwatch application and encountering the following error message. Despite trying various solutions from similar queries, I have not been able to pinpoint the root cause of this issue or resolve it. Below is t ...

javascriptreactjsnext.js

When using TypeScript, it is important to ensure that the type of the Get and Set accessors for properties returning a

Why is it necessary for TypeScript to require Get/Set accessors to have the same type? For example, if we want a property that returns a promise. module App { export interface MyInterface { foo: ng.IPromise<IStuff>; } export int ...

angularjstypescript

Confusing generic function overload in TypeScript

During my exploration of TypeScript, I came across an unusual situation. function concat5<T>(strs: T, strs2: T): T; function concat5(strs: string, strs2: string) { return strs + strs2; } concat5(123, 12); concat5({a:1}, {b:2}); Upon reviewing ...

typescriptgenericsoverloading