javascript - 如何根据 html 数据集和对象键值是否使用 javascript 匹配将数据绑定到 html 对象?
问题描述
我正在尝试将数据绑定到 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 中可能更容易?
在此先感谢您的帮助。
解决方案
您可以尝试这样的事情(用 vanilla JS 编写):
data.forEach(item => {
const paths = document.querySelectorAll(`path[data-key="${item.key}"]`);
[].forEach.call(paths, function(path) {
path.dataset['value'] = item.value
});
})
推荐阅读
- javascript - 从 json 数据创建时间线图
- c - 将数组从一个函数正确复制到另一个函数
- javascript - 为引导程序 4.3.1 查找/生成 npmjs 完整性
- php - foreach 循环中的项目在某种程度上不是唯一的
- jquery - jQuery Ui Draggable 不适用于溢出表
- php - Doctrine 2 ArrayCollection - 如何查找和修改特定元素
- typescript - 打字稿将混合数组过滤为一种类型
- sql - 如何从当前行和以前的行中获取唯一项的总和,但忽略重复项 Oracle SQL
- javascript - 为什么当我输入匹配的数组编号时,它们与数组不匹配
- python - docopt 可以生成一个不依赖于 docopt 的参数解析类吗?