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 函数。从 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;
};