D
D
Dmitry Kuzmin2016-09-10 09:11:39
PHP
Dmitry Kuzmin, 2016-09-10 09:11:39

Duplicate output in javascript why?

There is an output from JSON (JSON is formed in PHP), there is a timeout. When updating by timeout, the data is duplicated for some reason, and not updated. As a result, the data on the cycle endlessly falls out.
The code:
<ul></ul>

$(document).ready(function(){
      $.ajaxSetup ({  
        cache: false  
    }); 
  setTimeout(getData, 5000);
  });

    
                /* call the php that has the php array which is json_encoded */
        function getData(){
                $.getJSON('api.php', function(data) {
                        /* data will hold the php array as a javascript object */
                        $.each(data, function(key, val) {
                                $('ul').append('<li id="' + key + '">' + val.date + ' ' + val.event + ' ' + val.region + ' ' + val.host + ' '+ val.type + ' ' + val.info + '</li>');
            });
            setTimeout(getData, 5000);
            });
            }


Result output:

2016-09-09 09:12:18 WARN SZ SIU05 [main] Started, locked port 7075
2016-09-09 09:37:03 WARN SZ SIU05 [main] Started, locked port 7075
2016-09-09 09:12:18 WARN MRP SIU05 [main] Started, locked port 7075
2016-09-09 09:12:18 WARN MRP SIU05 [main] Started, locked port 7075
2016-09-09 09:12:18 WARN MRP SIU05 [main] Started, locked port 7075
2016-09-09 09:12:18 WARN MRP SIU05 [main] Started, locked port 7075
2016-09-09 09:12:18 WARN MRP SIU05 [main] Started, locked port 7075
2016-09-09 09:12:18 WARN MRP SIU05 [main] Started, locked port 7075
2016-09-09 09:12:18 WARN MRP SIU05 [main] Started, locked port
7075 :18 WARN MRP SIU05 [main] Started, locked port 7075
2016-09-09 09:12:18 WARN MRP SIU05 [main] Started, locked port 7075
2016-09-09 09:12:18 WARN MRP SIU05 [main] Started, locked port
7075 :18 WARN SZ SIU05 [main] Started, locked port 7075
2016-09-09 09:37:03 WARN SZ SIU05 [main] Started, locked port 7075
2016-09-09 09:12:18 WARN MRP SIU05 [main] Started, locked port 7075
2016-09-09 09:12:18 WARN MRP SIU05 [main] Started, locked port 7075
2016-09-09 09:12:18 WARN MRP SIU05 [main] Started, locked port 7075
2016-09 -09 09:12:18 WARN MRP SIU05 [main] Started, locked port 7075
2016-09-09 09:12:18 WARN MRP SIU05 [main] Started, locked port 7075
2016-09-09 09:12:18 WARN MRP SIU05 [main] Started, locked port 7075
2016-09-09 09:12:18 WARN MRP SIU05 [main] Started, locked port 7075
2016-09-09 09:12:18 WARN MRP SIU05 [main] Started, locked port
7075 :18 WARN MRP SIU05 [main] Started, locked port 7075

2016-09-09 09:12:18 WARN MRP SIU05 [main] Started, locked port 7075
I need without doubles:

2016-09-09 09:12:18 WARN SZ SIU05 [main] Started, locked port 7075

2016-09-09 09:37:03 WARN SZ SIU05 [main] Started, locked port 7075

2016-09-09 09:12:18 WARN MRP SIU05 [main] Started, locked port 7075

2016-09-09 09:12:18 WARN MRP SIU05 [main] Started, locked port 7075

2016-09-09 09:12:18 WARN MRP SIU05 [main] Started, locked port 7075

2016-09-09 09 :12:18 WARN MRP SIU05 [main] Started, locked port 7075

2016-09-09 09:12:18 WARN MRP SIU05 [main] Started, locked port 7075

2016-09-09 09:12:18 WARN MRP SIU05 [main] Started, locked port

7075 :18 WARN MRP SIU05 [main] Started, locked port 7075

2016-09-09 09:12:18 WARN MRP SIU05 [main] Started, locked port 7075

2016-09-09 09:12:18 WARN MRP SIU05 [main] Started, locked port 7075

2016-09-09 09:12:18 WARN MRP SIU05 [main] Started, locked port 7075

Only update is needed, i.e. in the end it should be:

2016-09-09 09:12:18 WARN SZ SIU05 [main] Started, locked port 7075
2016-09-09 09:37:03 WARN SZ SIU05 [main] Started, locked port 7075
2016-09-09 09:12:18 WARN MRP SIU05 [main] Started, locked port 7075
2016-09-09 09:12:18 WARN MRP SIU05 [main] Started, locked port 7075
2016-09-09 09:12:18 WARN MRP SIU05 [main] Started, locked port
7075 :18 WARN MRP SIU05 [main] Started, locked port 7075
2016-09-09 09:12:18 WARN MRP SIU05 [main] Started, locked port 7075
2016-09-09 09:12:18 WARN MRP SIU05 [main] Started, locked port 7075
2016-09-09 09:12:18 WARN MRP SIU05 [main] Started, locked port 7075
2016-09-09 09:12:18 WARN MRP SIU05 [main] Started, locked port 7075
2016-09 -09 09:12:18 WARN MRP SIU05 [main] Started, locked port 7075
2016-09-09 09:12:18 WARN MRP SIU05 [main] Started, locked port 7075

Output from api.php

[{"date":"2016-09-09 09:12:18","event":"WARN ","region":"SZ","host":"SIU05","type":"[main ]","info":"Started, locked port 7075"},{"date":"2016-09-09 09:37:03","event":"WARN ","region":"SZ", "host":"SIU05","type":"[main]","info":"Started, locked port 7075"},{"date":"2016-09-09 09:12:18"," event":"WARN ","region":"MRP","host":"SIU05","type":"[main]","info":"Started, locked port 7075"},{"date" :"2016-09-09 09:12:18","event":"WARN ","region":"MRP","host":"SIU05","type":"[main]","info":"Started, locked port 7075"},{"date":"2016-09-09 09:12:18 ","event":"WARN ","region":"MRP","host":"SIU05","type":"[main]","info":"Started, locked port 7075"},{ "date":"2016-09-09 09:12:18","event":"WARN ","region":"MRP","host":"SIU05","type":"[main]" ,"info":"Started, locked port 7075"},{"date":"2016-09-09 09:12:18","event":"WARN ","region":"MRP","host ":"SIU05","type":"[main]","info":"Started,locked port 7075"},{"date":"2016-09-09 09:12:18","event":"WARN ","region":"MRP","host":"SIU05","type ":"[main]","info":"Started, locked port 7075"},{"date":"2016-09-09 09:12:18","event":"WARN ","region" :"MRP","host":"SIU05","type":"[main]","info":"Started, locked port 7075"},{"date":"2016-09-09 09:12 :18","event":"WARN ","region":"MRP","host":"SIU05","type":"[main]","info":"Started, locked port 7075"} ,{"date":"2016-09-09 09:12:18","event":"WARN ","region":"MRP","host":"SIU05","type":"[main]","info":"Started, locked port 7075"},{"date":"2016-09-09 09:12:18","event":"WARN ","region":"MRP","host":"SIU05","type":"[main]","info":"Started, locked port 7075"}]

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Anton Khmyrov, 2016-09-10
@Dimkaa

In your code, you only add new elements to the list, and therefore the old ones are not deleted. try to insert between $.getJSON('api.php', function(data) { and $.each(data, function(key, val) command to clear the list:
$('ul').empty();
It should look like this:

function getData(){
                $.getJSON('api.php', function(data) {
                        $('ul').empty();
                        /* data will hold the php array as a javascript object */
                        $.each(data, function(key, val) {
                                $('ul').append('<li id="' + key + '">' + val.date + ' ' + val.event + ' ' + val.region + ' ' + val.host + ' '+ val.type + ' ' + val.info + '</li>');
            });
            setTimeout(getData, 5000);
            });
            }

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question