how to display json data fetched using ajax in each tab

how to display json data fetched using ajax in each tab

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>

JavaScript

$(document).ready(function () {
            var data = { "City": [{ "name": "New York1", "alias": "NY1", "imgPath": "filePath/img1.jgp" }, { "name": "New York2", "alias": "NY2", "imgPath": "filePath/img2.jgp" }, { "name": "New York3", "alias": "NY3", "imgPath": "filePath/img3.jgp" }, { "name": "New York4", "alias": "NY4", "imgPath": "filePath/img4.jgp"}] };

            if (data.City.length > 0) {
                $('body').prepend('<div id="tabs1"><ul></ul></div>');

                $.each(data.City, function (i, entity) {
                    $('#tabs1 ul').append($('<li><a href="#tabs1-' + (i + 1) + '">' + entity.name + '</a></li>'));
                    $('#tabs1').append('<div id="tabs1-' + (i + 1) + '"><p>Image Path:' + entity.imgPath + '</p></div>');
                });

                $("#tabs1").tabs();
            }
        });