Zeige Werte von mehreren JSON-Objekten mit lastlebars.js

Question

Ich versuche, Daten von zwei separaten Ajax-Anrufe zu zeigen.

Ich habe angefangen zu experimentieren mit lenker.js und es geschafft, Daten anzuzeigen, aber nur von einem Anruf. Wie kann ich meinen Code so umgestalten, dass auch Daten aus dem zweiten Anruf angezeigt werden?

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); 
}); 

Answer 1

es sieht aus wie Sie jQuery verwenden die http holen Ihrer Ströme durchzuführen. Ich schlage vor, auf der jQuery API suchen, und verwenden Sie zum Beispiel jQuery.when (deferreds) zu async holt von 2 oder mehr Ressourcen zu kombinieren:

https://api.jquery.com/jquery.when/