How to display data inside a div in html taken from json through javascript using ul li

Json file is

<?php

    $chapter_1 = array ('id' => 1, 'name' => 'SolarOn Elearning Demo Video.', 'total_sections' => 2,
    'sections' => array (array ('id' => 1, 'name' => 'This video explains SolarOn service offerings in brief.', 'video' => 'solaron.flv' ),
        array ('id' => 2, 'name' => 'section-2.', 'video' => "vid3.flv" ) ) );
    $chapter_2 = array ('id' => 2, 'name' => 'Introduction to Social.', 'total_sections' => 3,
    'sections' => array (array ('id' => 1, 'name' => 'section-1.', 'video' => 'vid5.flv'开发者_C百科 ),
        array ('id' => 2, 'name' => 'section-2.', 'video' => 'vid1.flv' ),
        array ('id' => 3, 'name' => 'section-3.', 'video' => 'vid2.flv' ) ) );

    $array_data = array ('chapters' => array ($chapter_1, $chapter_2 ));

    $json_data = json_encode( $array_data );

    print $json_data;    
?>

Now I have to show the all categories and section name like tree inside a div in html using java script.

I assume you are using Ajax for this. if you are, you can simply return the html list to javascript and use innerHTML to put the list inside a div. The catch here is that there is no need to return json since you can return html except in cases where you are getting the json from an external site.