javascript - 神秘的空值添加到我的数组的开头

Question

我正在使用 Django 创建一个在线投票系统。我正在尝试按照候选人向用户显示的顺序将数据库中候选人的 ID 从客户端传回服务器端。

我正在使用 Django 的模板语言将数据添加到 <meta>标签如下:

{% for candidate in candidates %}
    <meta id="cand" data-id="{{candidate.id}}" data-order="{{forloop.counter}}">
{% endfor %}

我知道这是不好的做法，但我不知道该怎么做。

将值添加到数组时会出现问题。解决这个问题的脚本部分在这里:

var button = $("#send");

$(button).click(function() {

    var metatags = document.getElementsByTagName('meta');
    var cands = [];
    for (var i = 0; i < metatags.length; i++) {
        cands.push(metatags[i].dataset.id);
        // console.log(cands);
    };
    cands = JSON.stringify(cands);
    console.log(cands);

当我执行此操作时，控制台会显示一个包含所有候选 ID 的数组，但开头为空值。我最好的猜测为什么是<meta>是在页面呈现中以其他方式创建的(可能是我使用的 Bootstrap ？)，它被 document.getElementsByTagName('meta') 捕获.

避免空值的最佳方法是什么？我应该从数组中删除 null 还是应该以不同的方式收集标签？由于我是一个完全的新手，我该如何实现这些解决方案？

Answer 1

你应该对你的选择器更有选择性 :-) 为了只选择我们的标签而不是其他人注入(inject)的标签。

如果任何其他元标记不太可能使用 data-id，您可以根据它选择，或者 data-order 如果它提供更高的唯一性概率你的项目。作为最后的手段，您可以想出一个独特的数据属性。但我将使用 data-id 作为示例:

替换

var metatags = document.getElementsByTagName('meta');

与

var metatags = document.querySelectorAll('meta[data-id]');

这为您提供了一个额外的好处，即能够在集合上使用 .forEach() 来简化您的代码，因此:

    var cands = [];
    document.querySelectorAll('meta[data-id]')
        .forEach(m=>{cands.push(m.dataset.id); console.log(cands);});
    cands = JSON.stringify(cands);
    console.log(cands);

注意小的变化。它不存储输出，而是直接用于迭代。