{% extends "base" %}

{% block title %}Load json data in javascript tree{% endblock %}
{% block h1 %}Example 1 - load json data{% endblock %}

{% block previous_url %}../index.html{% endblock %}
{% block previous_title %}Documentation{% endblock %}

{% block next_url %}load_json_data_from_server.html{% endblock %}"
{% block next_title %}Example 2{% endblock %}

{% block contents %}
    <div id="tree1"></div>

    <p>
        In this example we load the data using the <strong>data</strong> option.
        As you can see, the data is an array of objects.
    </p>
    <ul>
        <li>The <strong>label</strong> property defines the label of the node.</li>
        <li>The <strong>children</strong> property is an array of nodes.
    </ul>

    <h3>html<h3>

<pre><code class="language-markup">&lt;div id="tree1"&gt;&lt;/div&gt;</code></pre>

    <h3>javascript</h3>

<pre><code class="language-javascript">var data = [
    {
        label: 'node1',
        children: [
            { label: 'child1' },
            { label: 'child2' }
        ]
    },
    {
        label: 'node2',
        children: [
            { label: 'child3' }
        ]
    }
];

$('#tree1').tree({
    data: data
});
</code></pre>

{% endblock %}

{% block script %}
    <script>
        $(function() {
            var data = [
                {
                    label: 'node1',
                    children: [
                        { label: 'child1' },
                        { label: 'child2' }
                    ]
                },
                {
                    label: 'node2',
                    children: [
                        { label: 'child3' }
                    ]
                }
            ];

            $('#tree1').tree({
                data: data
            });
        });
    </script>
{% endblock %}
