EmberJSを使用して外部APIからデータを引き出す方法は？

Question

私はEmberJSを勉強しようとしています。私はこれで本当に苦労しています。基本的に、私は次の基本的な構造を持っている

テンプレート：

<ul> 
    {{#each model as |game|}} 
    <li>{{game.title}} - {{game.console}}</li> 
    {{/each}} 
</ul> 

ルートファイル：私はここに持っているように、私が引っ張ったい

export default Ember.Route.extend({ 
    model() { 
     return [ 
     {'title':'Super Mario Bros', 'console':'NES'}, 
     {'title':'Pac Man', 'console':'Arcade'}, 
     {'title':'Galaga', 'console':'Arcade'}, 
     {'title':'Frogger', 'console':'Arcade'}, 
     {'title':'Marvel vs. Capcom', 'console':'Arcade'}, 
     {'title':'The Legend of Zelda', 'console':'NES'}, 
     {'title':'CastleVania', 'console':'NES'}, 
     {'title':'Final Fantasy IV', 'console':'SNES'}]; 
    } 
}); 

しかし、その代わりにそれをハードコーディングそれはGET呼び出しを使ったApiary APIリンクからのものです。私はこれをどうすればいいのですか？

（養蜂場https://private-9c66cc-managementconsole.apiary-mock.com/getactiveroms）

Answer 1

JSON準拠したAPIのために、あなたはこのような何か行うことができます。このAPIは、有効なJSONに応答しないので、あなたがフェッチするよ、しかし

export default Ember.Route.extend({ 
    model() { 
    let url = 'https://private-9c66cc-managementconsole.apiary-mock.com/getactiveroms'; 
    return Ember.$.getJSON(url); 
    }, 
}); 

をAPIをテキストとして使用し、JSONとして解析する前にレスポンスを操作します。

export default Ember.Route.extend({ 
    model() { 
    let url = 'https://private-9c66cc-managementconsole.apiary-mock.com/getactiveroms'; 
    return Ember.$.ajax({ 
     url: url, 
     dataType: 'text', 
    }) 
    .then((result) => { 
     result = result.replace(/[ \n]+/g, ''); 
     result = result.substring(1, result.length - 1); 
     result = result.replace(/'/g, '"'); 
     return JSON.parse(result); 
    }, (err) => { 
     console.log('err', err); 
    }); 
    }, 
}); 

有効なJSONを含むようにAPIレスポンスを更新して、消費時の生活を楽にしてください。