Facebook Graph to Names
HTML
<script src="http://jsonselect.org/js/jsonselect.js"></script>
<h3>Graph Link</h3>
<form>
<input id="graph-link" name="graph-link" type="text" value="" />
<input id="read-graph" name="read-graph" type="submit" value="Read Graph" />
<a id="download-csv" href="#" style="display: none;">Download CSV</a>
</form>
<table id="name-block">
</table>
CSS
#graph-link { width: 400px; }
#name-block {
margin-top: 10px;
border: 1px solid black;
border-collapse: collapse;
}
#name-block tr {
border-top: 1px dashed black;
}
#name-block .index {
width: 50px;
}
#name-block .name {
width: 350px;
border-left: 1px solid black;
}
JavaScript
$('#read-graph').on('click', function() {
var graphLink = $('#graph-link').val();
if (!graphLink) {
alert("Enter link");
return false;
}
graphLink = graphLink + (/\?/.test(graphLink) ? "&" : "?") + "callback=?"
$.getJSON(graphLink, function(data) {
var nameBlock = $('#name-block');
nameBlock.find('tr').remove();
var csvData = "data:application/csv;charset=utf-8,Index%2CName%2C%0A";
var cIndex = 0;
JSONSelect.forEach('.comments .data .from .name', data, function(cName) {
cIndex++;
nameBlock.append('<tr><td class="index">' + cIndex + '</td><td class="name">' + cName + '</td></tr>');
csvData = csvData + cIndex + "%2C" + encodeURIComponent('"' + cName.replace(/"/g, '""') + '"') + "%0A";
});
$('#download-csv').prop('href', csvData).attr('download', "FBGraph.csv").show();
});
return false;
});