get elements from board as JSON

[thijsd]

It would be nice to have a function to export the elements to JSON.
Using this it should be easier to send the elements to ajax for example.

[marcosrocha85]

This is nice. I had to keep jKanban data in a var to save on database. Having a function to export kanban to json will make that simpler.

[ronaklalwanii]

Can I look into it?

[marcosrocha85]

Can I look into it?

For sure. Pull requests are always welcome.

[marcosrocha85]

This is very tricky. We have two approaches according to my knowledge.
🚀 1. Create an array attribute and change it on addElement, addBoards, removeElement and removeBoard calls to keep it even with DOM.
or
🎉 2. Read jKanban DOM and output a JSON.

I would like to vote which you guys think it's better.

[CrashLaker]

i think approach 1. could have some potential inconsistency when the user could be frantically draging the boxes here and there.

therefore i consider approach 2 more trustworthy.

this could help

 methods: {
        renderJSON(){
            const obj = this.$refs.demo2
            let boards = []
            obj.querySelectorAll('.kanban-board').forEach(el => {
                let items = []
                el.querySelectorAll('.kanban-item').forEach(i => {
                    items.push({
                        title: i.innerHTML,
                    })
                })
                boards.push({
                    id: el.getAttribute('data-id'),
                    title: el.querySelector('.kanban-title-board').innerHTML,
                    items,
                })
            })
            return boards
        }
    },

[DamienBitrise]

I think this needs to be updated to return the name of the item not the HTML

methods: {
        renderJSON(){
            const obj = this.$refs.demo2
            let boards = []
            obj.querySelectorAll('.kanban-board').forEach(el => {
                let items = []
                el.querySelectorAll('.kanban-item').forEach(i => {
                    items.push({
                        title: i.childNodes[1].innerHTML,
                    })
                })
                boards.push({
                    id: el.getAttribute('data-id'),
                    title: el.querySelector('.kanban-title-board').innerHTML,
                    items,
                })
            })
            return boards
        }
    },

[luxiusmx]

I hope it helps, with this I rather get the id's since with that I can get everything else from the database

function renderJSON() {
    const obj = document.querySelector('#div_jkanban_id'); // EDIT YOUR DIV ID
    let boards = [];
    obj.querySelectorAll('.kanban-board').forEach(el => {
        let items = [];
        el.querySelectorAll('.kanban-item').forEach(i => {
            items.push({
                element_id: i.getAttribute('data-eid'),
            })
        })
        boards.push({
            board_id: el.getAttribute('data-id'),
            items,
        })
    })
    return JSON.stringify(boards);
}