I have someone who gathered a bunch of tweets for their research using Martin’s TAGS aggregator. She wanted to show all the avatars.
Once I published the spreadsheet, here’s all the javascript needed to make that happen. It’s lightly annotated for your reading pleasure and the functioning codepen example is included below.
var spreadsheetID = "11Dhxbt5YbrKJN9IUxop-kQ73oqI6oefF8KTDcLuAl04"; // Make sure it is published to the web and that this your ss ID var dataURL = "https://spreadsheets.google.com/feeds/list/" + spreadsheetID + "/2/public/values?alt=json";//our data is on page two //set some variables var faces = ""; //get the data fetch(dataURL).then(function(response) { var contentType = response.headers.get("content-type"); if (contentType && contentType.indexOf("application/json") !== -1) { return response.json().then(function(json) { // now that you've got the data let's do something with it per item if (json.feed.entry) { var data = json.feed.entry; data.forEach(function(element){ faces = faces +makeFace(element);//make the faces . . . so much humor }) } document.getElementById('face-holder').innerHTML = faces; }); } }); function makeFace(element){ return '<img src="' +element.gsx$profileimageurl.$t + '">' }
See the Pen
Sheets avatar display – ALL by Tom (@twwoodward)
on CodePen.
This is a neat extension of TAGS. It’s too bad Google makes it a pain to access the sheet as JSON (why so many dollar signs and gsx prefixes?).
A quick improvement would be to cast the array of avatar URLs to a
Set
. Sets can only hold unique values, so adding a loop to add each avatar address to the set gives you a unique array that you can use to display the photos. Thenew Set()
constructor can also take in an iterable as an argument and it will give you a set. That doesn’t work here because each row of the sheet fromjson.feed.entry
is unique, so you need to add that extraforEach
loop to make it work.Here’s a fork of your demo showing unique photos.
It is a strange data structure but I’ve gotten used to it.
I did ask if they wanted unique avatars but they didn’t. I can see that having all them gives you a semi-dataviz aspect.
I do like the set option. It’s slick.