How to output items from an array in angular

Question

Im really new to angular. And I find that it is really hard to get an item from an array and output in the relevant html file in that component. The below code shows the onClick function of the bill-item.component.ts file

arr: Array<any> =[];
itemArray: Array<any> =[]; 

     onAddToBill(itemId:string, name:string , expireDate:string , quantity:string){

      this.itemArray.push([itemId,name,expireDate,quantity]);
      this.arr.push(this.itemArray);
      console.log(this.arr);

      }

And I need to output the item array on my bill-item.component.html which is shown below

                 <tbody>

                  <tr *ngFor="let itemArrays of arr">

                    <td *ngFor="let obj of itemArrays">{{obj[1]}}</td>
                    <td *ngFor="let obj of itemArrays">{{obj[0]}}</td>
                    <td><input type="number" class="is-center" id="number" value="1" style="width: 50%;" /></td>
                    <td *ngFor="let obj of itemArrays">{{obj[2]}}</td>
                    <td *ngFor="let obj of itemArrays">{{obj[3]}}</td>

                  </tr>

                </tbody>

The below image shows the item list when I add the first item

But after adding the second item , the item list shows like this

Here all the items gets add up to the same row , I want to get each item in separate row , line after line.

Then I tried the below code

           <tbody>
              <tr *ngFor="let entries of arr">
                <td>{{entries [1]}}</td>
                <td>{{entries [0]}}</td>
                <td><input type="number" class="is-center" id="number" value="1" style="width: 50%;" /></td>
                <td>{{entries [2]}}</td>
                <td>{{entries [3]}}</td>
              </tr>
            </tbody>

And this was the result. As ID has the entry[0] it was filled with all the instances in that array.

The below image shows my console.log(arr) result after adding 3 items

IMO replacing the inner array with an object would make more sense. Especially since you're trying to render the elements in an order different to the array. — Barremian
– Barremian, Commented May 14, 2020 at 7:30

Dupdilan · Accepted Answer · 2020-05-16 08:23:33Z

2

you can easily get values from "itemArray" rather than use "arr" and get the item details and print in table.

<table>
      <tr *ngFor="let x of itemArray">
          <td>{{x[0]}}</td>
          <td>{{x[1]}}</td>
      </tr>
</table>

like wise

answered May 16, 2020 at 8:23

Dupdilan

361 bronze badge

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

1 Comment

Lalana Chamika Over a year ago

Kollo this actually worked , thanks a lot for saving the time.

Shlok Nangia · Accepted Answer · 2020-05-14 07:26:38Z

1

you do not need to use *ngFor for each of entries as you are using array indexes like entries[1]

            <tbody>
              <tr *ngFor="let entries of arr">
                <td>{{entries [1]}}</td>
                <td>{{entries [0]}}</td>
                <td><input type="number" class="is-center" id="number" value="1" style="width: 50%;" /></td>
                <td>{{entries [2]}}</td>
                <td>{{entries [3]}}</td>
              </tr>
            </tbody>

I tried this above code with following value of arr

arr = [['a','b','c','d'],['a1','b1','c1','d1']]

and got the result as

edited May 14, 2020 at 7:26

answered May 14, 2020 at 6:43

Shlok Nangia

2,3773 gold badges19 silver badges25 bronze badges

9 Comments

Lalana Chamika Over a year ago

Thank you for the answer but here in my "arr" array I'm storing "itemArray" which is the array storing [ itemId , name , expireDate , quantity ] , so " arr " is like an 2 D array , if im not mistaken it. So entries[0] = [ itemId , name , expireDate , quantity ] but i need only the ItemID for entries[0]

Shlok Nangia Over a year ago

no, entries= [ itemId , name , expireDate , quantity ] (i.e. each entry of arr) and entries[0] =ItemID

Shlok Nangia Over a year ago

as entries is each element in for loop

Lalana Chamika Over a year ago

entries is one instance of arr array, but my arr array has [itemArray1,itemArray2, itemArray3] where itemArray=[itemId,name,expireDate,quantity] , Please look at my bill-item.component.ts code shown in the above question

Shlok Nangia Over a year ago

check this angular.io/guide/displaying-data#add-logic-to-loop-through-data

|

Kaustubh Khare · Accepted Answer · 2020-05-14 06:24:13Z

0

There is no need for iterating itemArrays. You can directly access element using the index.

Remove *ngFor of each itemArrays on each row.

<tbody>

              <tr *ngFor="let itemArrays of arr">
                <td>{{itemArrays[1]}}</td>
                <td >{{itemArrays[0]}}</td>
                <td><input type="number" class="is-center" id="number" value="1" style="width: 50%;" /></td>
                <td >{{itemArrays[2]}}</td>
                <td>{{itemArrays[3]}}</td>

              </tr>

            </tbody>

answered May 14, 2020 at 6:24

Kaustubh Khare

3,5203 gold badges38 silver badges51 bronze badges

1 Comment

Lalana Chamika Over a year ago

Thank you for the answer but here in my "arr" array Im storing "itemArray" which is the array storing [ itemId , name , expireDate , quantity ] , so " arr " is like an 2 D array , if im not mistaken it. So itemArrays[0] = [ itemId , name , expireDate , quantity ] but i need only the ItemID for itemArrays[0]

Parween Kelappan · Accepted Answer · 2020-05-14 06:25:46Z

0

In td you are already accessing the items in the array, so you do not need to use *ngFor.

            <tbody>
              <tr *ngFor="let itemArrays of arr">
                <td>{{itemArrays[1]}}</td>
                <td>{{itemArrays[0]}}</td>
                <td><input type="number" class="is-center" id="number" value="1" style="width: 50%;" /></td>
                <td>{{itemArrays[2]}}</td>
                <td>{{itemArrays[3]}}</td>
              </tr>
            </tbody>

answered May 14, 2020 at 6:25

Parween Kelappan

263 bronze badges

1 Comment

Lalana Chamika Over a year ago

Thank you for the answer but here in my "arr" array Im storing "itemArray" which is the array storing [ itemId , name , expireDate , quantity ] , so " arr " is like an 2 D array , if im not mistaken it. So itemArrays[0] = [ itemId , name , expireDate , quantity ] but i need only the ItemID for itemArrays[0]

Collectives™ on Stack Overflow

How to output items from an array in angular

4 Answers 4

1 Comment

9 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

9 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related