Selection of checkboxes should based on values instead of order in DOM about form-data-json HOT 7 CLOSED

Completely understand, thanks for your time and quick responses

I've come up with a hacky workaround for now https://jsfiddle.net/yusafme/vuj3kth5/18/ !!!

let form = document.querySelector('form');

function fromJson(data) {
  FormDataJson.fromJson(form, data);
  checkBoxes(data, '');
}

function checkBoxes(data, nameAttr = '') {
  const isStringArray = Array.isArray(data) && data.every((str) => typeof str === 'string');
  if (isStringArray) {
    if (!form.querySelectorAll(`[name="${nameAttr}[]"]`).length) {
      return;
    }
    for (let i = 0, iLen = data.length; i < iLen; i++) {
      const checkbox = form.querySelector(`[name="${nameAttr}[]"][value="${data[i]}"]`);
      if (checkbox) {
        checkbox.checked = true;
      }
    }
    return;
  }

  for (let key in data) {
    const newNameAttr = nameAttr === '' ? key : nameAttr + `[${key}]`;
    if (data[key] && typeof data[key] === 'object') {
      checkBoxes(data[key], newNameAttr);
    }
  }
}

fromJson({
  communication: {
    preference: ['email', 'letter']
  }
});

from form-data-json.

Thanks for your report. I think this is almost impossible to fix for how the internals currently work, without breaking any other working edge cases.

Undefined input names (with an implicit key from []) are tricky. To make this working, the internal recursion must be totally reworked, as it's currently unclear what name matches the exact values. It would require a separate register with all the checkbox values in each name level, then checking that. It gets even more complicated when somebody mixes named and implicit keys.

I don't tend to touch this right now.

If you think the other way, uniquely named input names with a proper object instead of array values, example communication[preference][sms] and {communication:{ preference:[{"sms": "sms"}} it will work without problems.

from form-data-json.

BTW thank you soo much for this project, really very grateful, I'm using it in my own project which hopefully I'll share with you when complete.

I tried going through the internals, but honestly I got lost very quickly !!!

I have done a few workarounds within my project already, but was really struggling with this issue

Although I may have thought of another workaround just now!!!, something along the lines

form.querySelectorAll('[name="communication[preference][]"][value="letter"]').checked = true

Would it be possible within the internals if the key is [] to iterate over the array of values and check the checkboxes like above?

from form-data-json.

Unfortunately no. The inputs are traversed in a tree manner, depending on the options given. There is no deeper selector use at all. Basically its just traversing the name-tree and traversing the given object-tree and comparing the same levels and values.

Keeping track of which tree level you are is the hard part and not easy to change in this project without breaking anything.

And as you see in your example, the trees are not equal, so its not finding it.

It's sadly just a case that don't work right now. I understand your thing, but don't have time and muse to touch it now just because i know how hard it will be to fix and not breaking anything else :)

from form-data-json.

I was curious about a fix... And tried something. Maybe give it a shot from source of current main?

59bbdac

from form-data-json.

Fantastic, working like a charm!

Thanks soo much you've been a great help :)

from form-data-json.

Alright. Released with https://github.com/brainfoolong/form-data-json/releases/tag/2.2.1

from form-data-json.