Добавление элементов HTML в данные JSON

Question

Ниже приведены мои данные JSON, проверенные с использованием JSONLint:

[{
"text": "Products",
"data": {},
"children": [{
    "text": "Fruit",
    "data": {
        "price": "",
        "quantity": "",
        "AddItem": "+",
        "RemoveItem": "&#215"
    },
    "children": [{
        "text": "Apple",
        "data": {
            "price": 0.1,
            "quantity": 20,
            "AddItem": "+",
            "RemoveItem": "&#215"
        }
    }, {
        "text": "Strawberry",
        "data": {
            "price": 0.15,
            "quantity": 32,
            "AddItem": "+",
            "RemoveItem": "& #215"
        }
    }],
    "state": {
        "opened": false
    }
}, {
    "text": "Vegetables",
    "data": {
        "price": "",
        "quantity": "",
        "AddItem": "&# 43;",
        "RemoveItem": "&#215"
    },
    "children": [{
        "text": "Aubergine",
        "data": {
            "price": 0.5,
            "quantity": 8,
            "AddItem": "+",
            "RemoveItem": "&#215"
        }
    }, {
        "text": "Cauliflower",
        "data": {
            "price": 0.45,
            "quantity": 18,
            "AddItem": "+",
            "RemoveItem": "&#215"
        }
    }, {
        "text": "Potato",
        "data": {
            "price": 0.2,
            "quantity": 38,
            "AddItem": "+",
            "RemoveItem": "&#215"
        }
    }]
}],
"state": {
    "opened": false
}
}]

То, что я ищу, чтобы преобразовать значение для ключей AddItem и RemoveItem в кнопки HTML.

Приведенный выше JSON будет использоваться для визуализации узлов в плагине jsTree.

Ссылка jsFiddle, где я буду использовать эти данные JSON. По сути, я хочу заменить знак " +" и " -" на кнопку для того же

У кого-нибудь есть обходной путь для этого?

Редактировать 1: Я читал в нескольких местах, что не рекомендуется добавлять элементы HTML непосредственно в ваши данные JSON, так как они могут использоваться в нескольких местах в вашем коде, и каждый раз он может иметь другой HTML. Если у кого-то есть лучший способ сделать это, это было бы здорово.

Answer 1

Я никогда не использовал плагин jsTree, и, возможно, есть лучший способ решить вашу проблему, но, похоже, это делает то, что вы ищете. Просто добавьте это в конец вашего кода.

$(document).on('click','.jstree-table-wrapper', function() {//insted of document i would used jtrees containing div
    $.each($('.jstree-table-cell span'),function(){
        if($(this).html()=='+'){      
            $(this).html('<button class="addBtn">+</button>')
        }else if($(this).html()=='×'){      
            $(this).html('<button class="removeBtn">x</button>')
        }
    });
});

$(document).on('click','.addBtn',function(){//insted of document i would used jtrees containing div
     var id = 'j1_'+$(this).parent().parent().attr('id').split('_')[2];
     demo_create(id);
     $('.jstree-table-wrapper').trigger('click');
});

$(document).on('click','.removeBtn',function(){//insted of document i would used jtrees containing div
     var id = 'j1_'+$(this).parent().parent().attr('id').split('_')[2];
     demo_delete(id);//you might need to work on your delete function
     $('.jstree-table-wrapper').trigger('click');
});