Displaying single entry from MySQL database

Question

I am new to Angular, Typescript and using it to Ionic. I would like to display the single content in the total column of transactions table of my bms MySQL database. I would like to know what is the query or format on the HTML side.

reports.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController } from 'ionic-angular';
import { ModalReportsProfitsRankingsPage } from '../modal-reports-profits-rankings/modal-reports-profits-rankings';
import { HTTP } from '@ionic-native/http';
import { HelperProvider } from '../../providers/helper/helper';
import { PassportProvider } from '../../providers/passport/passport';

@IonicPage()
@Component({
  selector: 'page-reports',
  templateUrl: 'reports.html',
})
export class ReportsPage {

  oauthToken: any
  productList: any
  loader: string = 'show'
  reports: any
  reportList: Array<{
    name: string
  }>
  reportListFiltered: any
  query: string

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public modalCtrl: ModalController,
    public http: HTTP,
    public helper: HelperProvider,
    public passport: PassportProvider
    ) {
    this.reportList = []
    this.reportListFiltered = []
    this.passport.oauthToken(
      this.helper.getApi(),
      1,
      this.helper.GetclientSecret()
    ).then(data => {
      this.oauthToken = JSON.parse(data.data)
      this.loadReports()
    })
  }

  loadReports() {
    this.http.get(this.helper.getApi() + '/api/store-reports', {}, {
      'Accept': 'application/json',
      'Authorization': 'Bearer ' + this.oauthToken.access_token
    }).then(data => {
      let res = JSON.parse(data.data)
      this.reportList = res.data

      this.reportList.forEach(element => {
        let tmp = element
        this.reportListFiltered.push({
          invoice_no: tmp.invoice_no,
          type: tmp.type,
          payment: tmp.payment,
          exchange: tmp.exchange,
          total: tmp.total
        })
      })
    })
  }

reports.html

<ion-header>
  <ion-navbar hideBackButton>
    <button ion-button menuToggle>
      <span class="lnr lnr-menu"></span>
    </button>
    <ion-title>
      Reports
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <div class="fluid big ui buttons">
    <button class="blue ui button">Profits</button>
    <button class="ui button">Expenses</button>
    <button class="ui button">Invoices</button>
  </div>

  <div class="fluid ui card my-5">
    <div class="content">
      <div class="header">Sales report</div>
      <div class="mini fluid basic ui buttons my-3">
        <button class="ui button">Day</button>
        <button class="ui button">Week</button>
        <button class="ui button">Month</button>
      </div>
      <div class="description">
        <table class="unstackable ui celled table">
          <tbody>
            <tr>
              <td>
                Purchase cost:
                <br>
                <small>
                  P555 <!-- This is where I want to print the total -->
                </small>
              </td>
              <td>
                Gross sales:
                <br>
                <small>
                  P36,020
                  (P10,000)
                </small>
              </td>
            </tr>
            <tr>
              <td>
                Expenses:
                <br>
                <small>
                  P36,020
                </small>
              </td>
              <td>
                Gross profit:
                <br>
                <small>
                  P36,020
                </small>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="extra content">
      <span class="right floated" (click)="showModalReportsProfitsRankings()">
        View rankings <i class="chevron right icon"></i>
      </span>
    </div>
  </div>

</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-grid>
      <ion-row>
        <ion-col>
          <h4 class="my-3 text-center">December 23 - February 25</h4>
          <div class="big fluid ui icon buttons">
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-toolbar>
</ion-footer>

I apologize if I may have included the wrong tags but if anyone can point me in the right direction of doing this output is greatly appreciated.

EDIT:

Tried editing some few points:

reports.ts

export class ReportsPage {

  oauthToken: any
  reportList: any
  loader: string = 'show'
  reportListFiltered: any
  query: string

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public viewCtrl: ViewController,
    public modalCtrl: ModalController,
    public http: HTTP,
    public helper: HelperProvider,
    public passport: PassportProvider
    ) {
    this.reportListFiltered = []
    this.passport.oauthToken(
      this.helper.getApi(),
      1,
      this.helper.GetclientSecret()
    ).then(data => {
      this.oauthToken = JSON.parse(data.data)
      this.loadReports()
    })
  }

  loadReports() {
    this.http.get(this.helper.getApi() + '/api/store-products/1', {}, {
      'Accept': 'application/json',
      'Authorization': 'Bearer ' + this.oauthToken.access_token
    }).then(data => {
      let res = JSON.parse(data.data)
      this.loader = 'hide'
      this.reportList = res.data
      console.log(this.reportList)

      this.reportList.forEach(element => {
        let tmp = element
        this.reportListFiltered.push({
          invoice_no: tmp.invoice_no,
          type: tmp.type,
          payment: tmp.payment,
          exchange: tmp.exchange,
          total: tmp.total,
          store_id: tmp.store_id,
          user_id: tmp.user_id
        })
      })
    })
  }

}

reports.html

    <table class="unstackable ui celled table">
      <tbody>
        <tr *ngFor="let report of reportListFiltered">
          <td>
            Purchase cost:
            <br>
            <small>
              {{ report.total }}
              <!-- Does't output anything -->
            </small>
          </td>
          <td>
            Gross sales:
            <br>
            <small>
              P36,020
              (P10,000)
            </small>
          </td>
        </tr>
        <tr>
          <td>
            Expenses:
            <br>
            <small>
              P36,020
            </small>
          </td>
          <td>
            Gross profit:
            <br>
            <small>
              P36,020
            </small>
          </td>
        </tr>
      </tbody>
    </table>

It just loops, maybe I am missing something or incorrect string output

I'm sorry, I don't know the format / query to display the data, but in my guess, it's using via Angular. — KiritoLyn
– KiritoLyn, Commented Jan 29, 2019 at 9:39
If this.http has been injected correctly you need to .subscribe rather than .then as http.get() provides an Observable — Bernie
– Bernie, Commented Jan 29, 2019 at 9:39
The total column in the above picture is what I'm hoping to print out. — KiritoLyn
– KiritoLyn, Commented Jan 29, 2019 at 10:53

Tushar Walzade · Accepted Answer · 2019-01-29 11:05:45Z

Considering your current scenario, you are printing your table as following -

So, If I'm getting your question right, you need to print your total under Purchase Cost in your table dynamically. So, the following is the example code -

Your array of objects -

reportListFiltered = [
    {
      invoice_no: 1,
      type: 'type1',
      payment: 'payment1',
      exchange: 'exchange1',
      total: 'total1'
    },
    {
      invoice_no: 2,
      type: 'type2',
      payment: 'payment2',
      exchange: 'exchange2',
      total: 'total2'
    }
]

And your table snippet would be -

<table class="unstackable ui celled table">
    <tbody>
        <tr *ngFor="let report of reportListFiltered">
            <td>
                <tr>
                    <td>
                        Purchase cost:
                        <br>
                        <small>
                            {{ report?.total}}
                            <!-- This is where I want to print the total -->
                        </small>
                    </td>
                    <td>
                        Gross sales:
                        <br>
                        <small>
                            P36,020
                            (P10,000)
                        </small>
                    </td>
                </tr>
                <tr>
                    <td>
                        Expenses:
                        <br>
                        <small>
                            P36,020
                        </small>
                    </td>
                    <td>
                        Gross profit:
                        <br>
                        <small>
                            P36,020
                        </small>
                    </td>
                </tr>
            </td>
        </tr>
    </tbody>
</table>

It would look like the following -

Collectives™ on Stack Overflow

Displaying single entry from MySQL database

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related