JSON To HTML Table Compare and Alert

Question

I currently have an AJAX request to update an HTML Table from a JSON file. I now want a way to alert the changes, alerting with new table items that have been added.

Below is an example of how the HTML table is being populated. I've tried storing the JSON request into JSON.stringify, storing that into a variable and then comparing that to the last time it ran.. no luck, I only return a true/false, I'd like the compare to return the difference between old and new data.

            function populate_table(){
                $(document).ready(function(){
                    $.getJSON("data.json", function(data){
                        var update_table = '';
                        $.each(data, function(key, value){
                            update_table += '<tr>';
                            update_table += '<td>'+value.name+'</td>';
                            update_table += '<td>'+value.date+'</td>';
                            update_table += '<td>'+value.address+'</td>';
                            update_table += '<td>'+value.phone+'</td>';
                            update_table += '</tr>';
                        });
                        $('#my_table tbody').html(update_table);
                    });
                });
            };
            populate_table(); 
            setInterval(function(){
                populate_table() 
            }, 5000);

Without changing the back end JSON population, is there a way to compare the new AJAX data coming in with the data that came last time, find the differences, and alert? Any help would be greatly appreciated.

When you say, "no luck" what exactly do you mean? If the JSON data is the same, then it should be able to be compared. Is there some element in the JSON that changes which each AJAX call? Perhaps a timestamp? If so, you could exclude that from your comparison. — jwh20, Apr 28 '19 at 12:19
Note that every time `populate_table` runs, you're adding another event handler to the document ready event... You probably want to remove that bit and instead wrap your initial call to `populate_table` and `setInterval` in the document ready handler. — Heretic Monkey, Apr 28 '19 at 12:50
@jwh20 , Editing my post for more context. I am wanting to compare AND find the what was different. When I say "no luck" I mean to say that I'm only able to return a true/false, not the actual difference. I'm not sure how to do the equivalent of Powershell cmdlet Compare-Object as an example. — MrJimmer, May 02 '19 at 05:10

score 0 · Answer 1 · answered Apr 28 '19 at 12:24

0

Maybe you can try store the data in localStorage. And next time when you fetch the data in, you can pull the data from last Ajax call and compare them using loop

answered Apr 28 '19 at 12:24

Chen Brian

1
1

score 0 · Answer 2 · answered Apr 28 '19 at 12:43

0

Define an arry and push elements in to the array, then you can compare the array with the new data

var old_data = new Array;
function populate_table(){
...
old_data .push(name:value.name,
dtae:value.date,
addres: value.address,
phone:value.phone);
$('#my_table tbody').html(update_table);

answered Apr 28 '19 at 12:43

nbk

45,398
8
30
47

Is there a way to find the difference in the two arrays with javascript, rather than identifying if there is a difference? For exmaple. return "2" when comparing ["1", "2", "3"] and ["1", "3"]. Thanks for your help! – MrJimmer May 02 '19 at 05:15
you can copy the compare function here https://stackoverflow.com/questions/1187518/how-to-get-the-difference-between-two-arrays-in-javascript – nbk May 02 '19 at 16:00

JSON To HTML Table Compare and Alert

2 Answers2