Adding HTML elements in the JSON data

Question

Following is my JSON Data validated using JSONLint:

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

What I am looking for is to convert the value for the keys AddItem and RemoveItem to HTML buttons.

The above JSON will be used to render nodes in a jsTree plugin.

jsFiddle link where I will be using this json data. Basically, I want to replace my + and - sign with a button for the same

Does anyone has a work-around for this ?

Edit 1: I have read at a few places that adding HTML elements directly in your JSON data is not advisable as it can be used at a number of places in your code and each time it may have a different HTML for it. If someone has a better way to do it, that would be great.

[This might be helpful, though it uses right clicks instead of buttons.](http://stackoverflow.com/questions/31715584/jstree-delete-node-is-not-deleting) I think that if you could somehow add a class attribute or something, you could use jQuery's onClick event. — meepzh, Jun 27 '16 at 16:51
What do you want to add when the add button is clicked just an item or a folder, and the same for the remove button? — Hozeis, Jun 27 '16 at 16:59
I would be adding a child node **onclick** of the add button and remove the "parent node with all child nodes" or "on;y child node" or "only parent node" **onclick** of the remove button. — Yash Saraiya, Jun 27 '16 at 17:01
@meepzh I can't use the contextmenu plugin as the contextmenu does not open on devices. I have already explored this option and decided to go against it. — Yash Saraiya, Jun 27 '16 at 17:03
You can try add the code html in your json add class for get event on click https://jsfiddle.net/x9wd6k3x/14/ — CMedina, Jun 27 '16 at 17:03
@CMedina How do I call a function for this button then ? I have a function in the jsfiddle link named demo_create(); which needs to be called on the add button click. Basically whats happening using the contextmenu of jstree plugin, I want that to happen on these button click — Yash Saraiya, Jun 27 '16 at 17:06
You can add listenner to buttons for example: `$(document).on("click", ".remove", function(){ alert('remove clicked');});` and call function to add or remove https://jsfiddle.net/x9wd6k3x/15/ — CMedina, Jun 27 '16 at 17:24
Its working for you?? You want add or remove from buttons?? https://jsfiddle.net/x9wd6k3x/16/ — CMedina, Jun 27 '16 at 17:43
Sorry for a late reply. Your solution is working absolutely fine. Could you please post your solution as an answer so that I can accept it ? — Yash Saraiya, Jun 28 '16 at 05:02

Hozeis · Accepted Answer · 2016-06-28T11:13:34.363

2

I have never used the jsTree plugin and there is probably a better way to solve your problem, but this seems to do what i think your looking for. Just add this to the end of your code.

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

edited Jun 28 '16 at 11:13

answered Jun 27 '16 at 17:49

Hozeis

1,542
15
36

Your solution is working absolutely fine and also without having to include HTML in JSON. However, I would like to know the better solution that you are talking about as well – Yash Saraiya Jun 28 '16 at 05:24
1

I just assumed that maybe there is a jsTree function that would help to do what you are asking. Not that there is anything wrong with using my solution. – Hozeis Jun 28 '16 at 11:11
Ok. Thanks for this amazing piece of work. Can I replace buttons with icons and then have a click event for those icons ? – Yash Saraiya Jun 28 '16 at 11:54
Yeah or you could put the icon inside the button `$(this).html('')` – Hozeis Jun 28 '16 at 12:09
That would be a great idea.. but then, I guess i will have to make the button transparent so that only image is visble. Grey background of button won't look great. – Yash Saraiya Jun 28 '16 at 12:22
1

use css to change the background color of the button. http://stackoverflow.com/questions/5628507/background-color-on-input-type-button-hover-state-sticks-in-ie – Hozeis Jun 28 '16 at 13:54

Adding HTML elements in the JSON data

1 Answers1