Currently working on a Django framework project where I am defining a Python variable as a dictionary like this:
dict = {
('ABC', 'XYZ'): [
('a', 'A'),
('b', 'B'),
('c', 'C'),
....
]
}
and utilising this data in an HTML data-attribute during page rendering. The challenge arises when trying to access this data in JS, as JS only recognizes tuples as arrays. To loop through this object in JS and generate HTML code is the current objective. Attempting console.log(Object.entries(obj)) results in numerous arrays being generated.
In essence, the goal is represented by the following pseudo code:
function init(section) {
var test1 = [...create HTML code....]
return new Promise(function (resolve, reject) {
$(section).append(test1)
resolve()
}
$(document).ready(function () {
var section = $("#PageFilter")
var filters = $(section).data("filters")
for (const [key, value] of Object.entries(filters)) {
init(section).then(function () {
for (let x = 0; x < value.length; x++) {
var test2 = [...create some more HTML code...]
$('find_test1').append(test2)
}
}
}
})
UPDATE Below is an example of the stored data attribute within the DOM element:
<div
class="ms-auto py-4"
id="PageFilter"
data-filters="{('Region', 'cardinal'): [('EAST', 'EAST'), ('WEST', 'WEST')], ('State', 'state'): [('AL', 'AL'), ('AR', 'AR'), ('GA', 'GA'), ('KY', 'KY'), ('MS', 'MS'), ('NC', 'NC'), ....], ('Instatllation Type', 'installation_type'): [('BUILDING', 'Building'), ('EXTERNAL SERVICE', 'External Service'), ...]}"
></div>