I've been working on setting up a configuration page where users can reconcile unmatched data by choosing from a list of possible matches. The backend generates the list of items that need to be matched, and then a JS function is used to fetch the list of potential matches and populate the corresponding select element. Currently, I'm utilizing D3.js for the selection and updating process.
At this point, it seems like everything is being connected correctly through the .data() function, but only the last select option is getting populated with its choices.
Below is the JavaScript code responsible for fetching the JSON data and filling in the select elements. This code runs after the window has loaded:
function attach_options() {
opts = d3.selectAll("select[data-opt-table]")
opts.each(function(p,j) {
obj = d3.select(this)
opt_table = obj.attr('data-opt-table')
opt_field = obj.attr('data-opt-field')
opt_disp = obj.attr('data-opt-disp')
opt_lookup = obj.attr('data-opt-lookup')
d3.json("{% url 'get-opts' %}" + opt_table + '/' + opt_field + '/' + opt_disp + '/' + opt_lookup + '/').then(
function(data) {
options = obj.selectAll('option').data(data.opt_list)
options.join('option')
.attr('value', d => d.pk)
.text(d => d.disp_value)
}
)
})
}
Here is an example of what a JSON response looks like:
{
"opt_list": [
{
"pk": "DE-001",
"disp_value": "Kent"
},
{
"pk": "DE-003",
"disp_value": "New Castle"
},
{
"pk": "DE-005",
"disp_value": "Sussex"
}
]
}