dergachev · December 11, 2015 03:49
diff --git a/index.html b/index.html
 <!--
 /* Copyright (c) 2007 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
 -->
 <html>
 <head>
  <title>YouTube data API Video Browser</title>
 </head>
 <body>
    <div id="videos"> </div>
 </body>
 <! -- alex added these helper libraries -->
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js "> </script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.3/underscore-min.js"> </script>
  <script type="text/javascript">
    // adapted from https://developers.google.com/youtube/2.0/developers_guide_json
    function showMyVideos(data) {
      console.log(data);
      var feed = data.feed;
      var entries = feed.entry || [];
      var dataRows = [];
      for (var i = 0; i < entries.length; i++) {
        var entry = entries[i];
        var keys = ['title $t', 'content $t', 'media$group media$thumbnail 0 url'];
        var dataRow = [];

        _.each(keys, function(key) { 
          dataRow.push(poormansXpath(entry,key));
        });
        dataRows.push(dataRow);
      }
        console.log(dataRows);
      var html = ['<table>'];
      var tableTemplate = '<table>\
        <tr><% _.each(keys, function(key) { %> <th><%= key %></th><% }) %></tr>\
        <% _.each(rows, function(row) { %> <tr><%= row %></tr> <% })%>\
        </table>';
      // var tableRowTemplate = '<% _.each(keys, function(key) { %> <th><%= key %></th><% }) %></tr>\
      var output = _.template(tableTemplate,{keys:keys,rows:["bob","bill"]});
      console.log(output);
 /*
        html.push('<th>', key, '</th>');
        html.push('<tr>');
        html.push('<td>', title, '</td>');
        html.push('<td>', embedCode, '</td>');
        html.push('</tr>');
      html.push('</table>');
      document.getElementById('videos').innerHTML = html.join('');
      */
    } 

    // Takes a js object and a descend expression, and tries to descend.
    // e.g. poormansXpath({a:1,b:{c:2,d:3}}, 'b d');
    function poormansXpath(jsObject, expression) {
      var path = expression.split(" ");
      var value = jsObject;
      _.each(path, function(p) { value = value[p]});
      return value;
    }
  </script>
  <!-- originally /feeds/users/GoogleDevelopers/uploads?v=2&alt=json-in-script&format=5&callback=showMyVideos but v=2 caused a 404 error -->
  <script 
    type="text/javascript" 
    src="http://gdata.youtube.com/feeds/users/InteractingWithPrint/uploads?format=5&callback=showMyVideos&alt=json-in-script">
  </script>
 </html>
	<!--
	/* Copyright (c) 2007 Google Inc.
	*
	* Licensed under the Apache License, Version 2.0 (the "License");
	* you may not use this file except in compliance with the License.
	* You may obtain a copy of the License at
	*
	* http://www.apache.org/licenses/LICENSE-2.0
	*
	* Unless required by applicable law or agreed to in writing, software
	* distributed under the License is distributed on an "AS IS" BASIS,
	* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	* See the License for the specific language governing permissions and
	* limitations under the License.
	*/
	-->
	<html>
	<head>
	<title>YouTube data API Video Browser</title>
	</head>
	<body>
	<div id="videos"> </div>
	</body>
	<! -- alex added these helper libraries -->
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js "> </script>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.3/underscore-min.js"> </script>
	<script type="text/javascript">
	// adapted from https://developers.google.com/youtube/2.0/developers_guide_json
	function showMyVideos(data) {
	console.log(data);
	var feed = data.feed;
	var entries = feed.entry \|\| [];
	var dataRows = [];
	for (var i = 0; i < entries.length; i++) {
	var entry = entries[i];
	var keys = ['title $t', 'content $t', 'media$group media$thumbnail 0 url'];
	var dataRow = [];

	_.each(keys, function(key) {
	dataRow.push(poormansXpath(entry,key));
	});
	dataRows.push(dataRow);
	}
	console.log(dataRows);
	var html = ['<table>'];
	var tableTemplate = '<table>\
	<tr><% _.each(keys, function(key) { %> <th><%= key %></th><% }) %></tr>\
	<% _.each(rows, function(row) { %> <tr><%= row %></tr> <% })%>\
	</table>';
	// var tableRowTemplate = '<% _.each(keys, function(key) { %> <th><%= key %></th><% }) %></tr>\
	var output = _.template(tableTemplate,{keys:keys,rows:["bob","bill"]});
	console.log(output);
	/*
	html.push('<th>', key, '</th>');
	html.push('<tr>');
	html.push('<td>', title, '</td>');
	html.push('<td>', embedCode, '</td>');
	html.push('</tr>');
	html.push('</table>');
	document.getElementById('videos').innerHTML = html.join('');
	*/
	}

	// Takes a js object and a descend expression, and tries to descend.
	// e.g. poormansXpath({a:1,b:{c:2,d:3}}, 'b d');
	function poormansXpath(jsObject, expression) {
	var path = expression.split(" ");
	var value = jsObject;
	_.each(path, function(p) { value = value[p]});
	return value;
	}
	</script>
	<!-- originally /feeds/users/GoogleDevelopers/uploads?v=2&alt=json-in-script&format=5&callback=showMyVideos but v=2 caused a 404 error -->
	<script
	type="text/javascript"
	src="http://gdata.youtube.com/feeds/users/InteractingWithPrint/uploads?format=5&callback=showMyVideos&alt=json-in-script">
	</script>
	</html>