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

Using object bracket notation in TypeScript to retrieve values from props with the help of string interpolation

I encountered an issue in my code while attempting to utilize a variable within my TSX component. This problem arises due to the dynamic props being passed into the component, which are always a string that matches one of four keys in the "characters" obje ...

Tips for monitoring server response in Angular 2

I received a reply in postman from my PHP code that looks like this: { "error_code": 0, "message": "Inserted Successfully.", "msg": "Inserted successfully." } Here is my Angular code: onSubmit(form:any){ var headers = new Headers(); ...

TypeScript perplexed Babel with its unfamiliar syntax and could not compile it

Encountered a problem while attempting to compile typescript. It appears that babel was unable to comprehend the "?." syntax on the line node.current?.contains(event.target) export function useOnClickOutside(node: any, handler: any) { const handlerRef = ...

Performing a series of HTTP requests within a single @ngrx/effect

I need some guidance as I am new to @ngrx and feeling a bit lost in understanding how it should be used. Let's assume we have an effect named PlaceOrderEffect In this effect, my goal is to handle each request in a specific order. processOrder$ = cre ...

Create an interface object in TypeScript with no initial properties

I'm currently developing an app with angular 5 (TS) and I've encountered a problem while trying to initialize an empty object of my interface. The solution that I found and attempted is as follows: article: Article = {} as Article; However, ...

Fetching android data using JSON technology

Can you help me understand how to retrieve this data using json? I have attempted it, but so far no luck. It's quite confusing for me on how to fetch the information below. Any assistance would be greatly appreciated. { "sftid": [ "sfta" ], "todate": ...

What is the best method to remove a value from a JSON object in a CSV file?

I received a JSON response like this: xxx: ["fsd,das"] I am looking for a way to remove the value "fsd" from the JSON object. The issue is that the response inside the JSON is not actually an array, but rather a CSV format. How can I go about deleting it ...

What is the best way to disable a submit button based on form validity in Angular 4 with ng-content?

Include a form component that consists of an email field, password field, and submit button passed through ng-content. This allows the login form to display a 'Login' button and the register form to display a 'Register' button. Here is ...

Display the JSON data on the homepage

I am struggling to figure out why I can't successfully display the JSON data on my webpage. As a newcomer to JavaScript, I am eager to showcase the contents of a JSON file within my index file. After utilizing the express generator for all my files, ...

Issue with TypeScript Functions and Virtual Mongoose Schema in Next.js version 13.5

I originally created a Model called user.js with the following code: import mongoose from "mongoose"; import crypto from "crypto"; const { ObjectId } = mongoose.Schema; const userSchema = new mongoose.Schema( { //Basic Data ...

Creating a release of an Angular 12 library using Ivy and sharing it on npm

Recently, I had the task of updating a library to angular 12. After successfully compiling it with Ivy full compilation mode, I realized that it cannot be published on npm in this state. Following suggestions from various sources, I tried setting "enableI ...

My components views are not being rendered in Angular 4

Currently, I am in the process of learning how to use Angular 4, but I seem to be encountering an issue. Despite having a functioning App template that renders perfectly fine, I am facing difficulties when attempting to render more than one template. I cre ...

Test Transmission Service

Hey there, I'm currently working on writing Angular code for a component that involves an observable. However, I'm facing some issues testing the broadcast service as I keep getting an error indicating that the service is not being called. Does a ...

Updating parent components through child components in ReactWould you like another unique

In my current project, I am attempting to change the state of the main component labeled App.tsx by using a child component called RemarksView.tsx. I have attempted passing props such as setRemarks and remarks, but unfortunately the state in the parent c ...

Export a dictionary to json format while maintaining the numeric order of keys

I need help with dumping a dictionary into JSON with ordered keys. The dictionary looks like this: dict({'abc1': {'1': 'asdf', '11': 'asdfasd', "2": 'afds'}, 'abc2': {'1&a ...

What is the best way to send props to a styled component without needing to convert them to transient props beforehand

Recently, I designed a custom Text component that accepts several props. These props are then forwarded to the styled component where specific styles are applied. However, I am facing an issue where I do not want these props to be passed down to the DOM, b ...

Issue encountered: Dealing with a deadlock error triggered by a single query following the

I have a question about managing a query that runs across multiple micro-services, which can sometimes lead to deadlocks. const handleExecution = async (id: number): Promise<boolean> => { try { const query = ` UPDATE articles a1 ...

The Vercel error indicates that the file or directory '/var/task/node_modules/shiki/themes/one-dark-pro.json' does not exist

import { serialize } from 'next-mdx-remote/serialize'; import readingTime from 'reading-time'; import remarkGfm from 'remark-gfm'; import rehypeSlug from 'rehype-slug'; import rehypeAutolinkHeadings from 'rehype ...

Jackson: Converting enums into interfaces for serialization purposes

(Disclaimer: This content has been simplified. The actual situation is much more complex.) Consider two systems, Producer and Consumer, with independent code except for a shared interface: public interface Thing { String getName(); String getDesc ...

The issue of process.server being undefined in Nuxt.js modules is causing compatibility problems

I've been troubleshooting an issue with a Nuxt.js module that should add a plugin only if process.server is true, but for some reason it's not working as expected. I attempted to debug the problem by logging process.server using a typescript modu ...