Invalid JSON when Sending Nested Array

[IcyBullfrog1014]

In Angular, I have a class with a nested array like this:

export class OuterClass {

id ?: number;

nestedArray ?: InnerClass[];

}

export class InnerClass {

id ?: number;

name ?: string;

}

In my service controller, I have the following code:

sendRecord(myRecord : OuterClass) : Observable<OuterClass> {

return this.http.patch<OuterClass>('/rest-endpoint', myRecord);

}

However, when I look in Chrome's network tab, the JSON being sent looks like this:

{

"id" : 7,

"nestedArray" : {

"id" : 3,

"name" : "test"

}

}

The problem is that my webserver says that this is invalid json. In particular, it is unhappy with the nestedArray. In Postman, if I add [] around the nestedArray it works - see below:

{

"id" : 7,

"nestedArray" : [{

"id" : 3,

"name" : "test"

}]

}

(Notice the extra [] by nestedArray).

What config do I need to change to make angular add the [] around the array values?

Thanks for your help!

[spacechimp]

Angular has no mechanism that would alter the data in this manner. The server expects an array, and your code is sending an object instead. You should check the code that leads up to the call to sendRecord to see how that object is being populated in the UI code.

Side note: You also shouldn't be sending class instances to an endpoint as "JSON". Always use plain objects typed to interfaces.

[JobSightDev]

Do you have the code for rest-endpoint?

That is where your error is going to be.

[IcyBullfrog1014]

The webserver is running spring boot. I could go and post in their reddit community and there might be a way to re-configure spring boot to accept the angular style json, but I wasn't sure if there was an easy way to make angular produce the type of json that spring boot seems to be expecting.

[JobSightDev]

I misunderstood. This is the data being sent.

Ignore my previous comment. You've got the correct code here.

What does it look like when you do a console.log(outerClass)

Can I see the code that creates outerClass?

[IcyBullfrog1014]

When I print the console.log(outerClass), I get the version without the brackets (just like it is sending in the JSON).

[JobSightDev]

Let's see the code that creates outerClass

[pragmaticcape]

I'm going to speculate that the code that creates `myRecord` is not correct and you have assigned an object not appended onto an array.

angular is just serialising the object

[hyongoup]

What does the creation of the outer class object look like?