Pages

Call api Data and show in a Bootstrap table : Javascript

 var itmLogOpen = document.querySelectorAll('.itmLogOpen');

        for(var x=0; x<itmLogOpen.length; x++){
            itmLogOpen[x].addEventListener('click',function(){
                var Serialitmno = this.getAttribute('data-itmno');

                

                displayLblog(Serialitmno);



            })
        }

        function displayLblog(Serialitmno) {


            const hostname = window.location.host;
            const url = `https://${hostname}/api/log/print/details/label?division=11&serialNo=${Serialitmno}`;

            fetch(url)
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`No Information available. Please re-check the Serial Number again.`);
                    }
                    return response.json();
                })
                .then(data => {
                    if (!data.data || data.data.length === 0) {
                        alert("No data available, Please check the serial number");
                        // Reset the displayed values
                        //resetDisplayedValues();
                    } else {

                        //alert(JSON.stringify(data));

                        const datalogTable = document.querySelector("#datalogTable tbody")
                        datalogTable.innerHTML = "";

                        data.data.forEach(item=>{
                            


                            const trow = document.createElement("tr");
                            trow.innerHTML=`
                            

                  <td>${item.printedBy}</td>
                  <td>${item.formattedDate}</td> 

                            `;
                            datalogTable.appendChild(trow);

                        });


                        var logViewer = new bootstrap.Modal(document.getElementById('logViewer'));
                        logViewer.show();
                    }
                })
                .catch(error => {
                    alert(error.message);
                    console.error(error);
                    // Reset the displayed values
                   // resetDisplayedValues();
                });

        }

No comments:

Post a Comment

Search This Blog