我如何将数据绑定到html对象，条件是html数据集和对象键值是否使用javascript匹配？

Question

我正在尝试将数据绑定到svg映射。

但是，我用来创建地图的TopoJSON文件与数据之间存在一些不一致之处。最大的障碍是，TopoJSON文件中的某些属性值（在我的情况下是邮政编码）会重复。这使数组的长度不同，从而使得不可能使用简单的for循环。

这里是一个例子。

假设这是渲染的SVG地图，其中包含一些我从TopoJSON文件中提取并作为数据集添加到路径的键值：

<svg>
    <path data-key="1"></path>
    <path data-key="2"></path>
    <path data-key="2"></path>
    <path data-key="2"></path>
    <path data-key="3"></path>
    <path data-key="3"></path>
    <path data-key="4"></path>
    <path data-key="5"></path>
    <path data-key="6"></path>
    <path data-key="8"></path>
</svg>

这里是来自不同来源的数据对象的示例：

const data = [
    {
        key: 2,
        value: 30
    },
    {
        key: 4,
        value: 50
    },
    {
        key: 8,
        value: 75
    }
]

我想将对象值作为数据集条目添加到每个路径，但仅添加到具有与对象键匹配的数据集条目的路径。

我正在寻找的结果是：

<svg>
    <path data-key="1"></path>
    <path data-key="2" data-value:"30"></path>
    <path data-key="2" data-value:"30"></path>
    <path data-key="2" data-value:"30"></path>
    <path data-key="3"></path>
    <path data-key="3"></path>
    <path data-key="4" data-value:"50"></path>
    <path data-key="5"></path>
    <path data-key="6"></path>
    <path data-key="8" data-value="75"></path>
</svg>

因为路径和对象的节点列表是两个不同的长度，所以运行简单的for循环似乎不起作用。我还在for循环中尝试了一会儿条件，但是那也不起作用。

我还研究了使用映射或过滤器是否可行。但是，我并没有尝试创建一个新的数组，因此这些选项似乎并不可行。

有没有办法做到这一点？或者，也许更容易将数据对象添加到原始topoJSON作为其属性列表的一部分？

感谢您的帮助。

Answer 1

您可以尝试这样的方法（用香草JS编写）：

data.forEach(item => {
   const paths = document.querySelectorAll(`path[data-key="${item.key}"]`);
   [].forEach.call(paths, function(path) {
     path.dataset['value'] = item.value
   });
})