Combining objects with arrays to create a single unified data structure

I am trying to merge two array objects to achieve a specific structure, similar to the example below.

"feedBackList" : [
        {
            "questionNo" : 1,
            "scoring" : "5"
        },
        {
            "questionNo" : 2,
            "scoring" : "5"
        },
        {
            "questionNo" : 3,
            "scoring" : "5"
        },
        {
            "questionNo" : 4,
            "scoring" : "4"
        },
        {
            "questionNo" : 5,
            "scoring" : "Under 25"
        }
    ]

Unfortunately, my current implementation is not working as expected. The resulting structure looks different from what I intended. Can you please advise on how to fix this issue?

https://i.sstatic.net/qkLwn.png

This is the code snippet for reference:

Component

quesNo = [
    {questionNo: 1},
    {questionNo: 2},
    {questionNo: 3},
    {questionNo: 4},
    {questionNo: 5}
  ];

newFeedback(): FormGroup {
    return this.fb.group({
      questionNo: this.quesNo,
      scoring: ['']
    })
 }

onSubmit() {
  console.log(this.feedbackForm.value);
}

Please refer to the demo link for further details: https://stackblitz.com/edit/angular-forms-formarray-example-zb634f

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

How to exit a dialog in an Angular TypeScript component with precision

Hey there, I'm attempting to close a dialog from the component by specifying the path in .angular-cli.json and calling the function. However, it seems that despite my efforts, the dialog isn't closing and the redirection isn't happening. He ...

Altering the appearance of a component that is currently selected and in use

Currently, I have incorporated a component with its selector within another component as shown below: <div class="col-xl-4" style="margin-bottom: 30px;"> <app-patient-info-accordion *ngIf="patient" [cardTitle]=&qu ...

I am experiencing issues with the customsort function when trying to sort a column of

Seeking assistance with customizing the sorting function for a Date column in a primeng table. Currently, the column is displaying data formatted as 'hh:mm a' and not sorting correctly (e.g. sorting as 1am, 1pm, 10am, 10pm instead of in chronolog ...

TypeScript Redux Thunk: Simplifying State Management

Seeking a deeper understanding of the ThunkDispatch function in TypeScript while working with Redux and thunk. Here is some code I found: // Example of using redux-thunk import { Middleware, Action, AnyAction } from "redux"; export interface ThunkDispatc ...

The ngOnInit lifecycle hook is not triggered on the error page component

Creating an error page for an Angular 4 application. In an attempt to display information about unhandled exceptions, I have implemented the GlobalErrorHandler to catch errors and redirect users to an ErrorComponent page. However, when the error occurs, t ...

Using Typescript to set the image source from a pipe

I've been working on creating a custom pipe similar to the code below: @Pipe({ name: 'imagePipe' }) @Injectable() export class ImagePipe { constructor(public someService: SomeService, public storage: Storage) { } transform(value: ...

Ways to troubleshoot issues with the ng bootstrap package

Having an issue debugging ng-bootstrap 4 in my Angular 7 project, I decided to follow the instructions provided on this link to clone ng-bootstrap and install dependencies using yarn. The process completed without any errors. However, when attempting to np ...

Trouble with loading images on Angular Application

After successfully building and deploying my Angular App using the build command on the cli with the deploy-url option as shown below: ng b -deploy-url /portal/ I encountered an issue where everything in the assets folder was showing up as 404 not found ...

Executing Timers in Angular 5 Service

I am working on implementing a property called currentAndLastVehicles in my service that needs to be updated automatically every second. Here is what I have so far: import { Injectable } from '@angular/core'; @Injectable() export class SharedD ...

Filtering a multi-dimensional array in Ionic 3

I attempted to filter an array from a JSON with the following structure {ID: "2031", title: "title 1", image: "http://wwwsite.com/im.jpg", url: "url...", Goal: "3000000", …} The array is named 'loadedprojects' and below is the filteri ...

Remove multiselect label in PrimeNG

I am attempting to change the multiselect label of selected items and replace it with a static default label. Here is what it currently shows: https://i.sstatic.net/qBNHG.png This is what I have tried: .p-multiselect-label { visibility: collapse; ...

What is the method for obtaining the properties of a type as an array in Typescript?

In the given scenario: class Foo { constructor( private one: string, private two: string, private three: string) { } } Is there a way to create an array containing the type's properties? For example, I need to gene ...

InvalidTypeException: The properties accessed are undefined

Working with Angular 12 and encountering an error when trying to invoke a method within another method. Here is a simplified representation of my situation (in TypeScript, specifically for Angular: export class SomeClass { testvariable on ...

Creating a setup in TypeScript to enable imports between CommonJS and ES modules (for node-fetch and Express)

I'm facing a challenge in trying to integrate two libraries into a single project: fetch-node, an ES module, and Express, which follows the CommonJS format. The issue arises from needing to import fetch-node using: import fetch from 'node-fetch&a ...

Activate TypeScript EMCAScript 6 support for Cordova projects in Visual Studio

I am interested in utilizing the async/await feature of TypeScript in my VS2015 Cordova project. I have updated "target": "es6" in tsconfig.json Although there are no errors shown in intellisense, I encounter the following error while building the project ...

Tips for creating a Next.js "Link" component with an optional "href" property

I've created a custom React function using typescript for the Next.js Link component. The "href" property is necessary for the "Link" to be used anywhere, so it couldn't be utilized as a button that functions as a submit button in forms. import N ...

Guide to retrieving static information for forms with the use of reactive forms

I am encountering an issue with my reactive form. When I click the new button, a duplicate section appears but the options in the select field are not visible. Additionally, I receive errors as soon as the page loads: ERROR Error: Cannot find control with ...

Guide to implementing ion-toggle for notifications with Ionic 2 and Angular 2

Currently, I am using a toggle icon to set the notification as active or inactive. The response is obtained from a GET call. In the GET call, the notification value is either 0 or 1, but in my TypeScript file, I am using noteValue as boolean, which means w ...

How to vertically align Material UI ListItemSecondaryAction in a ListItem

I encountered an issue with @material-ui/core while trying to create a ListItem with Action. I am looking for a way to ensure that the ListItemSecondaryAction stays on top like ListItemAvatar when the secondary text becomes longer. Is there any solution to ...

What is the best method for replacing the current page in an Ionic app?

I am facing an issue with the following navigation flow: User lands on the Contacts page -> clicks on a button to navigate to the NewContact page using navController.push() method -> from there, user is directed to the ContactCreated page. How can ...