如何使用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，你可以做這樣的事情：

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

然而，由於這種API不與有效的JSON迴應，你會去取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); 
    }); 
    }, 
}); 

我建議更新API響應以包含有效的JSON，以使您的生活更輕鬆。