Publish Google spreadsheets data on website

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

Create_new_spreadsheet

3. Create data as below

table

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..

publish1

5. Publish the spreadsheet as below

publish2

6. It will generate the public link for the spread sheet as below. Please copy to the any notepad

publish3

For example the link as like below and take the red highlighted key and paste as shown below

links

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

json

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

json2

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.

result

All the best .. Please comment below.

Read More