Angular Error TS2339: The property 'car' is missing from type 'Array of Vehicles'

Question

Angular Error TS2339: The property 'car' is missing from type 'Array of Vehicles'

Encountering Angular Error TS2339: Property 'vehicle' is not found on type 'Vehicle[]'. The error is occurring on data.vehicle.results. Any thoughts on what could be causing this issue? Is the problem related to the Vehicle model? I have attempted adding vehicle to the model but it doesn't seem to be working.

1 service

getVehicles(): Observable<Vehicle[]> {
        return this.http.get<Vehicle[]>(CONSTANST.routes.vehicle.list);
    }

2 component

  getVehicles() {
        this.priceruleService.getVehicles()
            .pipe(
                map(data => {
                    console.log("data :" , data.vehicle.results)
                    return data
                })
            )
            .subscribe(data => this.vehicles = data);
    }

model

export interface Vehicle {
    _id: number
    name: string
    Type: string
    Stock: string
    vehicle: any
}

data structure

https://i.sstatic.net/ECMsg.jpg

javascript angular typescript

Answer 1

Answer №1

There is a situation where the data you have is not in an array format, but you are trying to return an observable of type array. To resolve this issue, convert the data into an Observable and then you will be able to access it as shown below:

getVehicles(): Observable<Vehicle> {
    return this.http.get<Vehicle>(CONSTANST.routes.vehicle.list);
}

Answer 2

There is a situation where the data you have is not in an array format, but you are trying to return an observable of type array. To resolve this issue, convert the data into an Observable and then you will be able to access it as shown below:

getVehicles(): Observable<Vehicle> {
    return this.http.get<Vehicle>(CONSTANST.routes.vehicle.list);
}

Answer 3

Answer №2

It is recommended to modify

 getVehicles() {
        this.priceruleService.getVehicles()
            .pipe(
                map((data:Vehicle) => {
                    console.log("data :" , data.vehicle.results)
                    return data
                })
            )
            .subscribe(data => this.vehicles = data);
    }

Answer 4

It is recommended to modify

 getVehicles() {
        this.priceruleService.getVehicles()
            .pipe(
                map((data:Vehicle) => {
                    console.log("data :" , data.vehicle.results)
                    return data
                })
            )
            .subscribe(data => this.vehicles = data);
    }

Answer 5

Answer №3

Assuming that data represents an array of Vehicle objects, you can simply switch out

            .pipe(
                map(data => {
                    console.log("data :" , data.vehicle.results)
                    return data
                })
            )

with

            .pipe(
                tap(data => {
                    console.log("data :" , data);
                })
            )

The error is due to the fact that the property vehicle does not exist on the type Vehicle[] (it only exists on type Vehicle), and there is no property called results here.

(Remember, if a function takes data in, performs side effects on it, and returns the unchanged data, it should be a tap operation instead of a map operation).

Answer 6

Assuming that data represents an array of Vehicle objects, you can simply switch out

            .pipe(
                map(data => {
                    console.log("data :" , data.vehicle.results)
                    return data
                })
            )

with

            .pipe(
                tap(data => {
                    console.log("data :" , data);
                })
            )

The error is due to the fact that the property vehicle does not exist on the type Vehicle[] (it only exists on type Vehicle), and there is no property called results here.

(Remember, if a function takes data in, performs side effects on it, and returns the unchanged data, it should be a tap operation instead of a map operation).

Answer 7

Answer №4

Alright, with the new data you provided, it seems like I need to craft a fresh answer rather than just modifying the existing one. (By the way, it would be great if you could paste the data directly into the post instead of using a screenshot).

First and foremost: TypeScript errors are cropping up in your code. These are compile-time errors that occur because TypeScript doesn't know what kind of data will be returned from the API call; it simply adheres to your type declarations. For instance:

getVehicles(): Observable<Vehicle[]> {

This line basically means "Retrieve an observable containing arrays of type Vehicle". So when you attempt to access data.vehicle, TypeScript flags it as an error right away since the data structure you defined is different.

The correct structure should resemble something like this:

interface IVehicleItem {
/* fill in the details */
}

interface IVehiclesResponse {
    vehicle: {
        results: IVehicleItem[];
    }
}

In that case, you can safely write the following:

getVehicles(): Observable<IVehiclesResponse> {
        return this.http.get<IVehiclesResponse> //...

and everything should work smoothly.

Answer 8

Alright, with the new data you provided, it seems like I need to craft a fresh answer rather than just modifying the existing one. (By the way, it would be great if you could paste the data directly into the post instead of using a screenshot).

First and foremost: TypeScript errors are cropping up in your code. These are compile-time errors that occur because TypeScript doesn't know what kind of data will be returned from the API call; it simply adheres to your type declarations. For instance:

getVehicles(): Observable<Vehicle[]> {

This line basically means "Retrieve an observable containing arrays of type Vehicle". So when you attempt to access data.vehicle, TypeScript flags it as an error right away since the data structure you defined is different.

The correct structure should resemble something like this:

interface IVehicleItem {
/* fill in the details */
}

interface IVehiclesResponse {
    vehicle: {
        results: IVehicleItem[];
    }
}

In that case, you can safely write the following:

getVehicles(): Observable<IVehiclesResponse> {
        return this.http.get<IVehiclesResponse> //...

and everything should work smoothly.

Angular Error TS2339: The property 'car' is missing from type 'Array of Vehicles'

1 service

2 component

model

data structure

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Looking for a specific search term within the middle of strings in an array

"Automatically insert a new row into the table if the cell loses focus and is not left

Manual mocking in Jest is only effective for the initial function call

Is there a way to customize the Master Page in asp.net to resolve the Bootstrap4 dropdown issue? I am encountering an error message that says "Uncaught TypeError: Bootstrap

How can I make one object's position target another grouped object in three.js, while still enabling rotation to track a camera in augmented reality?

Jest - experiencing intermittent test failures on initial run, yet succeeding on subsequent runs

Unable to transfer variable from a function to the test in Protractor

Adding a dynamic click event in HTML using IONIC 4

Disable Dates in Material UI Date Textfield

Storing POST Request Data in Express

Encountering an issue with a custom hook causing an error stating "Attempting to access block-scoped variable 'X' before its declaration."

Combining multiple API requests using NodeJS

What could be causing the jQuery .load() function to trigger twice?

Combining two or more arrays containing similar values into a single array

Utilizing nested grouping in mongoose schemas

Angular2: Retrieve and process a JSON array from an API

Is there a reason to not simply reset the connection to the $.ajax?

Express.js routes are malfunctioning with jade/pug, causing frequent crashes and routing errors

Craving assistance in coding permutations

Protractor: Command Line Tips for Providing URLs