Hinzufügen von HTML-Elementen in den JSON-Daten

Question

Folgende ist meine JSON Daten JSONLint validiert mit:

[{ 
"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 
} 
}] 

Was ich suche ist, den Wert für die Schlüssel AddItem und RemoveItem-HTML-Schaltflächen zu konvertieren.

Der obige JSON wird zum Rendern von Knoten in einem jsTree plugin verwendet.

jsFiddle Link, wo ich diese JSON-Daten verwenden werde. Grundsätzlich möchte ich meine + und ersetzen - Zeichen mit einer Taste für die gleiche

Hat jemand eine Behelfslösung für dieses hat?

Bearbeiten 1: Ich habe an einigen Stellen gelesen, dass das Hinzufügen von HTML-Elementen direkt in Ihren JSON-Daten nicht ratsam ist, da es an mehreren Stellen in Ihrem Code verwendet werden kann und jedes Mal einen anderen HTML-Code haben kann dafür. Wenn jemand einen besseren Weg hat, wäre das großartig.

Answer 1

Ich habe noch nie das jsTree-Plugin verwendet und es gibt wahrscheinlich einen besseren Weg, um Ihr Problem zu lösen, aber dies scheint zu tun, was ich denke, dass Sie suchen. Füge das einfach an das Ende deines Codes.

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