CODEWITHSUNDEEP
angular
user2632918
user2632918

Reputation:

View part of array in angular

For testing, I am using a jsonstring. Later I will get this via api. The aim is to view the data in a table. The first loop with building the header works fine, but when I try to loop thrue the products, then I got an error.

I am using angular 5

This is my jsonstring:

[{
  "obm": 1234,
  "tsnr": 12,
      "tsname": "Muster",
  "tsort": "ort",
  "lastupdate": "2018-03-12 02:00:00",
  "produkte": 
    [{
      "bezeichnung": "E10",
      "artikel": 2,
      "tankgroesse": 19005,
      "aktuell": 8450,
      "eintag": 9450,
      "dreitage": 11450,
      "siebentage": 14450
    }]
}]

And here is the html

<div class="container-fluid">
    <div class="card-columns">
        <div class="card" *ngFor="let number of data; let i = index">
            <div class="card-header">
                {{ data[i].obm }} -
                {{ data[i].tsnr }} -
                {{ data[i].tsname }} -
                {{ data[i].tsort }}
                <small>Stand: {{ data[i].lastupdate }} Uhr</small>
            </div>
            <div class="card-body">
                <div class="app-table-responsive">
                    <table class="table table-hover">
                        <th colspan="2">Produkt</th>
                        <th>Tankgröße
                        <th>Aktuell</th>
                        <th>-1</th>
                        <th>-3</th>
                        <th>-7</th>
                        <tbody>
                            <tr *ngFor="let produkt of data[i].produkte; let j = index">
                                <td>{{ produkt[j].bezeichnung }}</td>
                                <td>{{ produkt[j].artikel }}</td>
                                <td>{{ produkt[j].tankgroesse }}</td>
                                <td>{{ produkt[j].aktuell }}</td>
                                <td>{{ produkt[j].eintag }}</td>
                                <td>{{ produkt[j].dreitage }}</td>
                                <td>{{ produkt[j].siebentage }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>

Where is my mistake?

I got the error that produkt[i].bezeichnung is not defined. But when view the object in console.log, then everything is delivered.

Did I try it wrong with the loop?

enter image description here

Upvotes: 0

Views: 68

Answers (4)

sagars01
sagars01

Reputation: 386

Everything is fine, just a one line change - 

<tr *ngFor="let produkt of data[i].produkte[j]; let j = index">

Since, the array is multi-dimensional you're missing the loop index for the second iteration. Cheers!

But its my recommendation you use this HTML - 

<div class="card" *ngFor="let number of data; let i = index">
        <div class="card-header">
            {{ data[i].obm }} -
            {{ data[i].tsnr }} -
            {{ data[i].tsname }} -
            {{ data[i].tsort }}
            <small>Stand: {{ data[i].lastupdate }} Uhr</small>
        </div>
        <div class="card-body">
            <div class="app-table-responsive">
                <table class="table table-hover">
                    <th colspan="2">Produkt</th>
                    <th>Tankgröße
                    <th>Aktuell</th>
                    <th>-1</th>
                    <th>-3</th>
                    <th>-7</th>
                    <tbody>
                        <tr *ngFor="let produkt of number.produkte; let j = index">
                            <td>{{ produkt.bezeichnung }}</td>
                            <td>{{ produkt.artikel }}</td> 
                            <td>{{ produkt.tankgroesse }}</td>
                            <td>{{ produkt.aktuell }}</td>
                            <td>{{ produkt.eintag }}</td>
                            <td>{{ produkt.dreitage }}</td>
                            <td>{{ produkt.siebentage }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

Upvotes: 0

Laiso
Laiso

Reputation: 2650

In your HTML file, remove these indexes like this:

<div class="container-fluid">
    <div class="card-columns">
        <div class="card" *ngFor="let number of data">
            <div class="card-header">
                {{ number.obm }} -
                {{ number.tsnr }} -
                {{ number.tsname }} -
                {{ number.tsort }}
                <small>Stand: {{ number.lastupdate }} Uhr</small>
            </div>
            <div class="card-body">
                <div class="app-table-responsive">
                    <table class="table table-hover">
                        <th colspan="2">Produkt</th>
                        <th>Tankgröße
                        <th>Aktuell</th>
                        <th>-1</th>
                        <th>-3</th>
                        <th>-7</th>
                        <tbody>
                            <tr *ngFor="let produkt of number.produkte;">
                                <td>{{ produkt.bezeichnung }}</td>
                                <td>{{ produkt.artikel }}</td>
                                <td>{{ produkt.tankgroesse }}</td>
                                <td>{{ produkt.aktuell }}</td>
                                <td>{{ produkt.eintag }}</td>
                                <td>{{ produkt.dreitage }}</td>
                                <td>{{ produkt.siebentage }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>

Upvotes: 4

Pranay Rana
Pranay Rana

Reputation: 176906

seems like issue with this line , where produkte is not present on your object

<tr *ngFor="let produkt of data[i].produkte; let j = index">

you can do like this 

<tr *ngFor="let produkt of number.produkte; let j = index">

and for you if you are storing value in number in first loop <div class="card" *ngFor="let number of data; let i = index"> than you dont need to do data[i] you just need to use number.

one more thing i suggest you make use of json and check value passed to find out what are you passing is correct or not ,for that do this on your page 

{{data|json}}

this will tell you what object you are passing and produkte is present on object or not.

please check product array is present or not by using *ngIf

 <div class="card-body" *ngIf="number.produkte">

before running loop on product array.

Also do check for null or undefined for each property by making use of ? as below 

 <div class="card" *ngFor="let number of data; let i = index">
            <div class="card-header">
                {{ number?.obm }} -
                {{ number?.tsnr }} -
                {{ number?.tsname }} -
                {{ number?.tsort }}
                <s

Upvotes: 0

alsami
alsami

Reputation: 9815

Produkt is not an array anymore, it is an object.

Remove the index j and access it directly.

<td>{{ produkt.bezeichnung }}</td>

Upvotes: 1

Related Questions