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

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 循环中尝试了一个 while 条件，但这也不起作用。

我还研究了这是否可以使用映射或过滤器。但是，我并没有尝试制作新数组，所以这些似乎不是可行的选择。

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

在此先感谢您的帮助。

Answer 1

你可以尝试这样的事情（用 vanilla JS 编写）：

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