Сгенерировать форму из JSON?

Question

[Aleksandr]

Пока не совсем понимаю, можно ли сделать вообще такое?
Есть большая форма, которая состоит из input, select, switch

Клиент хочет, чтобы наличие полей определялось JSON-ом. И при этом каждые select-ы отправляли отдельные запросы.

Я не совсем понимаю, как это можно реализовать.

То есть мне приходит запрос, типа

"fields": {
        "autombile": {
            "brand": {
                "label": "brand",
                "name": "brand",
                "dependence": "",
                "type": "select"
                "active": true
            }
            .
            .
            .
            "name": {
                "label": "name",
                "name": "name",
                "dependence": "",
                "type": "input"
                "active": true
            },
            "age": {
                "label": "age",
                "name": "age",
                "dependence": "",
                "type": "input"
                "active": true
            },
            "switch": {
                "label": "switch",
                "name": "switch",
                "dependence": "",
                "type": "input"
                "active": true
            }
        }
}

Там выводится допустим 10 select-элементов, когда я открываю какой-то из этих элементов, он должен отправить свой запрос и получить ответ для этого самого select, правильно ли это вообще?
И если да, то каким образом можно подобное реализовать? Если учитывать, что там может быть и input type number/text/radio и select

Answer 1

[Максим Тимофеев]

Тут многое зависит от архитектуры и api, но кроме "fields" вы же можете получать "url".

"brand": {
                "label": "brand",
                "name": "brand",
                "dependence": "",
                "type": "select"
                "active": true,
                'items' => '/url/to/items/json?id=brand'
            }

Думаю будет правильно проверить items на наличие объекта, что бы не кидать запрос, если уже получены данные. Как-то так.

Comments

[Aleksandr]

поля, которые я вывел выше - это поля от заказчика - иначе быть не может.

[Максим Тимофеев]

Aleksandr,

каждые select-ы отправляли отдельные запросы

куда? На один и тот же урл?

[Aleksandr]

Максим Тимофеев, нет

[Максим Тимофеев]

Aleksandr, и как формируется url? Точнее в чем именно проблема Ваша. Я не совсем понимаю. Если все есть, что не понятно?

[Aleksandr]

Максим Тимофеев, смотрите
Вот я захожу на страницу и отправляю запрос, в ответ получаю этот самый JSON

"label": "switch",
"name": "switch",
"dependence": "",
"type": "input"
"active": true

ок, поля сгенерировал - форма есть. а как теперь пли использовании отдельных элементов этих форм, отправлять запрос в нужную таблицу? Как например для сгенерированных элементов добавить методы?

[Максим Тимофеев]

Aleksandr, какие методы?

[Aleksandr]

Максим Тимофеев, допустим я хочу повесить

@change="changeValue"

methods: {
changeValue() {
console.log('test')
}
}

а для каждого элемента формы может быть свой метод

[Aleksandr]

Максим Тимофеев,
Максим Тимофеев, допустим я хочу повесить

@change="changeValue"

methods: {
changeValue() {
console.log('test')
}
}

а для каждого элемента формы может быть свой метод

[Максим Тимофеев]

Aleksandr, а не проще иметь 1 метод для всех элементов? Ну да хрен с ним, что мешает Вам это сделать?

Answer 2

[Алексей Шашенков]

Не вижу сложности. Написать все на разных компонентах, для каждого элемента списка
https://jsfiddle.net/825x4bj3/