I am trying to write this small bit of javascript so that it will drag in information off this json/xml file and display it to the user in normal text language. (was previously someone elses work, so lost in slight confusion)

I just want to know how to direct the data onto the page... The Url to the data in a json&/xml format is known and can be worked out using a certain format with the url link.


I have this in a library .js file:
Code:
findaport.API.getPortSummary2 = function(portId, callback){
    var request = findaport.API.URL  + 'port/' + portId + '/summary.json';

    findaport.API.sendRequest(request, callback, 'html');
};

and im trying to get it to display on this page when the key is entered and form submitted: (I can only get it displaying a working hyperlink to the json format file)
Code:
if(data.has_detail){
                        var $detailLink = $('<a href="/detail">Get detail</a>');

                        $detailLink.click(function(event){
                            event.preventDefault();

                            findaport.API.getPortSummary2(portId, function(data){
                                //Show detail
                                var $apikey = document.getElementById('apikey');
                                detailHeader = 
                                        /*'<a href="http://www.findaport.com/api/port/'+portId+'/summary.json?key='+$apikey.value+'">Get JSON summary</a>';
                                */
                                $header = $('<div id="header"></div>');
                                $($header).append(detailHeader);
                                $('#content').append($header);
                                $('#content').append(data);
                            })
                        });

                        $row = $('<div class="row"></div>');
                        $row.append($detailLink);

                        $('#content').append($row)
                    }

this is an example .json page used for the application:
Code:
{"html":"<div id=\"summary\" port_id=\"0\" class=\"port_summary\">\n   \n   <div class=\"PI\">\n      \n      <a name=\"tsa1\"></a>\n      \n      <div class=\"pdata\">\n         \n         <span class=\"pdatasection\">Max. Size:\u00a0</span>\n         \n         <span class=\"pdatasubsect\" title=\"Last updated 2012-09-19\">\n            \n            <span class=\"p\">LOA\u00a0250\u00a0m., depth\u00a011.0\u00a0m., no beam\u00a0restriction.</span>\n            \n         </span>\n         \n         <span class=\"pdatasubsect\" title=\"Last updated 2012-09-19\">\n            \n            <span class=\"pdatasubsecthdg\">Tankers:\u00a0</span>\n            \n            <span class=\"p\">60,000\u00a0d.w.t., LOA\u00a0210\u00a0m., no beam\u00a0restriction.</span>\n            \n         </span>\n         \n      </div>\n      \n      <div class=\"pdata\">\n         \n         <span class=\"pdatasection\">Fuel:\u00a0</span>\n         \n         <span class=\"pdatasubsect\" title=\"Last updated 2008-06-27\">\n            \n            <span class=\"p\">By barge or truck.</span>\n            \n         </span>\n         \n      </div>\n      \n      <div class=\"pdata\">\n         \n         <span class=\"pdatasection\">Airport:\u00a0</span>\n         \n         <span class=\"pdatasubsect\" title=\"Last updated 2012-04-12\">\n            \n            <span class=\"p\">Sonderborg Domestic, 25\u00a0km.</span>\n            \n         </span>\n         \n      </div>\n      \n      <div class=\"pdata\">\n         \n         <span class=\"pdatasection\">Repairs/Drydocks:\u00a0</span>\n         \n         <span class=\"pdatasubsect\" title=\"Last updated 2009-11-25\">\n            \n            <span class=\"p\">All types of deck and engine repair possible.</span>\n            \n         </span>\n         \n      </div>\n      \n      <div class=\"pdata\">\n         \n         <span class=\"pdatasection\">Medical:\u00a0</span>\n         \n         <span class=\"pdatasubsect\" title=\"Last updated 2005-01-18\">\n            \n            <span class=\"p\">Facilities available, notice required.</span>\n            \n         </span>\n         \n      </div>\n      \n   </div>\n   \n</div>"}
same data in xml format (easier to read)
Code:
<div id="summary" port_id="0">
<div id="s_maxsize">
<span class="s_hdg">Max. Size: </span>
<span class="p" alt="Last updated 2012-09-19" title="Last updated 2012-09-19">LOA 250 m., depth 11.0 m., no beam restriction.</span>
<span class="s_sub_hdg">Tankers: </span>
<span class="p" alt="Last updated 2012-09-19" title="Last updated 2012-09-19">60,000 d.w.t., LOA 210 m., no beam restriction.</span></div>
<div id="s_fuel">
<span class="s_hdg">Fuel: </span>
<span class="p" alt="Last updated 2008-06-27" title="Last updated 2008-06-27">By barge or truck.</span></div>
<div id="s_airport">
<span class="s_hdg">Airport: </span>
<span class="p" alt="Last updated 2012-04-12" title="Last updated 2012-04-12">Sonderborg Domestic, 25 km.</span></div>
<div id="s_drydocks">
<span class="s_hdg">Repairs/Drydocks: </span>
<span class="p" alt="Last updated 2009-11-25" title="Last updated 2009-11-25">All types of deck and engine repair possible.</span></div>
<div id="s_medical">
<span class="s_hdg">Medical: </span>
<span class="p" alt="Last updated 2005-01-18" title="Last updated 2005-01-18">Facilities available, notice required.</span></div></div>