Hey.. do you want to publish the data from Google spreadsheet to on your web site. The below is the solution you have to follow step by step.
1. Open drive.google.com
2. Create a new spread sheet as below
3. Create data as below
4. Now, this sheet has to be published then it will be available for the public access. Click on the File > Publish to the web..
5. Publish the spreadsheet as below
6. It will generate the public link for the spread sheet as below. Please copy to the any notepad
For example the link as like below and take the red highlighted key and paste as shown below
For your reference and to help I am providing below that link
https://spreadsheets.google.com/feeds/list/[KEY]/od6/public/values?alt=json
7. Once you have ready the above link please open in browser, you can see the json return data as below
8. Copy the text showing on the browser and open the site : http://jsonviewer.stack.hu/ .
9. Paste on the text tab and click on the viewer , It will show JSON data clearly to us as shown below
10. Now we got the JSON data, this JSON data can be published on any website using below code.
<!DOCTYPE html>
<html>
<title>Google Spreadsheet test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var sheeturl = "https://spreadsheets.google.com/feeds/list/14Pu3pPz75B96TBdF8JXvxfYSWpNziNeYBRJEo_oMerA/od6/public/values?alt=json";
$.getJSON(sheeturl, function (data) {
var dt = data.feed.entry;
var tbl = "<table border='0'>";
$.each(dt, function (i) {
//alert(dt[i].gsx$name.$t);
tbl += "<tr>";
tbl += "<td>" + dt[i].gsx$name.$t + "</td>";
tbl += "<td>" + dt[i].gsx$phone.$t + "</td>";
tbl += "<td>" + dt[i].gsx$email.$t + "</td>";
tbl += "</tr>";
});
tbl += "</table>";
$("#content").html(tbl);
});
</script>
<body>
<div id="content">
Display items here
</div>
</body>
</html>
11. Open the page in browser and check the result.
12. The page will be displayed as below.
All the best .. Please comment below.
