有没有办法从json实时读取数据到html?

时间:2017-06-12 08:04:40

标签: jquery html json knockout.js telegram

对于学校项目,我实时将电报消息写入JSON文件。现在我想在JSON中出现新消息时更新我的​​HTML。我的HTML与JQuery / Knockout.js一起使用。这样做的最佳方式是什么?

$(document).ready(function(){
var viewModel = function() {
   console.log('test');
   $.getJSON( '/apps/telegram/getmessages', function( data ) {
   //console.log(data["messages"]);
   var jsondata = data["messages"];
   console.log(jsondata);
   for(index = 0; index<jsondata.length; ++ index){
    console.log(jsondata[index]);
    var message = jsondata[index]["message"];
    var firstname = jsondata[index]["first_name"];
    console.log(message);
    $('#messages').append('<p>' + message + '</p>');
    }
})
.error(function(error){
  console.log(error);

    });
}

ko.applyBindings(viewModel);
})

1 个答案:

答案 0 :(得分:1)

要近实时更新,利用已有代码的最简单方法是设置代码向服务器请求更新数据的时间间隔。这将以您指定的间隔重复运行相同的代码:

setInterval(function() { 
  console.log('test');
  $.getJSON( '/apps/telegram/getmessages', function( data ) {
    //console.log(data["messages"]);
    var jsondata = data["messages"];
    console.log(jsondata);

    for(index = 0; index<jsondata.length; ++ index){
      console.log(jsondata[index]);
      var message = jsondata[index]["message"];
      var firstname = jsondata[index]["first_name"];
      console.log(message);
      $('#messages').append('<p>' + message + '</p>');
    }
  })
  .error(function(error){
    console.log(error);
  });      
},
1000); //1000 milliseconds (1 second). Change the value to whatever you need.

有关详细信息,请参阅https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval