jQuery：仅显示新的 JSON 数据，使用自己的段落标签进行迭代

Question

仅显示 JSON 数据的新更新，使用 jQuery/javascript 在其自己的段落标签中迭代每个值项。

如果info键内的数组中的每一项都已经在其自己的<p>标签中输出； 不要继续循环，但要等到有新项目。

这是我的 JSON：

{
  "info": [
    "Hello world,",
    "how are you doin?",
    "Its not going to well for me unfortunately."
  ]
}

使用这个 jQuery 脚本：

function updatelog() {
 $.getJSON("/static/_info",
  function(data) {
   $.each(data, function(key, item) {
    var value = "";
    var i;
    for (i = 0; i < item.length; i++) {
     value += item[i];
     $("div").add('<p>' + value + '</p>').appendTo(document.body);
    }
   });
  });
}
var interval = window.setInterval(updatelog, 2000);

有了这个我得到了所有的项目，但它并没有停止迭代。我已经在互联网上搜索了很多，以至于我的输入键已经失去了拯救的所有希望。我想这很容易，但我是初学者，也不是 javascript 编码器，我已经准备好脱掉头发了。提前致谢。

Answer 1

您可以获取所有 p 元素的文本并将其推送到新数组，然后检查它是否包含来自您的对象的值

var data = JSON.parse('{"info":["Hello world,","how are you doin?","Its not going to well for me unfortunately."]}'),
  pText = [];

$('p').each(function() {
  pText.push($(this).text());
});

data.info.forEach(function(el) {
  if (!pText.includes(el)) {
    $('body').append('<p>' + el + '</p>');
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Hello world,</p>

Answer 2

您可以从每个列表项生成一个哈希，并将其用作 div 元素中的 id。每次检索数据时，都会检查相应的 id 是否存在。如果它存在，则该项目已经存在于您的页面中，因此您不必再次附加它。

function updatelog() {
    $.getJSON("/static/_info",
    function(data) {
        $.each(data, function(key, item) {
            var i;
            for (i = 0; i < item.length; i++) {
                var value = item[i];
                var hashCode = value.hashCode();
                if(!$("body").find("#" + hashCode).length){
                    $("div")
                    .attr("id", hashCode)
                    .add('<p>' + value + '</p>')
                    .appendTo(document.body);
                }
            }
        });
    });
}
var interval = window.setInterval(updatelog, 2000);

您可以将此实现用于hashCode 函数。 Generate a Hash from string in Javascript/jQuery

String.prototype.hashCode = function() {
    var hash = 0, i, chr, len;
    if (this.length === 0) return hash;
    for (i = 0, len = this.length; i < len; i++) {
        chr   = this.charCodeAt(i);
        hash  = ((hash << 5) - hash) + chr;
        hash |= 0; // Convert to 32bit integer
    }
    return hash;
};