update table with new values using jquery

Question

I am trying to create an updating table which gets data using ajax call from the server. if there is any change in the data it will send the data to the web page. I have set the ids of the table dynamically using the id of the device.

this is my table

 <table id="slave"> <thead> <tr> <th>slave name</th> <th>slave id</th> <th>type</th> <th>Status</th> <th>value</th> <th>mode</th> <th>name1</th> <th>name2</th> <th>name3</th> <th>name4</th> <th>s1</th> <th>s2</th> <th>s3</th> <th>s4</th> <th>voltage</th> <th>temperature</th> <th>humidity</th> </tr> </thead> <tbody> <tr id="3"> <td id="name"> IPL Conf Room Door </td> <td id="slave_id"> 3 </td> <td id="type"> door_sensor </td> <td id="status"> <div class="led-green"></div> </td> <td id="value"> <div class="led-blue"></div> </td> <td id="mode">0</td> <td id="name1">0</td> <td id="name2">0</td> <td id="name3">0</td> <td id="name4">0</td> <td id="s1">0</td> <td id="s2">0</td> <td id="s3">0</td> <td id="s4">0</td> <td id="voltage"> 2 </td> <td id="temp">0</td> <td id="hum">0</td> </tr> <tr id="4"> <td id="name"> IPL Motion Sensor </td> <td id="slave_id"> 4 </td> <td id="type"> PIR </td> <td id="status"> <div class="led-green"></div> </td> <td id="value"> <div class="led-blue"></div> </td> <td id="mode">0</td> <td id="name1">0</td> <td id="name2">0</td> <td id="name3">0</td> <td id="name4">0</td> <td id="s1">0</td> <td id="s2">0</td> <td id="s3">0</td> <td id="s4">0</td> <td id="voltage"> 2 </td> <td id="temp">0</td> <td id="hum">0</td> </tr> <tr id="5"> <td id="name"> IPL Conf Room Extension </td> <td id="slave_id"> 5 </td> <td id="type"> ir_relay </td> <td id="status"> <div class="led-green"></div> </td> <td id="value"> <div class="led-blue"></div> </td> <td id="mode">0</td> <td id="name1">0</td> <td id="name2">0</td> <td id="name3">0</td> <td id="name4">0</td> <td id="s1">0</td> <td id="s2">0</td> <td id="s3">0</td> <td id="s4">0</td> <td id="voltage"> 10 </td> <td id="temp"> 21 </td> <td id="hum"> 83 </td> </tr> <tr id="6"> <td id="name"> IPL Scene Switch </td> <td id="slave_id"> 6 </td> <td id="type"> macro_panel </td> <td id="status"> <div class="led-green"></div> </td> <td id="value"> <div class="led-blue"></div> </td> <td id="mode"> 4 </td> <td id="name1">0</td> <td id="name2">0</td> <td id="name3">0</td> <td id="name4">0</td> <td id="s1">0</td> <td id="s2">0</td> <td id="s3">0</td> <td id="s4">0</td> <td id="voltage"> 0 </td> <td id="temp">0</td> <td id="hum">0</td> </tr> <tr id="7"> <td id="name"> IPL Conf Lights </td> <td id="slave_id"> 7 </td> <td id="type"> fb </td> <td id="status"> <div class="led-green"></div> </td> <td id="value"> <div class="led-blue"></div> </td> <td id="mode"> 3 </td> <td id="name1"> </td> <td id="name2"> </td> <td id="name3"> </td> <td id="name4">0</td> <td id="s1"> 0 </td> <td id="s2"> 0 </td> <td id="s3"> 0 </td> <td id="s4">0</td> <td id="voltage">0</td> <td id="temp">0</td> <td id="hum">0</td> </tr> <tr id="9"> <td id="name"> IPL Reception Extension </td> <td id="slave_id"> 9 </td> <td id="type"> ir_relay </td> <td id="status"> <div class="led-green"></div> </td> <td id="value"> <div class="led-blue"></div> </td> <td id="mode">0</td> <td id="name1">0</td> <td id="name2">0</td> <td id="name3">0</td> <td id="name4">0</td> <td id="s1">0</td> <td id="s2">0</td> <td id="s3">0</td> <td id="s4">0</td> <td id="voltage"> 10 </td> <td id="temp"> 23 </td> <td id="hum"> 85 </td> </tr> <tr id="10"> <td id="name"> IPL Main Door </td> <td id="slave_id"> 10 </td> <td id="type"> door_sensor </td> <td id="status"> <div class="led-green"></div> </td> <td id="value"> <div class="led-yellow"></div> </td> <td id="mode">0</td> <td id="name1">0</td> <td id="name2">0</td> <td id="name3">0</td> <td id="name4">0</td> <td id="s1">0</td> <td id="s2">0</td> <td id="s3">0</td> <td id="s4">0</td> <td id="voltage"> 2 </td> <td id="temp">0</td> <td id="hum">0</td> </tr> </tbody> </table>

The row ids are set with the device_id.

This is my ajax call

function updateDatTable() {

    fetch('{{route('
            pusher ')}}', {
                method: 'post',
                mode: 'cors',
                headers: {
                    'Content-Type': 'application/json', // sent request
                    'Accept': 'application/json' // expected data sent back
                },
                body: JSON.stringify({ "mac": "{{$slaves['mac']}}" })
            })
        .then((res) => res.json())
        .then(function(res) {
            if (res['message'] == "no Change") {
                //alert(JSON.stringify(res));
            } else {
                alert(JSON.stringify(res)); // logic to update cell data goes here.
            }
            setTimeout(updateDatTable, 3000);
        })
        .catch(function(error) {
            alert(error);
            setTimeout(updateDatTable, 3000); // <-- there was a network problem, 
            //     but still, program the next one!
        })

}

If there is any change the data would be structured as followed.

res['array_key (starts from zero)']['td_id'];

If we need to find the slave_id to find the id we can get it by checking

res['array_key (starts from zero)']['slave_id'];

this array would have the value that is to be updated. I just need some help in jquery or javascript to change table cell data. I am not a front-end person. Thank you.

Answer 1

You can just iterate on res object depending on your logic and update innerHtml of dom nodes using $("#<yourIdHere>").html("Text you want to replace");

Reference: https://stackoverflow.com/a/1309454/2073920