Mastering the art of iterating through nested for loops on table rows with Angular

I want to iterate through a for loop to display response data in table rows, and I need the data values in array format. Can you please guide me on how to achieve this with the code provided below?

HTML file

<div class="row">
        <form *ngIf="!isError" [formGroup]="userForm" (ngSubmit)="SubmitForm()">
          <!-- Inserted HTML code here -->
        </form>
</div>

TS File

this.userForm = this.fb.group({
  // Inserted TypeScript code here
});

// Rest of the TypeScript code is also provided

I'm adding 3 values for 3 rows based on the response received. However, after clicking the Save button, only one row's value is being displayed instead of all three as expected. The desired output should resemble the following:

criteria: Array(3)
0: {criteriaText: 'New Feedback with CU1', rating: '5', feedbackcomment:'feed 1' }
1: {criteriaText: 'New Feedback with CU2', rating: '6', feedbackcomment:'feed 2'}
2:{criteriaText: 'New Feedback with CU3', rating: '7', feedbackcomment:'feed 3'}

Answer №1

Here is my suggested approach:

<table>
 <tr>
  <td>{{mylabels.criteria}}</td>
  <td>{{mylabels.rating}}</td>
  <td>{{mylabels.feedbackComment}}</td>
 </tr>
 <tr *ngFor="let item of items">
  <td>{{items[item]?.id}}</td>
  <td>{{items[item]?.name}}</td>
  <td>{{items[item]?.desc}}</td>
 </tr>
</table>

Feel free to modify and customize this code as needed for your project. Additionally, consider enhancing the clarity of your question and providing improved formatting for your code snippet.

Answer №2

After some troubleshooting, I found the solution to my problem. I ended up creating FormGroups inside a FormArray, and it seems to be working perfectly now.

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

Learn how to trigger an event or API call in Angular 8 when the browser is closed with the help of HostListener

I am facing the challenge of calling a simple websocket closure API when the browser is closed in my project. I attempted to utilize HostListener, but unfortunately it did not work as expected. You can find the code snippet below: https://stackblitz.com/ ...

Angular 4 router issue: Outlet has already been activated and cannot be activated again

I recently updated my application from Angular2 to Angular 4. Previously, everything, including routing, was functioning flawlessly. However, since the upgrade, I have encountered issues with routing. Whenever I click on a link, the redirection fails and ...

Difficulty setting up AngularFire in Ionic application

Seeking assistance for the installation of AngularFire in a Ionic 6 project. Encountering an error message: Packages installation failed, see above. Below is the setup details: >> ionic info Ionic: Ionic CLI : 7.0.1 (C:&bsol ...

Converting an Angular1 App into a VueJs app: A step-by-step guide

Let's dive right in: I'm embarking on the journey of revamping an app that originally utilized Angular 1, but this time around I'll be harnessing the power of VueJS 2. As someone unfamiliar with Angular 1, I'm faced with some perplexing ...

Updating the reference path in the index.html file during Angular 6 build process

When developing an Angular 6 application, the scripts and CSS files are automatically generated with hashed values at the end of their names. I am wondering if it is possible to update the links to these files in the index.html file. Currently, they point ...

Tips for incorporating Google Docs into a web application to enable previewing, editing, and saving functionality

Incorporating Google Docs into a web application (Angular 10) for previewing, editing, and saving is my goal. I have documents stored on my server and would like to utilize Google Docs to preview these files, whether they are stored on Amazon S3, Azure, o ...

Tips for effectively managing 404 errors in Angular 10 with modular routing

I'm facing challenges with handling 404 pages within an Angular 10 application that utilizes modular routing architecture. Here is the structure of my code: |> app |-- app.module.ts |-- app-routing.module.ts |-- app.component{ts, spec.ts, scss, ht ...

The geolocation feature is operational in the browser test, but it is not functioning properly on the

I am currently creating an application that requires accessing the user's location at a specific point in time. To achieve this, I have utilized the ionic native geolocation feature which communicates with the Google API for reverse geocoding. Everyt ...

Each time the Angular children component is reloaded, the user is redirected to localhost:4200

In my Angular project, I encounter an issue with route parameters in children components. While navigating to these child components from the parent is seamless, reloading the child component causes the application to redirect to localhost:4200 and display ...

What is the best way to change a timestamp into a date format using Angular?

I am struggling to convert a timestamp to the date format 'dd/MM/YYYY' but keep getting a different date format in the output. I am using syncfusion spreadsheet for this task. https://i.sstatic.net/BoRaa.png export-electronic.component.ts updat ...

Creating a dynamic table using jQuery and XML content

Hello everyone, I am new to jQuery and JavaScript in general. My goal is to generate a table based on XML data, but I'm struggling to achieve the correct output. Here's what I have tried so far: Here is my HTML code: <table id="daily_fruit"& ...

Display Angular Material Dialog when TinyMCE is opened in Angular

Currently, I am working on an Angular project where I have integrated the Tiny-MCE editor. My goal is to enable a click event on a newly added button within the editor that will trigger the opening of an Angular Material Dialog. However, I encountered an ...

The animation for the menuItem in the MenuBar in React is not functioning as expected

In my project, I am using React with TypeScript and implementing animations with framer-motion. One issue I am facing is that when the button is pressed to open the menubar, the menuItem should move according to the frame-motion animation but it is not. I ...

What is the correct way to send a GET request in angular?

Trying to make a GET request from Angular to Spring Java, but encountering error code 415 zone.js:3243 GET http://localhost:8080/user/friend/1 415 Below is my Spring Java code for the endpoint: @RequestMapping( value = "/friend/{idUser}", ...

Typescript patterns for creating a modular library design

Transitioning a JavaScript project to TypeScript has been challenging for me, especially when it comes to establishing a solid design pattern for the library's modularity. Main Concept The core functionality of my library is minimal. For instance, i ...

Tips for updating a reactive form with multiple layers of nested JSON values

I am tasked with retrieving and working with the data from a deeply nested (potentially infinite levels) reactive form that includes formArrays, formGroups, and formControls. This data is stored in a database. Currently, my approach involves patching the ...

What is the best way to specify the data type of a value within a map in TypeScript?

I need assistance defining the value of a key in a map as a key-value pair in TypeScript. map: { key: someStruct } Is it possible to declare the type of someStruct and initialize it simultaneously? What is the best approach for accomplishing this? ...

What steps can be taken to disable auto correction in ngx date picker?

In my application, I am utilizing ngx-datepicker with 'DD.MM.YYYY' as the dateInputFormat in the configuration settings of the date picker. The challenge arises when I manually input a date following the format 'YYYY.MM.DD', as the ente ...

What is the best way to perform a single asynchronous or promise-based fetch request and utilize the retrieved data across multiple functions?

Is there a way to optimize fetching data from an API and use the fetched data in multiple methods within the same service without making redundant requests in the Network? export class MediaService { constructor(private mediaAppApiService: MediaAppApiS ...

Combining actions in a chain within an NgRx effect for Angular

After successfully working on an effect, I now face the challenge of chaining it with a service called in a subsequent action after updating the state in the initial action through a reducer. Here is the effect code: @Effect() uploadSpecChange$: Observab ...