Missing something from extracting data from Google Spreadsheet to HTML

Question

I am struggling to get data from my google spreadsheet into a HTML page. The heading shows up just fine but data are not there. I have published the spreadsheet publicly. I am not sure why I am not seeing any data. Anything feedback or assistance would be appreciated.

<h2>Construction and Infrastructure</h2>
<p>
<script type="text/javascript">// <![CDATA[
function importGSS(json) {

// Edit below //    
var headers = ["Program Name", "Description", "Status", "Timeline"];
var gsxdata = ["gsx$projectname.$t", "gsx$description.$t", "gsx$status.$t", "gsx$timeline.$t"];
// Edit above //

$('#dataList').empty();
var headerData = '';
var rows = '';
for (i = 0; i < headers.length; i++) {
    headerData += '<th>' + headers[i] + '</th>';
        for (j = 0; j < gsxdata.length; j++) {
            rows += '<tr>' + gsxdata[j] + '</tr>';
        }
}

$('#dataList').append('<table id="tableDataList"><thead><tr>' + headerData + '</tr></thead><tbody>' + rows + '</tbody></table>');

var d = new Date(json.feed.updated.$t);
$('#updated').append('Updated: ' + d);
}
// ]]></script>
</p>
<div id="dataList"></div>
<div id="updated" style="text-align: right;"></div>
<p>
<script src="http://spreadsheets.google.com/feeds/list/1o07oxTjuJSIbZbnlUPvxhid98vdK7PGnSr36nOybbJ8/1/public/values?alt=json-in-script&amp;callback=importGSS" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function () {
    var viewID = $("[id*='**']").attr('id');
    var goTo = document.getElementById(viewID);
    goTo.scrollIntoView(true);
});
// ]]></script>

Answer 1

i figured it out by add some codes - I did not use json.feed.entry in my codig and when I added that it works.

the updated code is followed -

<h2>Construction and Infrastructure</h2>
<p>
<script type="text/javascript">// <![CDATA[
function importGSS(json) {
    // Edit below //    
    var headers = ["Project Name", "Description", "Status", "Timeline"];
    var gsxdata = ["gsx$projectname", "gsx$description", "gsx$status", "gsx$timeline"];
    // Edit above //

    $('#dataList').empty();
    var headerData = '';
    var rows = '';
    for (i = 0; i < headers.length; i++) {
        headerData += '<th>' + headers[i] + '</th>';
    }

    for (i = 0; i < json.feed.entry.length; i++) {
        entry = json.feed.entry[i];
        rows += '<tr>';
        for (j = 0; j < gsxdata.length; j++) {
            if (entry.hasOwnProperty(gsxdata[j])) {
                gdata = entry[gsxdata[j]].$t;
                rows += '<td>' + gdata + '</td>';
            }
        }
        rows += '</tr>';
    }

    $('#dataList').append('<table id="tableDataList"><thead><tr>' + headerData + '</tr></thead><tbody>' + rows + '</tbody></table>');

    var d = new Date(json.feed.updated.$t);
    $('#updated').append('Updated: ' + d);
}
// ]]></script>
</p>
<div id="dataList"></div>
<div id="updated" style="text-align: right;"></div>
<p>
<script src="http://spreadsheets.google.com/feeds/list/1o07oxTjuJSIbZbnlUPvxhid98vdK7PGnSr36nOybbJ8/1/public/values?alt=json-in-script&amp;callback=importGSS" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function () {
    var viewID = $("[id*='**']").attr('id');
    var goTo = document.getElementById(viewID);
    goTo.scrollIntoView(true);
});
// ]]></script> 
</p>