создать объект со свойствами, отражающими имя его входного поля и назначить его значение

Question

У меня есть приложение React с контролируемыми полями ввода , в настоящий момент у меня возникают проблемы при попытке построить объект из имени / пути поля ввода и присвоить ему значение.

Скажем, форма генерирует ввод:

<input
    type="text"
    name="field_5b55440b965b1[value][1][field_5b554428965b2]"
    placeholder=""
    value="foo"
>

ее имя: field_5b55440b965b1[value][1][field_5b554428965b2] со значением foo

как я могу построить объект из такого имени => значенияпара вроде:

{
    field_5b55440b965b1: {
        value: [
            field_5b554428965b2: '',
            field_5b554428965b2: 'foo',
        ]
    }
}

На данный момент у меня есть решение использовать пакет qs.Я строю объект примерно так:

$object = qs.parse(`${name}=${value}`, { arrayLimit: 0 });

В большинстве случаев он успешен: https://runkit.com/embed/pm2ha1inhj3o

Но он не работает, если в нем есть значение & (амперсанд): https://runkit.com/embed/qeczd27l5xr7

Теперь я ищу другое возможное решение или пакеты.Есть следующие пакеты:

https://www.npmjs.com/package/set-value - но он допускает только . (точка) путь

https://www.npmjs.com/package/form-serialize - но вам нужен DOM формы, а не одно поле ввода.

Надеюсь, кто-нибудь может помочь.

С уважением,

Answer 1

почему бы не использовать некоторое регулярное выражение для извлечения из имени всех уровней, а затем использовать цикл для просмотра списка для генерации объекта?

var levels = name.match(/regex/);
let $object = {}
let intermediate = $object
for(var i = 0; i < levels.length; i++) {
    intermediate[levels[i]] = (i === levels.length - 1) ? $value : {}
    intermediate = intermediate[levels[i]]
}

Извините за регулярное выражение, я недостаточно хорош, поэтому я предпочитаю позволить вам проверить его.