Confused about Typescript object types {} []

Question

I have never worked with lists, object lists etc in Typescript and im not sure how they work. The below code doesnt do much except create a few objects and create some temp values for them through a loop, but i want the console log to print out the second objects name ("image1") followed by the second objects height (21).

What is wrong with the below code? Since undefined is being printed out.

import { Component, OnInit } from '@angular/core';

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

  image = {};
  images = [this.image];

  constructor() {
  }

  ngOnInit() {
    for (let i = 0; i < 3; i++) {
      this.image = {name: "image"+i, height: 20+i};
      this.images[i] = this.image;
    }

    console.log(this.images[1][0]);
    console.log(this.images[1][1]);
  }

}

this.images[1] is {name: "image1", height: 21}. Are you expecting the [0] after that to work like .name? Why? — Ry-
– Ry- ♦, Commented May 28, 2019 at 6:54

Bjorn 'Bjeaurn' S · Accepted Answer · 2019-05-28 06:55:57Z

1

Nothing wrong perse, but you can simply access your array's objects as you are by doing this:

console.log(this.images[1].name)
console.log(this.images[1].height)

You can use the names in there. If you're using TypeScript and an editor or IDE that supports TypeScript's language service; it'll even recommend values it knows are available!

answered May 28, 2019 at 6:55

Bjorn 'Bjeaurn' S

3,8912 gold badges21 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adrita Sharma · Accepted Answer · 2019-05-28 06:57:14Z

0

Try this:

  images:any[] = []

  ngOnInit() {
    this.images = []
    for (let i = 0; i < 3; i++) {
      let image = { name: "image" + i, height: 20 + i };
      this.images.push(image)
    }

    console.log(this.images);
    console.log(this.images[1].name);
    console.log(this.images[1].height);
  }

answered May 28, 2019 at 6:57

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Comments

Dinosan0908 · Accepted Answer · 2019-05-28 06:57:58Z

0

You're trying to access this.image[1] with an index [0] while the saved image is an object with name and height properties

You should access images by pointing the index of this.images then using property as a key instead of a second index

for (let i = 0; i < 3; i++) {
   const image = {name: "image"+i, height: 20+i};
   this.images[i] = image;
 }

 console.log(this.images[0].name);
 console.log(this.images[1].name);
 console.log(this.images[2].height);
...

answered May 28, 2019 at 6:57

Dinosan0908

1,1022 gold badges8 silver badges20 bronze badges

Comments

user4676340 · Accepted Answer · 2019-05-28 06:58:52Z

Let's do it in Javascript in a snippet :

class HomeComponent {
  constructor() {
    this.image = {};
    this.images = [this.image];
    this.ngOnInit();
  }

  ngOnInit() {
    for (let i = 0; i < 3; i++) {
      this.image = {name: "image"+i, height: 20+i};
      this.images[i] = this.image;
    }

    console.log(this.images[1][0]);
    console.log(this.images[1][1]);
  }

}

let x = new HomeComponent();

Now let's break it up :

1 - you create an empty image : image = {}
2 - you create an array containing this image : images = [{}]
3 - you create a loop that iterates 3 times
4 - in it, you change the image and push it in the array

You then have an array of 3 elements (because you override the first value), with each having a name and height properties, that aren't the same.

You then try to display the key "0" & "1" of the second image of the array.

But it just has "name" and "height" !

If you want to print the keys of the second object, you can try this instead :

class HomeComponent {
  constructor() {
    this.image = {};
    this.images = [this.image];
    this.ngOnInit();
  }

  ngOnInit() {
    for (let i = 0; i < 3; i++) {
      this.image = {name: "image"+i, height: 20+i};
      this.images[i] = this.image;
    }

    console.log(Object.entries(this.images[1]));
  }

}

let x = new HomeComponent();

Collectives™ on Stack Overflow

Confused about Typescript object types {} []

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related