Swap out a collection of objects for a different collection of objects

I need to replace the content of array1 with the content of another array2 while keeping the same references and indexes in array1:

let array1 = [
 {  book : { id : 2, authorId : 3} } ,
 {  book : { id : 3, authorId : 3} },
 {  book : { id : 4, authorId : 3} }
]

 let array2 = [
 {  book : { id : 2, authorId : 3} } ,
 {  book : { id : 3, authorId : 2} },
 {  book : { id : 4, authorId : 2} }
]

I attempted this approach:

[].splice.apply(array1), [0, array1.length].concat(array2));

However, instead of obtaining the content from array2, I still have the original content of array1.

The desired outcome is for array1 to be a copy of array2, like so:

[
     {  book : { id : 2, authorId : 3} } ,
     {  book : { id : 3, authorId : 2} },
     {  book : { id : 4, authorId : 2} }
    ]

Thank you.

Answer №1

To easily duplicate an array, utilize a json copy method:

newArray = JSON.parse(JSON.stringify(existingArray))

Answer №2

Here's an example of how to write it:

newArray = [...originalArray]

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

Exploring the world of nested observables in Angular through cascading HTTP requests

My plan involves the following steps: Make a request to https://reqres.in/api/users/2 This request will return the following response. { "data": { "id": 2, "first_name": "Janet", "last_name": "Weaver", "avatar": "https://s3.ama ...

Upon successful Google login, Angular 2 fails to initiate the callback function

import {Component,Directive,OnInit,NgZone} from 'angular2/core'; declare const gapi:any; declare const $:any; @Component({ selector: 'mysite', templateUrl:'./app/template.html' }) export class Test{ userAuthToken; ...

Encountering build issues with Next.js on Vercel and local environments

As I work on my first Next.js website, I encountered a build error that persists both locally and on Vercel. Interestingly, I managed to achieve a successful local build at one point, but it no longer works. Here is an excerpt from my package.json: ...

Module '@tanstack/react-table' cannot be located even though it has been successfully installed

Currently, I am tackling a TypeScript React project and encountering an issue while attempting to import ColumnDef from @tanstack/react-table in my columns.tsx file. import { ColumnDef } from "@tanstack/react-table"; export type Payment = { id ...

Creating interactive features for a TypeScript interface

I was looking to create a dynamic interface with custom properties, like so: data: dataInterface []; this.data = [ { label: { text: 'something', additionalInfo: 'something' } }, { bar: { text: ' ...

Error message appears when using TypeScript with a React Material table showing a generic type error

I am currently attempting to implement react-material in a Typescript project. As a newcomer to Typescript, I am encountering some errors that I am unsure how to resolve. In this gist, I am trying to create a reusable React component (Please view the gis ...

Fill up the table using JSON information and dynamic columns

Below is a snippet of JSON data: { "languageKeys": [{ "id": 1, "project": null, "key": "GENERIC.WELCOME", "languageStrings": [{ "id": 1, "content": "Welcome", "language": { ...

How do I utilize the file handler to execute the flush method within the Deno log module using Typescript?

I'm having trouble accessing the fileHandler object from my logger in order to flush the buffer to the file. This is the program I am working with: import * as log from "https://deno.land/<a href="/cdn-cgi/l/email-protection" class="__cf_emai ...

Adding color dynamically to text within ion-card based on a regex pattern

My goal is to enhance the appearance of certain text elements by wrapping them in a span tag whenever a # or a @ symbol is detected, creating the look of usernames and hashtags on Twitter. Below is the code I am currently using: TS FILE: ngOnInit(): void ...

What is the difference between TypeScript's import/as and import/require syntax?

In my coding project involving TypeScript and Express/Node.js, I've come across different import syntax options. The TypeScript Handbook suggests using import express = require('express');, while the typescript.d.ts file shows import * as ex ...

Using the index in Vue.js to locate a method within an HTML file

Currently, I am attempting to make use of the reference "index" located within <tr v-for="(note, index) in noteList" v-bind:key="index" in order to call shareToPublic(index). The method selectedID() allows for the selection of the ...

Parent Class implementation for dynamic loading of components

I have been working on creating a new code for dynamic component loading using a parent-child relationship. The child component is set to override the parent and will be used for dynamically loading components. I found this useful link that guided me throu ...

Using the pipe operator in RXJS to transform an Event into a KeyboardEvent

I'm encountering an error when trying to add a keydown event and convert the parameter type from Event to KeyboardEvent as shown below. fromEvent(document, "keydown") .pipe<KeyboardEvent, KeyboardEvent>( filter((event) => even ...

Tips for integrating pdf.js worker in an Angular CLI project

When utilizing pdf.js directly in an Angular application for various PDF-related tasks, everything seems to be functioning properly. In order to utilize pdf.js, I imported it from pdfjs-dist and added it to my package.json file. Although the PDF works wi ...

Seeking a guide on how to effectively utilize Angular 6 for consuming REST API and performing CRUD operations

I am a beginner with Angular and I am currently using Version 6, specifically the CLI tool. My main focus right now is learning how to make REST API calls. I have searched for tutorials on this topic but unfortunately, none of them have been successful fo ...

What's the best way for me to figure out whether type T is implementing an interface?

Is it possible to set a default value for the identifier property in TypeScript based on whether the type extends from Entity or not? Here's an example of what I'm trying to achieve: export interface Entity { id: number; // ... } @Compon ...

Firestore rule rejecting a request that was meant to be approved

Recently, I came across some TypeScript React code that fetches a firestore collection using react-firebase-hooks. Here's the snippet: const [membersSnapshot, loading, error] = useCollectionData( query( collection(db, USERS_COLLECTION).withConve ...

Angular facing issue with loading data and not displaying on time

In my project, I am facing difficulty in displaying the users' data on the user interface (UI). Despite trying to display the data, I am encountering issues. Here is the data from my users.json file: { "success": true, "summary": { "total_reg ...

Transform an Array<string> into an object with the strings of the array as keys

I am attempting to develop a type conversion method that transforms an array of strings into an object with the string values as keys. type ObjectFromKeys<T extends Array<string>> = { [K in keyof T]: string } declare const o: ObjectFromKeys& ...

Encountering a cloning error while using React Typescript and React Router DOM when calling props.history.push

When using props.history.push without passing state, everything works perfectly fine. However, when trying to pass data with state, an error occurs. The error message reads: DOMException: Failed to execute 'pushState' on 'History': func ...