<div id="results"></div>

<script id="results_tpl" type="text/template">
  <ul>
	{{#results}}
    <li data-skin="{{skin_color}}">
      {{name}}
  </li>
  {{/results}}
  </ul>
</script>
var people = "https://swapi.co/api/people/";

$.getJSON(people).then(function(data) {
  var template = $('#results_tpl').html()
  var html = Mustache.render(template, data)

  $('#results').html(html);
  var tag = $('#results li');
  return tag.map(function (i, elem) { return $(elem).data('skin'); }).toArray();
}).then(console.log)

/*
.then(function() {
  var test = "//example.com/" + sub;
  $.getJSON(otherItems, function(data) {}
});
*/
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.2/jquery.min.js
  2. //cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js