在Ionic页面上显示从PHP接收的数据列表

Question

I have successfully sent an http.post request to PHP and retrieved some data from a MySQL database, in the form of an array containing several objects.

I can echo the data into the console.log of my browser. Also, the auth.service.ts with the http.post receives the date and I have it stored in a variable - a console.log confirms this.

However, I do not know how to show this data via the HTML page. I have seen older versions of angular users doing similar on youtube etc, but cannot translate what they have done to my project.

I don't know where to start...

AUTH.SERVICE.TS (this functions)

getCoursList(date) {
return this.http.post('http://localhost/Attendance App/myApp/src/app/api/getCours.php', {
  date,
}).subscribe(data => {
  console.log(Object.values(data));
  const planning = Object.values(data);
  const grabArray = planning[0];
  const id = grabArray.intervenant;
  if (id !== undefined) {
    // console.log('test array', id);
    this.router.navigate(['/cours/', id]);
  };
},

GETCOURS PHP FILE (this functions)

$stmt = $conn->prepare("SELECT * FROM planning WHERE intervenant = :id AND date = :date");
$stmt->execute([':id' => $id, ':date' => $date]);

if ($stmt->rowCount() > 0) {
    // $output = array();
    $output = $stmt->fetchAll();
    echo json_encode($output);
} else {
    $errors = "No data found for this date";
    echo json_encode($errors);
}

CONSOLE LOG DISPLAY OF RESULTS


[object Array]: [Object, Object]

0: Object
cours: "CFA"
date: "2019-09-20"
duration: "1h30m"
etudiant: "12"
id_planning: 1
intervenant: "2"
lieux: "Nice 1"
time: "13:15:00"

__proto__: Object

1: Object
cours: "Outils Numeriques"
date: "2019-09-20"
duration: "1h30m"
etudiant: "16"
id_planning: 4
intervenant: "2"
lieux: "Monaco High School"
time: "13:15:00"

__proto__: Object
length: "2"

So I would like what is displayed in the console log, to be displayed on an HTML page, produced dynamically upon loading.

This is probably very simple as I already have the data at hand, but this is my first little app project and Ionic makes me dizzy!

Thanks for any help in advance.

Answer 1

You can use for loop to display your array data like this:

data = your obj of array in page.ts

datalist: any[];

this.datalist = data

  <ion-list>
    <ion-item *ngFor="let d of datalist ">
      <p>{{d.cours}}</p>
      <p>{{d.date}}</p>
      <p>{{d.duration}}</p>
      <p>{{d.etudiant}}</p>
      <p>{{d.id_planning}}</p>
      <p>{{d.intervenant}}</p>
      <p>{{d.lieux}}</p>
      <p>{{d.time}}</p>
    </ion-item>
  </ion-list>

Let me know, it's working or not.