It appears there was a mistake with [object Object]

Hey there, I'm currently working with Angular 2 and trying to log a simple JSON object in the console. However, I keep encountering this issue https://i.stack.imgur.com/A5NWi.png

UPDATE...

Below is my error log for reference

https://i.stack.imgur.com/eCXHe.png

I've searched through several resources and came across similar problems like

Getting [object Object] while mapping http response in Angular 2

Despite making some changes, I still can't seem to resolve it!

Firstly, let me share my items2.json file

{
  "Company": {
    "company_details": [
      {
        "test": "test"
      }
    ],
    "success": true
  }
}

This is my model 'company.ts'

export interface Company {
  company_details : CompanyDetails[];
  success : boolean;
}

export interface CompanyDetails {
  test: string;
}

Now, here's my component:

import {Component, OnInit} from '@angular/core';
import {Company} from "./models/test/company";
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit{

  title = 'Test angular';

  constructor(private http : HttpClient) {}

  ngOnInit(): void {

    this.http.get<Company>('http://localhost:4200/assets/items2.json')
             .subscribe( data => console.log(data.company_details)
    );
  }   
}

Could someone please help me understand why I'm getting this error? Any suggestions on how to fix it would be greatly appreciated.

Thank you!

Answer №1

After some investigation, I discovered the solution to my issue. It seems that the InMemoryDataService used for the InMemoryWebApi was causing interference with Http. I resolved this problem by disabling it in my app.module.ts file, and now everything is functioning correctly.

For more information, please visit:

Angular2 / Error: Collection not found

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 process of declaring a react-icons icon in TypeScript?

Having a dilemma with declaring the icon in my array that contains name and icon. export const SidebarMenuList: SidebarMenu[] = [ { name: "Discover", icon: <AiOutlineHome />, id: SidebarCategory.Discover, }, ] The SidebarMe ...

The Nginx server seems to be having trouble reading Gzip files, despite having Gzip compression enabled

Despite having already enabled gzip compression on my nginx server, PageSpeed Insights still suggests enabling text compression for certain files. However, the mentioned files such as main.js, polyfills.js, and styles.css have already been gzipped using th ...

Do not deserialize the list of child objects in Jackson

Upon receiving the JSON, the data is as follows: {"firstName":"charle","lastName":"charly","books":[{"title":"navle"}]} I then attempt to convert it into a Jackson object like so: @JsonIgnoreProperties(ignoreUnknown = true) public class Person { @Id ...

Having trouble importing the UpgradeModule from @angularupgradestatic in Angular version 2.2.1

I am in the process of updating my AngularJS (ng1) application to Angular 2 (ng2). My Angular version is 2.2.1. Upon importing UpgradeModule from @angular\upgrade\static, I encountered the following exceptions: Uncaught SyntaxError: Unexpected ...

Using Regular Expressions: Ensuring that a specific character is immediately followed by one or multiple digits

Check out the regular expression I created: ^[0-9\(\)\*\+\/\-\sd]*$ This regex is designed to match patterns such as: '2d6', '(3d6) + 3', and more. However, it also mistakenly matches: '3d&apos ...

Dealing with an AWS S3 bucket file not found error: A comprehensive guide

My image route uses a controller like this: public getImage(request: Request, response: Response): Response { try { const key = request.params.key; const read = getFileStream(key); return read.pipe(response); } catch (error ...

Error: The variable "prisma" is not defined in this context - Next.js version 14

While working with Prisma and next.js 14, I encountered an issue with the Stripe payment API. The error message ReferenceError: prisma is not defined popped up. How can I resolve this? import { NextApiRequest, NextApiResponse } from "next" import ...

The attempt to run the command json-server --watch db.json has failed with the error message stating that "json-server command not found"

I tried setting up a JSON file to use as a practice database, but I'm having trouble running the server. Even after attempting to install (and reinstall) json-server globally and locally using npm install -g json-server and npm install json-server, t ...

Tips for avoiding the transmission of className and style attributes to React components

Hey there! I'm working on a custom button component that needs to accept all ButtonHTMLAttributes except for className and style to avoid any conflicts with styling. I'm using TypeScript with React, but I've run into some issues trying to ac ...

Having trouble interpreting JSON from StackAPI: anticipated value", line: 1, column: 1

I'm attempting to analyze the JSON data retrieved from this specific endpoint: . The structure of the data is as follows: { "items": [ { "badge_counts": { "bronze": 27, "silver": 14, "gold": 0 }, &quo ...

Unable to locate the control with the name "email" or "pwd", and the onSubmit function is not defined

I am currently facing an issue with form validation using reactive forms. The problem seems to be related to the console errors indicating that it cannot find controls named 'email' and 'pwd'. This is a basic sign-in form, and here is t ...

Integrating Angular 2 with Java functionalities and JSP

Starting my journey with the Angular 2 framework, I recently dove into working with it. As I delved deeper, many questions began to surface. My initial step was creating an Angular project using the Angular CLI, which went smoothly. However, when I attem ...

Remove certain JSON array fields from elements by utilizing jq

When I execute the command aws rds describe-instances, I receive a json array containing information about the instances. An example of the output is as follows: "DBInstances": [ { "DBInstanceIdentifier": "my-rd ...

Are you looking to use the 'any' type instead of the 'Object' type? Angular Services can help you with that

I encountered the following error message: Argument of type 'OperatorFunction<APISearch[], APISearch[]>' is not assignable to >parameter of type 'OperatorFunction<Object, APISearch[]>'. The 'Object' type is ...

Attempting to add a new property to every object in an array using TypeScript

In my Angular project, I have a specific code block that retrieves an array of objects containing contact records. Within a 'forEach' loop, I am generating a new field for each contact record to store the user's initials. The goal is to ad ...

The type 'Function' does not contain any construct signatures.ts

Struggling to transition my JS code to TS, specifically with a class called Point2D for handling 2 dimensional points. Encountering an error message stating Type 'Function' has no construct signatures.ts(2351). Any insights on what might be going ...

The module named "mongoose" does not have any member called 'PaginateResult' exported

I'm facing an issue while trying to add the necessary types for "mongoose-paginate" in my Angular 4 project setup with "angular-cli". The problem arises when Webpack throws an error. import {PaginateResult} from "mongoose"; ... getAll(page: number) ...

There is an issue with decoding JSON in the Flask API response using Python

I created a basic Python API with flask, and this is what my response looks like... response = { "id" : "345345d", "topdata" : { "top" : 234, "left" : 42, }, "bottomdata" : { "color" : "red", "bg" : "bl ...

Comparing the cost of memory and performance between using classes and interfaces

As I delve into writing TypeScript for my Angular project, one burning question arises — should I use an Interface or a Class to create my domain objects? My quest is to uncover solid data regarding the actual implications of opting for the Class route. ...

Despite EsLint and Prettier's efforts to improve code quality, users are experiencing frequent unnecessary errors and unexpected auto-insertion of parentheses at

When working with redux saga for handling asynchronous calls, I encountered an issue. After making an API call and storing the retrieved data in local storage, eslint/prettier automatically adds parentheses to the assignment operator at the end of the line ...