Recommand · October 22, 2021 0

Two AJAX Get into a table

I generate a table using a class called "region" and the table’s data comes from Ajax (urlRegion). It works, but I need to include data from another ajax (urlPays) in the same table. How do I do that ? and perhaps, how you would made that code more efficient ?

const urlregion = "http://fbrc.esy.es/DWWM21050/Api/api.php/REGION/";
const urlPays = "http://fbrc.esy.es/DWWM21050/Api/api.php/PAYS/";
let donneesHeader = ["Code région ", "Code Pays", "Nom Région" , "Actions"];

import {
  afficher_template,
  refresh
} from "../init_ES6.js";

class Region {
    id = 0;
    nom = "";
    class_table = "";
    class_thead = "";
    id_zone = "";
    pays = "";
    icone_modif = "";
    icone_supp = "";
    icone_vue = "";
    fonction_supp = "";
    fonction_modif = "";
    fonction_vue = "";

    constructor(
        id = 0,
        nom = "",
        pays = "",
        class_table = "",
        class_thead = "",
        id_zone = "",
        icone_modif = "",
       icone_supp = "",
        icone_vue = "",
        fonction_supp = "",
        fonction_modif = "",
        fonction_vue = "",
    ) {
        this.id = id;
       this.nom = nom;
        this.pays = pays;
        this.class_table = class_table;
        this.class_thead = class_thead;
        this.id_zone = id_zone;
        this.icone_modif = icone_modif;
       this.icone_supp = icone_supp;
        this.icone_vue = icone_vue;
        this.fonction_supp = fonction_supp;
        this.fonction_modif = fonction_modif;
        this.fonction_vue = fonction_vue;
    }

    generer() {
        if ((this.id_zone = "")) {
            throw new Error("Il faut un Id de la zone où génrer.");
        
        } else { get(urlregion, function (reponse) {
    
                let obj = JSON.parse(reponse);

                let tableThead =
                    "<table id='table' class='" + region.class_table + "'>" +
                    "<thead class='" + region.class_thead + "'>" +
                    "<tr>" + "<th scope='col'>" + donneesHeader[0] +
                    "</th>" + "<th scope='col'>" + donneesHeader[1] +
                    "</th>" + "<th scope='col'>" + donneesHeader[2] +
                    "</th>" + "<th scope='col'>" + donneesHeader[3] +
                    "</tr>" +
            "<tbody>";
                    
          $.each(obj.REGION.records, function () {
            
          
            tableThead +=
          "<tr><td data-code= >" + $(this)[0] + "</td>" + "<td data-marque=>" + I HAVE TO INSERT THE COUNTRYS NAME HERE + "<td data-marque=>" + $(this)[2] + "</td>" + "</td><td>" +
          "<button type='button' class='" + region.class_vue + " " + region.icone_vue + "' value=" + $(this)[0] + "*" + $(this)[1] + " " + "data-bs-toggle=" + region.data_toggle_vue + " " + "data-bs-target=" + region.data_target_vue + "></button>" + " " +                  
          "<button type='button' class='" + region.class_modif + " " + region.icone_modif + "' value=" + $(this)[0] + "*" + $(this)[1] + " " + "data-bs-toggle=" + region.data_toggle_modif + " " + "data-bs-target=" + region.data_target_modif + "></button>" + " " +
          "<button type='button' class='" + region.class_supp  + " " + region.icone_supp  + "' value=" + $(this)[0] + "*" + $(this)[1] + " " + "data-bs-toggle=" + region.data_toggle_suppr + " " + "data-bs-target=" + region.data_target_suppr + "></button></td>";
        });   
        
          tableThead += "</tr></tbody></table>";
          
          
          $("#zoneTable").html(tableThead);
          

                $("#alert")
                    .fadeTo(2000, 500)
                    .slideUp(500, function () {
                    $("#alert").slideUp(500);
                    });
            })
        }
    }
}

function echec() {
  alert("Ca n'a pas marché.");
}


let region = new Region();

$(document).ready(function () {

  region.id_zone = "zoneTable";
 
    region.class_modif = "mod_region";
    region.class_supp = "supp_region";
    region.class_vue = "vue_region";
    region.class_table = "table table-dark table-hover";
    region.class_thead = "thead-dark";
    region.icone_modif = "btn btn-info btn-sm fas fa-pencil-alt fa-sm";
    region.icone_supp = "btn btn-danger btn-sm fas fa-trash-alt fa-sm";
    region.icone_vue = "btn btn-success btn-sm fas fa-eye fa-sm";
    region.data_target_vue = "#modalVue";
    region.data_toggle_vue = "modal";
    region.data_target_modif = "#modalModif";
    region.data_toggle_modif = "modal";
    region.data_target_suppr = "#modalSuppr";
    region.data_toggle_suppr = "modal";

  region.generer();
    
});

Region AJAX

Country (pays) AJAX

Generated table