如何根据 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
   });
})

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

How do I bind data to an html object conditioned on whether the html dataset and object key values are matching using javascript?

javascript

json

for-loop

topojson