javascript - 根据json更新html

Question

我有一个包含实时比赛的 JSON 脚本。这些变化每 5 分钟一次。例如，更改可以是键 live_in 或 Score。除此之外，匹配项也会被删除并添加到 JSON 中。我想随时更新我的​​ html 输出，我怎样才能以最好的方式做到这一点？到目前为止，出于测试目的，我已将更新速度设置为 5 秒。到目前为止，我已尝试将 divs id 设置为等于 match_id，从而更新

    $('div#match-date-id-' + match['match_id']).html('test');

不过好像没有更新。我怎样才能以最好的方式做到这一点？我创建了一个 plnkr，它使您能够使用 json 片段下载它，可以对其进行编辑以进行检查。

plnkr.co/edit/eQCShhW01OG5jU4VLx04?p=预览

Answer 1

我之前的错误:-) 现在我已经做了更彻底的测试并更新了 plunker code 。我在测试中发现:过滤器试图使用未定义值(match.id)，过滤器也试图比较来自不同数据类型的值(字符串与整数)；所以它没有按预期工作:

原文:

   match = match.filter(
      function(match) {
        return match.id > lastId;
   });

更正的代码:

    match = match.filter(
        function(match) {
          return parseInt(match.match_id) > lastId;
     });

上面的 match_id 表示 JSON 文件中的字符串数据类型，因此我必须在比较之前将其转换为整数。有关 JSON 的更多信息 data-types 。按照旧的过滤器功能，没有匹配项通过比较测试。

同样出于测试目的，我注释掉了以下行:

        if (match.match_id > lastLoadedMatch) {
           //lastLoadedMatch = match.match_id
        }

因为在相同测试数据的第二轮更新中，没有数据通过该条件。

此外，我认为您还需要将 match_id 转换为 Integer ；就像下面这样:

        var matchId = parseInt(match.match_id)
        if ( matchId > lastLoadedMatch) {
           lastLoadedMatch = match.match_id
        }

我希望你觉得它有用:-) + 注意我为这些更新添加了时间戳；因此可以清楚地看到，现在每 5 秒更新一次。