Output as JSON - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: angular tree, bootstrap tree, javascript tree, jquery tree, jqwidgets tree, jqxtree, parent id, parentId

This topic contains 8 replies, has 2 voices, and was last updated by Hristo 9 years, 10 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Output as JSON Posts

June 25, 2016 at 12:59 pm Output as JSON #85418

mohammad

Participant

hi,

How to get entire tree(id, text, parentid) as a JSON format on a click of a button?

June 25, 2016 at 2:57 pm Output as JSON #85419

mohammad

Participant

hi,

I’m not able to get all the elements as JSON i.e(parentid and whether its a Group/Leaf)?


<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
    <title id='Description'>In this demo the jqxTree is built from JSON data.</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <link type="text/css" rel="stylesheet" href="jqwidgets/styles/jqx.light.css" />
    <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="scripts/demos.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
    
            <script type="text/javascript">
            $(document).ready(function () {
            	
                var data = [
                            { "id": "2",
                                "parentid": "1",
                                "text": "Hot Chocolate",
                                "value": "$2.3"
                            }, {
                                "id": "3",
                                "parentid": "1",
                                "text": "Peppermint Hot Chocolate",
                                "value": "$2.3"
                            }, {
                                "id": "4",
                                "parentid": "1",
                                "text": "Salted Caramel Hot Chocolate",
                                "value": "$2.3"
                            }, {
                                "id": "5",
                                "parentid": "1",
                                "text": "White Hot Chocolate",
                                "value": "$2.3"
                            }, {
                                "text": "Chocolate Beverage",
                                "id": "1",
                                "parentid": "-1",
                                "value": "$2.3"
                        }, {
                                "id": "6",
                                "text": "Espresso Beverage",
                                "parentid": "-1",
                                "value": "$2.3"
                            }, {
                                "id": "7",
                                "parentid": "6",
                                "text": "Caffe Americano",
                                "value": "$2.3"
                                }, {
                                "id": "8",
                                "text": "Caffe Latte",
                                "parentid": "6",
                                "value": "$2.3"
                            }, {
                                "id": "9",
                                "text": "Caffe Mocha",
                                "parentid": "6",
                                "value": "$2.3"
                                }, {
                                "id": "10",
                                "text": "Cappuccino",
                                "parentid": "6",
                                "value": "$2.3"
                            }, {
                                "id": "11",
                                "text": "Pumpkin Spice Latte",
                                "parentid": "6",
                                "value": "$2.3"
                                }, {
                                "id": "12",
                                "text": "Frappuccino",
                                "parentid": "-1"
                            }, {
                                "id": "13",
                                "text": "Caffe Vanilla Frappuccino",
                                "parentid": "12",
                                "value": "$2.3"
                                }, {
                                "id": "15",
                                "text": "450 calories",
                                "parentid": "13",
                                "value": "$2.3"
                            }, {
                                "id": "16",
                                "text": "16g fat",
                                "parentid": "13",
                                "value": "$2.3"
                                }, {
                                "id": "17",
                                "text": "13g protein",
                                "parentid": "13",
                                "value": "$2.3"
                            }, {
                                "id": "14",
                                "text": "Caffe Vanilla Frappuccino Light",
                                "parentid": "12",
                                "value": "$2.3"
                                }]
                            var source =
                            {
                                datatype: "json",
                                datafields: [
                                    { name: 'id' },
                                    { name: 'parentid' },
                                    { name: 'text' },
                                    { name: 'value' }
                                ],
                                id: 'id',
                                localdata: data
                            };
                            var dataAdapter = new $.jqx.dataAdapter(source);
                            dataAdapter.dataBind();
                            var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);

                $('#jqxWidget').jqxTree({ source: records, width: '300px',height: '200px',theme:'light'});
                $("#Test").jqxButton({theme:'light', template: "info",width: '150', height: '35px' });
        	  	$( "#Test" ).click(function() {
        	         var items = $('#jqxWidget').jqxTree('getItems');
        	         for (var i = 0; i < items.length; i++) {
        	             var item = items[i];
        	             alert(JSON.stringify({id: item.id, text: item.label, pid: item.parentid}));
        	         }
        	 	});
                
                
            });
           
       
        </script>
    
    
</head>
<body class='default'>
        <div id='jqxWidget'></div>
<br/>
        <input type="button" value="Get JSON" id="Test" />
</body>
</html>

Thanks in advance…

Regards,
MZH

June 27, 2016 at 7:55 am Output as JSON #85432

Hristo

Participant

Hello mohammad,

Please try to set pid: item.parentId instead of pid: item.parentid.
Thank you for the interest to our widget.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

June 27, 2016 at 9:13 am Output as JSON #85436

mohammad

Participant

Thanks Hristo for your help…Do we have any property/Method to find out its a Group or a Leaf?

June 28, 2016 at 6:10 am Output as JSON #85459

Hristo

Participant

Hello mohammad,

Please, take a look this example:
http://jsfiddle.net/qmmj31eo/

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

June 28, 2016 at 6:52 am Output as JSON #85463

mohammad

Participant

Dear Hristo,

It shows “true” for all nodes though it has child or not, Please check…

Thanks in advance…

Regards,
Mohammad

June 29, 2016 at 9:52 am Output as JSON #85487

Hristo

Participant

Hello mohammad,

Please, take a look this example:
http://jsfiddle.net/he367a7h/

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

June 29, 2016 at 2:54 pm Output as JSON #85492

mohammad

Participant

hi Hristo,

Still its showing wrong result! Please check once before giving the solution.

June 30, 2016 at 10:05 am Output as JSON #85508

Hristo

Participant

Hello mohammad,

Sorry for this misunderstanding.
You could try to use getItems – receive an array with all items and each has ‘parentElement’ member and another details for this.

label – gets item’s label.
value – gets the item’s value.
disabled – gets whether the item is enabled/disabled.
checked – gets whether the item is checked/unchecked.
element – gets the item’s LI tag.
parentElement – gets the item’s parent LI tag.

(if the result of ‘parentElement’ is null – this mean it is a root, otherwise it has children)

isExpanded – gets whether the item is expanded or collapsed.
selected – gets whether the item is selected or not.

Also could use ‘hasItems’ member to check is this a leaf or not.
You could find out more details in our API Documentation.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.