my pokemon-component.js
define([
"jquery"
], function ($) {
"use strict";
return {
getPokemonResults: function () {
/**
* Return result from pokeapi
* @return {Deferred}
*/
return $.ajax({
url: "https://pokeapi.co/api/v2/pokemon/",
type: "GET",
global: true,
contentType: "application/json",
Data:{
'pokeData':[]
}
});
},
getPokemon: function(urlPoke){
return $.ajax({
url: urlPoke,
type: "GET",
global: true,
contentType: "application/json",
Data:{
'pokeData':[]
}
});
}
}
});
my pokemontchild-component.js
define([
"jquery",
"uiComponent",
"Test_PokemonApp/js/pokemon-component",
"ko"
], function ($,Component, Poke,ko) {
return Component.extend({
defaults: {
pokemon: [],
},
initialize: function () {
this._super();
this.initListPoke();
},
initObservable: function(){
this._super()
.observe({
pokemon:[],
});
return this;
},
initListPoke: function () {
var me = this;
Poke.getPokemonResults().then($.proxy(function(data) {
me.initgetPokemon(data['results']);
},this));
},
initgetPokemon:function(list){
const pokemon = {}
list.forEach(element => {
Poke.getPokemon(element.url).then($.proxy(function(data){
pokemon.name = data.name;
pokemon.id= data.id;
pokemon.img=data.sprites.other.dream_world.front_default;
pokemon.type=data.types[0].type.name
}))
this.pokemon.push(pokemon)
console.log(pokemon)
});
}
});
});
my template.html
<div class="pokemones" data-bind="foreach:pokemon">
<span data-bind="text:name"></span>
</div>