Initializing a variable in a model from a angular service

Question

I am trying to get a image path from a restful call. I get a lot of other information that I do not need at the moment but I do need the path so I a loop through the image path on the HTML page. Below is what I have:

    [ {
  "level" : {
    "id" : 1,
    "description" : "SFG Level 0",
    "imageName" : "guru-level-0.png",
    "levelNumber" : 0,
    "created" : "2017-08-14T11:14:43.687+0000",
    "updated" : "2017-08-14T11:14:43.687+0000"
  },
  "levelImagePath" : "../../assets/images/level/guru-level-0.png"
}, {
  "level" : {
    "id" : 2,
    "description" : "SFG Level 1",
    "imageName" : "guru-level-1.png",
    "levelNumber" : 1,
    "created" : "2017-08-14T11:14:43.689+0000",
    "updated" : "2017-08-14T11:14:43.689+0000"
  },
  "levelImagePath" : "../../assets/images/level/guru-level-1.png"
}, {
  "level" : {
    "id" : 3,
    "description" : "SFG Level 2",
    "imageName" : "guru-level-2.png",
    "levelNumber" : 2,
    "created" : "2017-08-14T11:14:43.690+0000",
    "updated" : "2017-08-14T11:14:43.690+0000"
  },
  "levelImagePath" : "../../assets/images/level/guru-level-2.png"
}, {
  "level" : {
    "id" : 4,
    "description" : "SFG Level 3",
    "imageName" : "guru-level-3.png",
    "levelNumber" : 3,
    "created" : "2017-08-14T11:14:43.692+0000",
    "updated" : "2017-08-14T11:14:43.692+0000"
  },
  "levelImagePath" : "../../assets/images/level/guru-level-3.png"
}, {
  "level" : {
    "id" : 5,
    "description" : "SFG Level 4",
    "imageName" : "guru-level-4.png",
    "levelNumber" : 0,
    "created" : "2017-08-14T11:14:43.693+0000",
    "updated" : "2017-08-14T11:14:43.693+0000"
  },
  "levelImagePath" : "../../assets/images/level/guru-level-4.png"
}, {
  "level" : {
    "id" : 6,
    "description" : "SFG Level 5",
    "imageName" : "guru-level-5.png",
    "levelNumber" : 0,
    "created" : "2017-08-14T11:14:43.694+0000",
    "updated" : "2017-08-14T11:14:43.694+0000"
  },
  "levelImagePath" : "../../assets/images/level/guru-level-5.png"
} ]

My model look like:

export interface LevelModel {
    level: {
        id: number,
        description: string,
        imageName: string,
        levelNumber: number,
        created: Date,
        updated: Date
    },
    levelImagePath: string
}

Service:

@Injectable()
export class LevelsProxy {

    constructor(private httpUtil: HttpUtil, private appConstants: AppConstants) { }

    getLevels(): Observable<LevelModel[]> {
        return this.httpUtil.get(this.appConstants.END_POINT_LEVELS)
            .map(response => <LevelModel[]>response.json());
    }

}

Now for the component:

@Component({
    selector: 'sfg-levels',
    templateUrl: './levels.component.html'
})
export class LevelsComponent implements OnInit {

    private levels: LevelModel[] = [];

    constructor(private levelsService: LevelsProxy) { }

    ngOnInit() {

        this.levelsService
            .getLevels()
            .subscribe((data: LevelModel[]) => {
                if(data){
                    this.levels = this.levelsService.getLevels();
                }
            });
    }
}

in HTML:

<picture>
    <img class="shield-holder" [src]="level?.levelImagePath" alt="image description">
</picture>

Error:

/levels/levels.component.ts (23,21): Type 'Observable' is not assignable to type 'LevelModel[]'. Property 'length' is missing in type 'Observable'.

After a solution provided I have the following issue:

@Faisal please see the updated question, thank you for your time. — Mike3355
– Mike3355, Commented Aug 14, 2017 at 15:26
@micronyks the JSON is initialized. I am now getting an error saying ERROR Error: Uncaught (in promise): Error: No provider for LevelsProxy! When I did this: this.levelsService .getLevels() .subscribe((data: LevelModel[]) => { if(data){ //this.levels = this.levelsService.getLevels(); } }); — Mike3355
– Mike3355, Commented Aug 14, 2017 at 15:41
Yes that's why I asked you to complete your demo json data which is improper. — micronyks
– micronyks, Commented Aug 14, 2017 at 15:44

micronyks · Accepted Answer · 2017-08-14 16:18:38Z

1

ngOnInit() {
        this.levelsService
        .getLevels(
        .subscribe((data: LevelModel[]) => {
            if(data){  
               this.levels=data.map( val => return val.levelImagePath);
               console.log(this.levels);
            }
        });
}

<picture *ngFor="let level of levels">
    <img class="shield-holder" [src]="level" alt="image description">
</picture>

DEMO : https://plnkr.co/edit/Jf3HVZ8qg8pwzx01c13r?p=preview

(pls ignore Angular version and click on friends link to see the result. please find relevant code in myfriends.ts file.

edited Aug 14, 2017 at 16:18

answered Aug 14, 2017 at 15:29

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

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

7 Comments

Mike3355 Over a year ago

Please see the picture I just added to the bottom of the question.

micronyks Over a year ago

this.levels=data.map( val => val.levelImagePath); try to use it.

Mike3355 Over a year ago

Type 'string[]' is not assignable to type 'LevelModel[]'

micronyks Over a year ago

If you dig little into your code, probably you'd be able to do it.

micronyks Over a year ago

change private levels:LevelModel[] to levels:Array[] or levels:any.

|

Martin · Accepted Answer · 2017-08-14 16:31:28Z

0

In your example change this line:

 this.levels = this.levelsService.getLevels();

to:

this.levels = data;

TypeScript found this error for you.

answered Aug 14, 2017 at 16:31

Martin

16.4k4 gold badges51 silver badges58 bronze badges

1 Comment

Mike3355 Over a year ago

When I do that I get the following error: TypeError: Cannot read property 'length' of undefined... Thank you for your time.

Collectives™ on Stack Overflow

Initializing a variable in a model from a angular service

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related