jQuery:仅显示新的JSON数据,使用自己的段落标记

时间:2016-04-23 17:57:52

标签: javascript jquery json

仅显示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编码器,而且我已准备好脱掉头发了。提前谢谢。

2 个答案:

答案 0 :(得分:1)

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

&#13;
&#13;
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>');
  }
})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Hello world,</p>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您可以从每个列表项生成哈希,并将其用作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;
};