CODEWITHSUNDEEP
angulartypescript
Jan Welter
Jan Welter

Reputation: 23

Cant assign value to object of interface

i have an interface to describe to format the informations about an image, especially some informations about image recognizitions from another atrificial intelligence software in the interface Confidence:

export interface Image {
    id: number;
    width?: number;
    height?: number;
    name: string;
    pfad: string;
    dateityp: string;
    ressource?: string;
    confidences?: Confidence[];
}

interface Confidence{
    class: string;
    confidence: number;
    version?: string;
    rectLeft: number;
    rectTop?: number;
    rectWidth?: number;
    rectHeight?: number;
}

And i have another interface, which describes the positions which a rectangle has in a canvas element:

export interface Rectangle {
    left: number;
    top: number;
    width: number;
    height: number;
}

What i want to do is, to copy the values rectLeft, rectTop, rectWidth and rectHeight from the array of confidences to another array which contains rectangles. This is the code i tried:

rectangles: Rectangle[];
...
ngOnInit(): void {
    this.restClient.getImageDetail(this.route.snapshot.paramMap.get('id')).subscribe(data => {
      data.confidences.forEach(confidence => {
        this.rectangles.push({
          left: confidence.rectLeft,
          top: confidence.rectTop,
          width: confidence.rectWidth,
          height: confidence.rectHeight
        });
      });
    });
  }

The Problem

The array of Rectangles contains after the right number of Rectangle elements, but all elements are empty, like this:

{left: undefined, top: undefined, width: undefined, height: undefined}

Then i checked the confidence inside the foreach. They're always filled with the correct values, like this - console.log(confidence):

class: "person"
confidence: "0.99194294"
rectheight: "0.8149626851081848"
rectleft: "0.27558863908052444"
recttop: "0.14479824900627136"
rectwidth: "0.23194609582424164"
version: "2.0.4"

So far so good, but if i log the value of an attribute of the confidence (e.g. console.log(confidence.rectLeft)) then the console only shows "undefined". It seems like there is a problem with the rectLeft, rectTop, rectWidth and rectHeight from Confidence, because the three other attributes (class, confidence, version) can be logged as expected.

What i tried

I am pretty new to Typescript and Angular, i hope someone can help me.

Many thanks in advance!

Upvotes: 1

Views: 245

Answers (2)

micronyks
micronyks

Reputation: 55443

Since Rectangle Class properties are type of number and you are feeding string values to them, you need to covert values to number at the time of feeding by putting + sign before it.

 ngOnInit(): void {
        this.restClient.getImageDetail(this.route.snapshot.paramMap.get('id')).subscribe(data => {
          data.confidences.forEach(confidence => {
            this.rectangles.push({
              left: +confidence.rectLeft,
              top: +onfidence.rectTop,
              width: +confidence.rectWidth,
              height: +confidence.rectHeight
            });
          });
        });
      }

Upvotes: 0

uiTeam324
uiTeam324

Reputation: 1245

Check for null values.

if(data && data.confidences) {
  .... write your forEach logic here
 }

As i can see the response values string where you mentioned in the interface it as number. Change the interface.

interface Confidence{
class: string;
confidence: number;
version?: string;
rectLeft: string;
rectTop?: string;
rectWidth?: string;
rectHeight?: string;

}

Upvotes: 3

Related Questions