title: PokeAPI - querying additional pokemon info
body: <p>I'm currently learning how to use onsen.io and I'm using the PokiAPI to learn. I had helped earlier using &quot;https://pokeapi.co/api/v2/pokemon?limit=151&quot; to display the names of all 151 Pokemons in an ons-list thanks to @sandeep joshi.</p>
  <p>I didn't know I need to make another query to be able to grab additional info like &quot;abilities&quot;, &quot;elements&quot;..etc and I'm not sure how to do that, any help would be greatly appreciated!</p>
  <p>Here's my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"&gt;
    &lt;link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css"&gt;
    &lt;script src="https://unpkg.com/onsenui/js/onsenui.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
   &lt;ons-navigator id="myNavigator" page="main-temp"&gt;&lt;/ons-navigator&gt;
              
      &lt;!-- ******************** main-template ******************** --&gt;
  
      &lt;template id="main-temp"&gt;
        &lt;ons-page id="main-page"&gt;      
           &lt;ons-toolbar style="background-color: red;"&gt;
            &lt;div class="center" style="color: #fff;"&gt;Pokedex&lt;/div&gt;
          &lt;/ons-toolbar&gt;
        &lt;/ons-page&gt;
     &lt;/template&gt;
  
    &lt;!-- ******************** list template ******************** --&gt;
    
    &lt;ons-page id="list-page"&gt;
      &lt;div class="content content-container"&gt;
        &lt;ons-list id="list-item"&gt;&lt;/ons-list&gt;
      &lt;/div&gt;
    &lt;/ons-page&gt;
  
    &lt;!-- ******************** spinner modal ******************** --&gt;
  
    &lt;ons-modal id="spinner-modal"&gt;
      &lt;div style="margin: auto;"&gt;
        &lt;ons-icon icon="md-spinner" size="100px" spin&gt;&lt;/ons-icon&gt;
      &lt;/div&gt;
    &lt;/ons-modal&gt;
    
    &lt;/body&gt;
    &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>ons.ready(function() {
        
        var spinnerModal = document.querySelector('#spinner-modal');
        spinnerModal.show();
  
        var settings = {
          "url": `https://pokeapi.co/api/v2/pokemon?limit=151`,
          "method": "GET",
          "timeout": 0,
        };
  
        $.ajax(pokemonData)
          .done(function(result) {
            sendData(result.results); // result.results contains pokemon list :)
  
            let results = result;
            console.log(results);
  
          })
          .fail(function(xhr, status, error) {
            console.log('error:' + xhr.status);
  
          })
          .always(function() {
  
            spinnerModal.hide();
          })
  
        function sendData(jsonData) {
          var itemsList = document.getElementById('list-item'); // this is no longer null since this is no longer part of template.
          for (let i = 1; i &lt; jsonData.length; i++) {
  
            itemsList.appendChild(
              ons.createElement(
                '&lt;ons-card class="inside-cards"&gt;' +
                '&lt;ons-list&gt;' +
  
                '&lt;ons-list-item modifier="tappable&gt;' +
                '&lt;div class="left" &gt;' +
                jsonData[i].id +
                '&lt;/div&gt;' +
                '&lt;div class="" style="margin-left:20px;" &gt;' +
                '&lt;ons-icon icon="fa-canadian-maple-leaf"&gt;&lt;/ons-icon&gt;' + ' ' + jsonData[i].url + "&lt;br&gt;&lt;br&gt;" +
                '&lt;ons-icon icon="fa-canadian-maple-leaf"&gt;&lt;/ons-icon&gt;' + ' ' + jsonData[i].name + "&lt;br&gt;&lt;br&gt;" +
                '&lt;ons-icon icon="fa-canadian-maple-leaf"&gt;&lt;/ons-icon&gt;' + ' ' + jsonData[i].name + "&lt;br&gt;&lt;br&gt;" +
                '&lt;/div&gt;' +
  
                '&lt;div&gt;' +
                '&lt;/div&gt;' +
                '&lt;/ons-list-item&gt;' +
                '&lt;/ons-list&gt;' +
                '&lt;/ons-card&gt;'
              )
            );
          }
        }
  
      })</code></pre>
  </div>
  </div>
  </p>