Angular5发送JSON到API时出现循环结构转JSON类型错误求助

Hey there, let's break down this frustrating error you're hitting. That message means when your code tries to convert your data object to JSON (usually when sending it to an API), it's encountering a circular reference—an object that references itself, or a pair of objects that loop back to each other (like Angular's form controls, which have internal references to their parent form groups).

Common Causes in Your Code #

Looking at your snippet, the most likely culprits are:

• Accidentally including an Angular FormControl/FormGroup object instead of just its .value property in primary_details
• A hidden circular reference in your profileModel (e.g., each registrationData item has a reference back to the parent profileModel)

Step-by-Step Fixes #

1. Ensure You're Only Using Raw Data Values

First, double-check every field in primary_details to make sure you're pulling the raw value from your form controls, not the control object itself. For example:

// ❌ Wrong (includes the FormControl object, which has circular references)
street_line1: this.profileEditForm.controls.streetLine1

// ✅ Correct (only takes the raw string/number value)
street_line1: this.profileEditForm.controls.streetLine1.get('line1').value

Pro tip: Use optional chaining (?.) to avoid null/undefined errors if a control might not exist:

street_line2: this.profileEditForm.controls.streetLine1.get('line2')?.value || ''

2. Clean Up Your Registration Data Mapping

Your registrationsData logic is on the right track, but swapping the for-loop for Array.map() makes it cleaner and less error-prone, while ensuring you're only copying primitive values:

const registrationsData = this.profileModel.registrationData.map(item => ({
  id: item.id,
  registration_number: item.regNo
}));

This creates a brand-new array of plain objects with no hidden references to the original profileModel.

3. Detect and Remove Circular References

If the error sticks around, debug by logging the full payload before sending it to the API:

const payload = {
  registrations: registrationsData,
  primary_details: primary_details
};
console.log('Payload to send:', payload);

Look for any objects in the log that have __proto__ pointing back to themselves, or references to FormControl/FormGroup—these are the circular references causing the issue.

If you find unavoidable circular references (e.g., in your model), you can use a custom replacer function with JSON.stringify to skip problematic properties:

const jsonPayload = JSON.stringify(payload, (key, value) => {
  // Skip Angular form control objects by returning their value instead
  if (value instanceof FormControl) return value.value;
  // Skip any other circular reference properties you identify
  if (key === 'parentModel') return undefined;
  return value;
});

That said, building a plain data payload upfront is always better than relying on this workaround—it makes your code more predictable.

4. Verify the Final Payload

Before sending the payload to your API, confirm it's a plain JSON object with no circular references. You can even test it with JSON.stringify(payload) in your browser console to see if it throws the same error.

内容的提问来源于stack exchange，提问作者Santhosh