Как можно сделать форматирование и вывод JSON в таблице?

Question

[krosten92]

Ребят, приветствую! Появилась необходимость в ячейке q-table вывести данные в json формате. Я получаю ответ от сервера и этот ответ мне необходимо ввести в таблицу в отформатированном виде со всеми переносами. Сам ответ я в таблицу вывел, но получилась одна большая неразрывная строка. Хотелось бы это всё облагородить, то бишь показывать в ячейке форматированный вариант JSON. Как можно поступить в данном случае? Может есть какие-то готовые сниппеты для вывода форматированного json в таблицу?

Comments

[Aetae]

В простом случае - просто настраиваешь колонку как указал Rsa97:

{
    name: 'json',
    label: '...',
    field: '...',
    align: 'left',
    format: (json) => JSON.stringify(typeof json === 'string' ? JSON.parse(json) : json, null, 2),
    style: 'white-space: pre-line',
  },

В сложном случае, как описал Алексей Ярков - подключаешь соответствующий компонет и используешь слот:

<template #body-cell-json="props">
  <q-td :props="props">
    <json-viewer :value="props.value"/>
  </q-td>
</template>

Answer 1

[Алексей Ярков]

Rsa97 написал самый простой вариант. Если надо добавить какой-то UI типа сворачивания блоков кода, то попробуйте что-то типа https://www.npmjs.com/package/vue-json-viewer

Comments

[krosten92]

Ага, спасибо. То что было нужно - даже нашёл его версию под vue3, но прикрутить не удалось к проекту. Возникли трудности с подключением через CDN, юзать npm увы возможности не было. В итоге психаул. На бэке при получении данных оформил списками и вставил с помощью v-html.

Answer 2

[Rsa97]

const json = '{"test":{"a":1,"b":false,"c":"string"},"status":"ok"}';
const prettyJson = JSON.stringify(JSON.parse(json), null, 2);
console.log(prettyJson);
// '{
//   "test": {
//     "a": 1,
//     "b": false,
//     "c": "string"
//   },
//   "status": "ok"
// }'

Для вывода использовать стиль white-space: pre и, возможно, моноширинный шрифт.