Как связать данные с объектом html при условии, что значения набора данных html и ключа объекта совпадают с использованием javascript? - PullRequest
Новая
       64

Как связать данные с объектом html при условии, что значения набора данных html и ключа объекта совпадают с использованием javascript?

0 голосов
/ 01 мая 2020

Я пытаюсь привязать данные к карте svg.

Однако есть некоторые несоответствия между файлом Topo JSON, который я использовал для создания карты, и данными. Самым большим препятствием является то, что некоторые значения свойств в файле Topo JSON (в моем случае это почтовые индексы) повторяются. Это делает длины массивов разными и, таким образом, делает невозможным использование простого для l oop.

Вот пример.

Скажем, это отрисованная карта SVG с некоторыми значениями ключей, которые я вытащил из файла Topo JSON и добавлен к путям в виде набора данных: 

<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>

Поскольку список узлов для путей и объекта имеет две разные длины, выполнение простого для l oop не кажется работать. Я также пробовал некоторое время в моем состоянии для l oop, но это тоже не сработало.

Я также исследовал, возможно ли это с помощью картирования или фильтра. Тем не менее, я не пытаюсь создать новый массив, так что это не похоже на жизнеспособные варианты.

Есть ли способ сделать это sh? Или, может быть, проще добавить мой объект данных в мой оригинальный topo JSON как часть его списка свойств?

Заранее спасибо за помощь.

1 Ответ

2 голосов
/ 01 мая 2020

Вы можете попробовать что-то вроде этого (написано ванили JS): 

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