i'm trying show data 2 separate ajax calls.
i've started experimenting handlebars.js , managed show data 1 call. how can refactor code show data second call well?
html:
<header> <img id="twitch-logo" src="https://upload.wikimedia.org/wikipedia/commons/c/c6/twitch_logo_%28wordmark_only%29.svg"> </header> <div id="result-placeholder"></div> <script type="text/handlebars-template" id="handlebars-template"> {{#each this}} <div class="result-wrapper"> <a href="{{channel.url}}" target="_blank"> <div><img src="{{channel.logo}}" class="result-logo"></div> <div class="result-name">user: {{channel.display_name}}</div> <div class="result-game">currently streaming: {{channel.game}}</div> </a> </div> {{/each}} </script> js:
var streamers = ['monstercat', 'lirik']; function getstream(name) { return $.ajax('https://api.twitch.tv/kraken/streams/' + name + '?callback=?', { datatype: 'json' }); } function displaystream(data) { var $placeholder = $("#result-placeholder"); var handlebarstemplate = $("#handlebars-template").html(); var templatecompile = handlebars.compile(handlebarstemplate); $placeholder.html(templatecompile(data)); } streamers.map(function(element) { getstream(element) .then(displaystream); });
it looks using jquery perform http fetch of streams. suggest looking @ jquery api, , use instance jquery.when( deferreds ) combine async fetch of 2 or more resources:
