how to insert the dyanamic data into json using php

Question

i am actully developing the checkbox tree where i need a checkbox dyanamic value.. this is my code. i have json formatted static data now i need to convert it into dyanamic data which must be fetch from mysql database. i have tried all the thing but nothing worked for me so please help me to solve my problem

 <!DOCTYPE html>
    <html>
    <head>

    </head>
    <body>

            <a class="offline-button" href="../index.html">Back</a>

        <div id="example" class="k-content">

        <div class="container">
            <div class="treeview-back ">
                <div id="treeview"></div>
            </div>
        </div>  

        <div id="result">No nodes checked.</div>

     <?php  $mydata=mysql_query("select id,item_name,parent,menu_type from epic_master_menu ");  
            while($myfetch=mysql_fetch_array($mydata)) {
                        print_r($myfetch); 
            }
                ?>

        <script>
            $("#treeview").kendoTreeView({
                checkboxes: {
                    checkChildren: true
                },

                dataSource: [{ 

                    id:1, text: "<?php echo $myfetch['item_name']; ?>", expanded: true, spriteCssClass: "rootfolder", items: [
                        { 
                            id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
                                { id: 3, text: "about.html", spriteCssClass: "html" },
                                { id: 4, text: "index.html", spriteCssClass: "html" },
                                { id: 5, text: "logo.png", spriteCssClass: "image" }
                            ]
                        },
                        {
                            id: 6, text: "New Web Site", expanded: true, spriteCssClass: "folder", items: [
                                { id: 7, text: "mockup.jpg", spriteCssClass: "image" },
                                { id: 8, text: "Research.pdf", spriteCssClass: "pdf" },
                            ]
                        },
                        {
                            id: 9, text: "Reports", expanded: true, spriteCssClass: "folder", items: [
                                { id: 10, text: "February.pdf", spriteCssClass: "pdf" },
                                { id: 11, text: "March.pdf", spriteCssClass: "pdf" },
                                { id: 12, text: "April.pdf", spriteCssClass: "pdf" }
                            ]
                        }
                    ]
                }] 
            });

            // function that gathers IDs of checked nodes
            function checkedNodeIds(nodes, checkedNodes) {
                for (var i = 0; i < nodes.length; i++) {
                    if (nodes[i].checked) {
                        checkedNodes.push(nodes[i].id);
                    }

                    if (nodes[i].hasChildren) {
                        checkedNodeIds(nodes[i].children.view(), checkedNodes);
                    }
                }
            }

            // show checked node IDs on datasource change
            $("#treeview").data("kendoTreeView").dataSource.bind("change", function() {
                var checkedNodes = [],
                    treeView = $("#treeview").data("kendoTreeView"),
                    message;

                checkedNodeIds(treeView.dataSource.view(), checkedNodes);

                if (checkedNodes.length > 0) {
                    message = "IDs of checked nodes: " + checkedNodes.join(",");
                } else {
                    message = "No nodes checked.";
                }

                $("#result").html(message);
            });
        </script>

        <style scoped>
            #treeview .k-sprite {
                background-image: url("../../content/web/treeview/coloricons-sprite.png");
            }

            .rootfolder { background-position: 0 0; }
            .folder     { background-position: 0 -16px; }
            .pdf        { background-position: 0 -32px; }
            .html       { background-position: 0 -48px; }
            .image      { background-position: 0 -64px; }

            .treeview-back
            {
                float: left;
                margin: 0 0 2em;
                padding: 20px;
                -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.45), inset 0 0 30px rgba(0,0,0,0.07);
                -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.45), inset 0 0 30px rgba(0,0,0,0.07);
                box-shadow: 0 1px 2px rgba(0,0,0,0.45), inner 0 0 30px rgba(0,0,0,0.07);
                -webkit-border-radius: 8px;
                -moz-border-radius: 8px;
                border-radius: 8px;
            }

            .container
            {
                margin: 0 30px;
                float: left;
                width: 220px;
            }

            #result
            {
                float: left;
                padding: 10px;
                -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.45), inset 0 0 30px rgba(0,0,0,0.07);
                -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.45), inset 0 0 30px rgba(0,0,0,0.07);
                box-shadow: 0 1px 2px rgba(0,0,0,0.45), inner 0 0 30px rgba(0,0,0,0.07);
                -webkit-border-radius: 8px;
                -moz-border-radius: 8px;
                border-radius: 8px;
            }
        </style>
    </div>



    </body>
    </html>

no .. actully id, item_name , menu_type and parent columns from db must be dyanamic — Sachin
– Sachin, Commented Feb 24, 2014 at 6:31
or can i convert the my dynamic data into this json format.. — Sachin
– Sachin, Commented Feb 24, 2014 at 6:32

Arek S · Accepted Answer · 2014-02-24 06:35:01Z

2

First build php array

$data = array(
    id              => 1, 
    text            => 'item_name', 
    expanded        =>  true, 
    spriteCssClass  => "rootfolder", 
    items           =>  array(
        array(
            id              => 2, 
            text            =>  "Kendo UI Project", 
            expanded        =>  true, 
            spriteCssClass  =>  "folder", 
            items           =>  array(
                    array( id =>  3, text =>  "about.html", spriteCssClass =>  "html" ),
                    array( id =>  4, text =>  "index.html", spriteCssClass =>  "html" ),
                    array( id =>  5, text =>  "logo.png", spriteCssClass =>  "image" )
            )
        ),
        array(...),
    )
)

Next encode it to json

echo json_encode($data);

answered Feb 24, 2014 at 6:35

Arek S

4,7794 gold badges27 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sachin Over a year ago

yeah thats really an awasome trick thank you...but now here in array you have written id =>1 , text =>'item_name'.. so this 1 or item_namey value must be fetch from database becouse i have more data and i need it into an array

Arek S Over a year ago

yes, you fetch data from DB and then create a php array from the results. what is you sql query to fetch the data?

Sachin Over a year ago

$mydata=mysql_query("select id,item_name,parent,menu_type from epic_master_menu "); this is my query first i need to fetch db and then i need to identify who is parent and who is child like this i need create the array.. thank you

Collectives™ on Stack Overflow

how to insert the dyanamic data into json using php

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related