CSAsite/dataTable.html at main · DavidVasilev1/CSAsite · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<head>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
  <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
</head>

<table id="table" class="table">
  <thead id="head">
      <tr>
          <th>Category</th>
          <th>Common Name</th>
          <th>Climate</th>
          <th>Family</th>
          <th>Latin Name</th>
          <th>Image</th>
      </tr>
  </thead>
  <tbody id="body"></tbody>
</table>


<script>
  const settings = {
    async: true,
    crossDomain: true,
    url: 'https://house-plants2.p.rapidapi.com/all-lite',
    method: 'GET',
    headers: {
      'X-RapidAPI-Key': '701410bf7emshbaf1fa99b2e4e5bp1c0ee6jsn8f8f51602e3f',
      'X-RapidAPI-Host': 'house-plants2.p.rapidapi.com'
    }
  };

  $.ajax(settings).done(function (response) {
    console.log(response);


    for (const row of response) {

const commonName = Array.isArray(row["Common name"]) ? row["Common name"].join(', ') : row["Common name"];
const latinName = Array.isArray(row["Latin name"]) ? row["Latin name"].join(', ') : row["Latin name"];

      $('#body').append('<tr><td>' +
          row.Categories + '</td><td>' +
          commonName + '</td><td>' +
          row.Climat + '</td><td>' +
          row.Family + '</td><td>' +
          latinName + '</td><td>' +
          '<img src="' + row.Img +'">' + '</td></tr>');
    }
    $("#table").DataTable();
  });


</script>