CODEWITHSUNDEEP
javascriptjsonangular
user8415997
user8415997

Reputation: 13

How to restrict the data from JSON to table to certain rows in Angular?

I'm extracting data from the server in the form of JSON and adding it to the HTML table. I want to fix the table rows to 5 and only the top 5 value from JSON should go into table using Angular. If there are less than 5 data available, fill the table columns with '-'.

component.ts

import { HttpClient } from '@angular/common/http';
import { HttpErrorResponse } from '@angular/common/http';

@Component({
  selector: 'app-orderbook',
  templateUrl: './orderbook.component.html',
  styleUrls: ['./orderbook.component.css']
})
export class OrderbookComponent implements OnInit {
  title = 'JSON to Table Example';
  constructor (private httpService: HttpClient) { }
  arrBirds: string [];
  

  ngOnInit() {
    this.httpService.get('http://localhost:7000/orders/list').subscribe(
      data => {
        this.arrBirds = data as string [];   // FILL THE ARRAY WITH DATA.
         //console.log(this.arrBirds[1]);
      },
      (err: HttpErrorResponse) => {
        //console.log (err.message);
      }
    );
  }
  }

component.html

      <div style="text-align:left;width:500px;">
        <h1>
            {{ title }}!
        </h1>
        
        <table *ngIf="arrBirds">
            
              <tr>
                <th>Order ID</th>
                <th>Type</th>
                <th>Category</th>
                <th>Quantity</th>
                <th>Price</th>
              </tr>
          
          <tr *ngFor="let bird of arrBirds">
            <td>{{bird.orderId}}</td>
            <td>{{bird.type}}</td>
            <td>{{bird.category}}</td>
            <td>{{bird.quantity}}</td>
            <td>{{bird.price}}</td>
          </tr>
      </table>
    </div>

component.css

table {
    border-collapse: collapse;
    width: 95%;
    margin:0 0 0 20px;
  }
  
  table, th, td {
    border: 1px solid black;
  }

Upvotes: 1

Views: 381

Answers (2)

Ashwin Saxena
Ashwin Saxena

Reputation: 36

This sort of data manipulation should be done in the component (or preferably a separate service).

You can write a function in your OrderbokComponent to get the top 5 birds (based on your custom criteria, price / quantity, etc), store that in a variable and use that to generate the list.

You can even sort the arrBirds array and do something like this in ngFor :

<tr *ngFor="let bird of arrBirds | slice:0:4">
            <td>{{ bird?.orderId || '-' }}</td>
            <td>{{ bird?.type || '-' }}</td>
            <td>{{ bird?.category || '-' }}</td>
            <td>{{ bird?.quantity || '-' }}</td>
            <td>{{ bird?.price || '-' }}</td>
          </tr>

Upvotes: 0

Alex
Alex

Reputation: 1158

One simple way of achieving this would be to initialize your Array with a given length:

arrBirds = Array.from({length: 5});

Then you can assign your data to this array

if (data) {
    data.forEach((bird, index) => {
        this.arrBirds[index] = bird;
    });
}

Slightly adapt your display to handle null values:

          <tr *ngFor="let bird of arrBirds">
            <td>{{ bird?.orderId || '-' }}</td>
            <td>{{ bird?.type || '-' }}</td>
            <td>{{ bird?.category || '-' }}</td>
            <td>{{ bird?.quantity || '-' }}</td>
            <td>{{ bird?.price || '-' }}</td>
          </tr>

And you should be good to go !

Upvotes: 1

Related Questions