Don’t start by sanitizing the response. An Angular template error involving [object Object] may mean a loop received a plain object instead of an array, while an HTTP parsing mismatch or a failed request can produce different symptoms. These are separate problems, and Angular’s current error index lists NG02200, “Missing Iterable Differ”—not NG02100. Check the exact error, Angular version, response body, and template expression before choosing a fix.
What NG02100 means—and what Angular’s documentation confirms
Angular’s current Error Encyclopedia lists NG02200, “Missing Iterable Differ,” but does not list NG02100. The NG02200 documentation says that NgFor needs an iterable, such as an array; if you want to display an object’s keys, it points to Angular’s KeyValue pipe.
As an Amazon Associate I earn from qualifying purchases.
That makes a value-shape mismatch a plausible explanation when a template reports [object Object], but it does not establish that NG02100 is another name for NG02200. Do not silently substitute one code for the other. Check your Angular version, copy the complete console message, and locate the template expression or component line named in the error.
First check what the API actually returned
Inspect the response at the service boundary before changing the template or applying sanitization. A TypeScript interface describes what your code expects; it does not prove the server sent that structure.
#1 Best Overall
- Array: the response itself may be the list your loop expects.
- Object containing an array: the list may be nested in a property such as
itemsorresults. Bind to the actual array rather than its wrapper object. - Plain object: decide whether the UI should show its properties or whether the endpoint was expected to return a list.
- Scalar, null, or text: these values are not interchangeable with an array. Check the endpoint contract and handle missing or unexpected values explicitly.
Log or inspect the value returned by the service, then compare its runtime shape with the value passed to the template. The key question is not whether the response has a declared TypeScript type, but whether the actual value has the structure the component uses.
Use HttpClient types to describe data, not validate it
Angular documents that an HttpClient generic is a type assertion: Angular does not verify at runtime that the server response matches it. Declaring a request as get<Item[]>(...) therefore does not turn an object into an array or check that the payload is an array. See Angular’s guide to making HTTP requests.
When the payload shape is uncertain, receive it as unknown, check it at runtime, and narrow or normalize it before giving it to a component. For example:
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11function isRecord(value: unknown): value is Record<string, unknown> {
return typeof value === 'object' && value !== null && !Array.isArray(value);
}
function readItems(value: unknown): Item[] {
if (Array.isArray(value)) {
return value as Item[];
}
if (isRecord(value) && Array.isArray(value['items'])) {
return value['items'] as Item[];
}
throw new Error('Expected an array or an object containing an items array');
}This example checks the collection shape, not every field inside each item. If the component relies on particular fields, validate those too before treating the values as Item. Adapt the accepted shapes and error handling to the endpoint’s documented contract.
Rank #3
Match HttpClient responseType to the server response
HttpClient assumes JSON by default. If an endpoint returns non-JSON content, configure the request’s responseType to match the wire format. Angular documents json, text, blob, and arraybuffer; the return type also depends on the request’s observe option. The HttpClient API reference documents those overloads.
this.http.get('/api/status', { responseType: 'text' });Use text for a text response and the appropriate binary option for binary data. Setting responseType changes how Angular interprets the response; it does not validate a JSON object’s schema or make that object iterable.
Fix the template according to what you want to display
For a list, pass an array
If the API returns a wrapper object, select and validate the property containing the array before the value reaches the loop. If the endpoint returns a single object but the UI expects a list, determine whether the API contract is wrong or whether the component should display a single item. Do not pass the wrapper object to an iterable loop.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →For an object’s properties, use KeyValue
If the intended display is an object’s keys and values, use Angular’s KeyValue pipe rather than treating the object as an array:
<div *ngFor="let entry of settings | keyvalue">
{{ entry.key }}: {{ entry.value }}
</div>Use the object-iteration approach only when a key-value display is what the interface needs. Converting the value to a string may hide the symptom, but it does not correct a mismatch between the data and the template.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Separate HTTP failures from successful responses with the wrong shape
Angular sends HttpClient request failures through the Observable error channel as HttpErrorResponse. Network or timeout failures and backend responses have different status and error details. Handle those in the request’s error path. A successful HTTP response whose body is an unexpected object, null value, or other wrong shape is instead an application-data problem to validate and handle before rendering. Angular explains request behavior in its HTTP requests guide.
Why “sanitize API response” is usually the wrong fix
Angular’s security sanitization is for protecting DOM contexts when values are bound into the page. It is not API schema validation, response parsing, or a way to turn an object into an array. Angular describes the security model in its security guidance.
Use runtime validation or normalization to make incoming data fit the component’s model. Use the correct responseType to parse non-JSON responses. Rely on Angular’s context-aware security handling for DOM bindings, and avoid trust-bypass APIs for untrusted values: bypassing security checks does not repair the data shape and can expose the application to security risks.
Quick Recap
A practical diagnostic sequence
- Read the full error: note the exact code and message, Angular version, and template or component location. Do not assume NG02100 means NG02200.
- Inspect the raw body: check whether it is an array, an object containing an array, a plain object, a scalar, null, or text.
- Check parsing configuration: if the endpoint is not JSON, set
responseTypeto the documented format that matches the response. - Validate and narrow: treat uncertain data as
unknown, check the needed collection and fields, and normalize it before passing it to the component. - Match the rendering method: use an array for an iterable loop or KeyValue for an object’s properties.
- Classify request errors separately: inspect
HttpErrorResponsedetails for network, timeout, or backend failures instead of treating them as template-shape errors.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
