Exploring Angular 6: Step-by-step guide to nesting objects within objects

I have a problem with posting data to my API built with Spring Boot.

workflow : any = {
    name : "CMD1",
    items : [ {
      name : "work1",
      content : null
    }, {
      name : "work2",
      content : null
    } ]
  }

In Angular, I created a model for this workflow.

  constructor(
    public id:string,
    public name:string,
    public items: Items[]
  ){}
  export class Items (
  constructor(
    public name: string,
    public content: string
  ){} )

When I post this data from Postman, the API saves it correctly when using the top-declared structure. However, when I try to send data from a template, I struggle to format it correctly like the JSON shown above.

workflow : any = {
    name : "CMD1",
    items : [ {
      name : "work1",
      content : null
    }, {
      name : "work2",
      content : null
    } ]
  }

How can I send an object within another Angular object, and which form method should I use to send the data properly? Any help would be appreciated. Thank you.

Answer №1

One way to generate an object in this format is by utilizing the lodash library

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

What is the method for executing a custom command within the scope of a tree view item?

I am trying to implement a custom "ping" function in my VS Code Extension that will send the details of a selected treeview object. Despite looking at various examples, I have been unable to properly build and register the command. Although I can invoke th ...

What is the reason behind `ngAfterViewChecked` and `ngAfterContentChecked` being invoked twice?

import { AfterContentChecked, AfterViewChecked, Component } from '@angular/core'; @Component({ selector: 'app-root', template: '' }) export class AppComponent implements AfterViewChecked, AfterContentChecked { ngA ...

Encountering difficulties with resolving a lazy loaded module during Angular's AOT build

Currently, I am not utilizing the Angular CLI for my Ahead-of-Time (AOT) builds, instead opting for Angular 4.x. A module has been created with the intention of being lazily loaded. Below is a portion of my project structure: - app |----lazyLoadedModule ...

angular slickgrid grid date formatting only applies to grid view

this.columnDefinitions = [ { id: 'edit', field: 'id', excludeFromColumnPicker: true, excludeFromGridMenu: true, excludeFromHeaderMenu: true, formatter: Fo ...

A guide to showcasing data within PrimeNG's pie chart component using either JavaScript or Angular

I have utilized the pie chart feature from the PRIMENG CHART PLUGIN My goal is to showcase the values within a pie chart Below, you can find my code for reference **Within app.component.html** <div style="display: block"> <p-chart type="pi ...

Angular 2: Successfully invoking a component and receiving the parameter is a one-time deal

In my code, I have set up a route like this: { path: 'manageagreements', component: ManageagreementsComponent, children: [ { path: 'editagreement/:agreement', component: EditagreementComponent }, ] ...

What is the best way to trigger a method after an old component has been removed from the DOM while navigating within Angular

I am facing a challenge where I need to execute a method on ComponentB after a routerLink is clicked, causing the navigation from ComponentA to ComponentB. It is crucial that this method is triggered only after the entire navigation process is complete (i. ...

Ran into an issue while executing ng build --prod: The JavaScript heap has run out of memory

After executing ng build --prod, I encounter the error below. What steps can I take to resolve this issue? FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory ...

"Encountering issues with the production build of angular2-flash-messages

I have integrated angular2-flash-messages into my Angular (4) application. I included it in app.module.ts as shown below: import { FlashMessagesModule } from 'angular2-flash-messages'; imports: [ FlashMessagesModule, ], Everything works f ...

Tips for configuring the global API baseUrl for useFetch in Nuxt 3

Is there a way to globally set the baseUrl used in the useFetch composable, possibly through nuxt.config.ts? How can I prevent having to specify it in each individual useFetch call? ...

Refresh an Angular page automatically

Having a small issue in my angular application. The problem arises on the first page where I display a table listing all employees along with a "Create New Employee" button that opens a form for adding a new employee. However, after submitting the form and ...

Error: Angular2 RC5 | Router unable to find any matching routes

I am currently encountering an issue with my setup using Angular 2 - RC5 and router 3.0.0 RC1. Despite searching for a solution, I have not been able to find one that resolves the problem. Within my component structure, I have a "BasicContentComponent" whi ...

What could be the underlying reason for encountering the org.openqa.selenium.WebDriverException error?

While conducting UI Testing, I came across the following error: org.openqa.selenium.WebDriverException: Element not found or not visible for xpath: (//div[@class='popupContent'])[last()]/div/div/div/div/div[2]/div/table/tbody Build info: ...

Is it possible to transmit messages from a Chrome extension to a Java server?

My question is, if I want to create a Chrome extension that sends messages to a Java server, should I use the XmlHttpRequest API in the extension and have the Java server as an HTTP server? ...

Factory function in Angular for translating using arrow syntax

When I include TranslateModule using the following code: TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: HttpLoaderFactory, deps: [HttpClient] } }) where export function HttpLoaderFactory(http: H ...

Server-Side Rendering will occur exclusively for the `/` url, but only upon reloading the landing page. This setup utilizes Angular 16, implements Lazy Loading, and runs

Whenever I run my Angular ionic application locally and refresh the pages (all of them), I notice these console logs popping up on my screen. However, once I deploy it on PM2 in a production environment, the console log only shows up for the home page. I ...

What is the correct way to initialize and assign an observable in Angular using AngularFire2?

Currently utilizing Angular 6 along with Rxjs 6. A certain piece of code continuously throws undefined at the ListFormsComponent, until it finally displays the data once the Observable is assigned by calling the getForms() method. The execution of getForm ...

Maven error: Java class not found due to NoClassDefFound error

Greetings to all and thank you in advance for your assistance. I am currently a student diving into the world of Java programming. As part of this semester’s curriculum, we have been assigned a group project where we are required to enhance a pre-existin ...

The sequence of activities within the Primeng Multiselect component

Lately, I've encountered an issue while using the multiselect component from the primeng library in Angular. Everything was going smoothly until I noticed a strange problem with the order of events. Here is an example that showcases the issue: https:/ ...

Utilize a ReplaySubject to capture and replay only the most recent value from an observable stream

Here is my ReplaySubject setup: matchCount = new ReplaySubject<number>(); totalCount = new ReplaySubject<number>(); This is how I am utilizing it: getMatchedEventsCount(){ return this.dcs.matchCount.asObservable(); } getTotalEvent ...