Angular 8 not displaying array

Question

I'm working on a project that has 10 object in an array. An object will be displayed in the component html, and on every click the next object in the array will be displayed.

send = [ 
{"id":1,  "img":"assets/level/1.jpg"},
{"id":2,  "img":"assets/level/2.jpg"},
{"id":3,  "img":"assets/level/3.jpg"},
{"id":4,  "img":"assets/level/4.jpg"},
{"id":5,  "img":"assets/level/5.jpg"},
{"id":6,  "img":"assets/level/6.jpg"},
{"id":7,  "img":"assets/level/7.jpg"},
{"id":8,  "img":"assets/level/8.jpg"},
{"id":9,  "img":"assets/level/9.jpg"},
{"id":0,  "img":"assets/level/0.jpg"},];

The problem is if I go to the component html and type in the src {{send.img}}, it doesn't show any image.

this is my html.component

<div class="w3-col s12 m6 l6" id="level">
            <div id="test">
                <img class="w3-round w3-mobile" width="500" height="300" src="{{level.img}}">
                <input class=" w3-margin-top w3-mobile w3-section" id="testQue" style="width:400px; height: 50px; align-content: center" type="text">
                <button id="check" class="w3-btn w3-round w3-brown w3-margin-left w3-mobile">SUBMIT</button>
            </div>
        </div>

Please, how do I resolve this issue?

Because send is an array. You would need to specify the element of the array you were wanting to access. For example send[0].img — Darren Lamb
– Darren Lamb, Commented Dec 30, 2019 at 14:19

marc_s · Accepted Answer · 2020-01-10 14:19:16Z

4

Arrays should be referred to using the indexes.

Eg: {{send[0].img}} or {{send[1].img}}

To make it dynamic you should use loops (ngFor is angular loop)

You should loop an array and call the objects inside it,

You need to put into image tag to get the image displayed using.

[src]="item.img"

<div *ngFor="let item of send">
    <img [src]="item.img" alt="image not available"/>
</div>

Edit: Updated code as per your question:

Component Code:

let level;

let send = [
{"id":1,  "img":"assets/level/1.jpg"},
{"id":2,  "img":"assets/level/2.jpg"},
{"id":3,  "img":"assets/level/3.jpg"},
{"id":4,  "img":"assets/level/4.jpg"},
{"id":5,  "img":"assets/level/5.jpg"},
{"id":6,  "img":"assets/level/6.jpg"},
{"id":7,  "img":"assets/level/7.jpg"},
{"id":8,  "img":"assets/level/8.jpg"},
{"id":9,  "img":"assets/level/9.jpg"},
{"id":0,  "img":"assets/level/0.jpg"}];

currentIndex = 0;

level = send[currentIndex]

nextClicked(currentIndex) {
    this.currentIndex = this.currentIndex + 1;
    if(this.currentIndex == (this.send.length - 1)){
       this.currentIndex = 0;
    }
    this.level = this.send[this.currentIndex]
}

HTML Code:

<div class="w3-col s12 m6 l6" id="level">
    <div id="test">
        <img class="w3-round w3-mobile" width="500" height="300" src="{{level.img}}">
        <button class="w3-btn w3-round w3-brown w3-margin-left w3-mobile" (click)="nextClicked(currentIndex)">Next</button>
        <input class=" w3-margin-top w3-mobile w3-section" id="testQue" style="width:400px; height: 50px; align-content: center" type="text">
        <button id="check" class="w3-btn w3-round w3-brown w3-margin-left w3-mobile">SUBMIT</button>
    </div>
</div>

edited Jan 10, 2020 at 14:19

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Dec 30, 2019 at 14:22

Sravan

18.7k3 gold badges33 silver badges54 bronze badges

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

4 Comments

Sravan Over a year ago

check my updated code, I have updated as per your question

Adeola Emmanuel Over a year ago

The img is like a question in which if guessed correctly the next image shows, i dont want all the image showing up at once

Ali Wahab Over a year ago

Nice solution @Sravan. If I click on button 11th time it will throw an error. You need to reset the currentIndex or hide the button if currentIndex reaches to the length of array.

Sravan Over a year ago

@AliWahab, added that condition too. Thanks

Adrita Sharma · Accepted Answer · 2019-12-30 14:18:07Z

1

send is an array, so you need to run a for loop

Try like this:

<ng-container *ngFor="let item of send">
    {{item.img}}
</ng-container>

answered Dec 30, 2019 at 14:18

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Collectives™ on Stack Overflow

Angular 8 not displaying array

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related