Django: виджет формы для редактирования JSON

    Формат представления данных в форме JSON встречается нередко. К примеру, одним из применений может быть обмен JSON данными при работе с API стороннего сервиса, а в других случаях JSON данные могут храниться внутри модели приложения. В некоторых случаях данные необходимо изменить и отправить обратно удалённому сервису, в других сохранить в модели.



    Если вспомнить о формах и виджетах форм в Django — мощных инструментах, которые упрощают работу. А затем обратиться к исходному коду и официальной документации мы увидим список из почти 20 готовых виджетов, которые доступны нам. Кроме официальных источников, существует перевод на русский.
    К сожалению, там не найти ничего готового, что облегчило бы работу с JSON данными в формах. Если обратиться к поисковым системам, можно найти несколько постов на stackoverflow и частных блогах, где предлагаются решения, которые будут рабочие для некоторых случаев. К сожалению, одни примеры перестают работать на данных со сложной вложенной структурой JSON, а другие требуют использование JavaScript для сереализации и обратного процесса.

    Я сделал попытку найти решение, которое:
    • во-первых, не потребует дополнительных элементов, как например использование JavaScript
    • во-вторых, сможет работать с вложенными сложными структурами JSON
    • в-третьих, позволит более наглядно и удобно редактировать JSON

    Решение было найдено в форме виджета для формы. Вот демонстрация того, как виджет строит форму из JSON и после сохранения обратно собирает в JSON:

    image

    Надеюсь на то, что оно кому-то, кроме меня, сможет облегчить жизнь. Возможно, кто-то сможет предложить улучшения и/или конструктивную критику.

    Решение и примеры выложены на Github
    • +16
    • 8,6k
    • 6
    Поделиться публикацией

    Похожие публикации

    Комментарии 6

      +1
      Спасибо! Как раз скоро понадобится работать с JSON в форме — возможно удастся приспособить Ваш виджет.

      > во-первых, не потребует дополнительных элементов, как например использование JavaScript

      Без JS тут всё равно никак. Ведь как-то надо добавлять/удалять элементы. Ну и для больших объёмов данных жизненно необходима возможность сворачивать блоки.

      А в данном виде виджет позволяет только изменить значения в существующем JSON.
        0
        Буду рад, если виджет поможет вам в работе. Да, безусловно вы правы, что в конечном варианте сейчас приложения преимущественно используют JavaScript. Я подумал, раз нет у меня чёткого понимания в этом вопросе, то лучше оставить выбор JavaScript решения конечному разработчику.

        Да, ключевая особенность виджета сейчас в том, чтобы постоить форму и изменить значения в более наглядной форме, чем предлагают существующие решения.
        0
        На картинке я не увидел элементы интерфейса по изменению самого дерева JSON (добавления полей, т.д.). Это присутствует в виджете, или можно только редактировать значения в узлах уже готового дерева?
          0
          Добавление полей и перетаскивание узлов сейчас не реализовано. Но надо будет над этим поработать.
          +2
          Ну, не знаю, удобнее ли это обычной TextArea с форматированием и подсветкой.
            0
            Как минимум, тогда нужна будет более жесткая проверка синтаксиса и подсказками, где ошибка.

          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

          Самое читаемое