Добавление 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 plugin.

jsFiddle ссылка, где я буду использовать данные json. В принципе, я хочу, чтобы заменить мой + и - знак с кнопкой для того же

ли кто-нибудь имеет работу вокруг этого?

Edit 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'); 
});