Can't loop through my Pokemons in Onsen.io

Question

I'm learning how to use onsen.io and the best way to learn is by making a Pokemon app!

But of course, being a noob, I'm having trouble trying to loop through my list of 151 Pokemons using onsen.io. I'm able to console.log the list of 151, but I'm not sure what's missing to display it in an ons-list.

Am I looping it incorrectly?

Thanks!

Here's my code:

<ons-navigator id="myNavigator" page="main-temp"></ons-navigator>
            
        <!-- ******************** main-template ******************** -->

            <template id="main-temp">
            <ons-page id="main-page">
              
                   <ons-toolbar style="background-color: red;">
                    <div class="center" style="color: #fff;">Pokedex</div>
                  </ons-toolbar>

          </ons-page>
           </template>

    <!-- ******************** list template ******************** -->
    <template id="list-temp">
        <ons-page id="list-page">
            <div class="content content-container">                   
            
            <ons-list id="list-item"></ons-list>
        </div>
        </ons-page>
    </template>

    <!-- ******************** spinner modal ******************** -->

    <ons-modal id="spinner-modal">
        <div style="margin: auto;">
            <ons-icon icon="md-spinner" size="100px" spin></ons-icon>
        </div>
    </ons-modal>

window.onload = 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(settings)
    .done(function(result){
        sendData(result);
        
        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');
        for(let i = 1; i < jsonData.length; i++){     
                     
            itemsList.appendChild(
                ons.createElement(
                    '<ons-card class="inside-cards">'+
                    '<ons-list>' +
         
                    '<ons-list-item modifier="tappable>' + 
                        '<div class="left" >' + 
                        jsonData[i].name +
                        '</div>' +
                        '<div class="" style="margin-left:20px;" >' +
                            '<ons-icon icon="fa-hashtag"></ons-icon>' + ' ' + jsonData[i].name + "<br><br>" +
                            '<ons-icon icon="fa-thumbs-up"></ons-icon>' + ' ' + jsonData[i].name + "<br><br>" +
                            '<ons-icon icon="fa-user"></ons-icon>' + ' ' + jsonData[i].name +  "<br><br>" +
                        '</div>' + 
                        
                        '<div>' +
                        '</div>' +
                    '</ons-list-item>' +
                    '</ons-list>' +
                    '</ons-card>'
                )
            );
        }
    }

}

score 0 · Accepted Answer · answered Oct 03 '20 at 07:55

there are two problems in your code.

your api response contains result but you want list of pokemons which is avaialble in result.results so you need to call sendData(result.results)
you are using template tag which creates a different document scope called documentFragment. also in template the id means the HTML page you want to render in app as template so id should be defined as id='something.htm'. for more details read ons-template

proper use of template

<template id="page.html">
</template>

or

<ons-splitter>
  <ons-splitter-content page="page.html">
  </ons-splitter-content>
</ons-splitter>

showing this in online editor is a bit difficult since online editor provide only one HTML. let me see if I get time to do this in plunkr/stackblitz online editor or I hope you figure out this from ons documentation.

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(settings)
    .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) {
    debugger;
    var itemsList = document.getElementById('list-item'); // this is no longer null since this is no longer part of template.
    for (let i = 1; i < jsonData.length; i++) {

      itemsList.appendChild(
        ons.createElement(
          '<ons-card class="inside-cards">' +
          '<ons-list>' +

          '<ons-list-item modifier="tappable>' +
          '<div class="left" >' +
          jsonData[i].name +
          '</div>' +
          '<div class="" style="margin-left:20px;" >' +
          '<ons-icon icon="fa-hashtag"></ons-icon>' + ' ' + jsonData[i].name + "<br><br>" +
          '<ons-icon icon="fa-thumbs-up"></ons-icon>' + ' ' + jsonData[i].name + "<br><br>" +
          '<ons-icon icon="fa-user"></ons-icon>' + ' ' + jsonData[i].name + "<br><br>" +
          '</div>' +

          '<div>' +
          '</div>' +
          '</ons-list-item>' +
          '</ons-list>' +
          '</ons-card>'
        )
      );
    }
  }

})

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
  <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <ons-navigator id="myNavigator" page="main-temp"></ons-navigator>

  <!-- ******************** main-template ******************** -->

  <template id="main-temp">
            <ons-page id="main-page">
              
                   <ons-toolbar style="background-color: red;">
                    <div class="center" style="color: #fff;">Pokedex</div>
                  </ons-toolbar>

          </ons-page>
           </template>

  <!-- ******************** list template ******************** -->


  <ons-page id="list-page">
    <div class="content content-container">
      <ons-list id="list-item"></ons-list>

    </div>
  </ons-page>
  <!-- ******************** spinner modal ******************** -->

  <ons-modal id="spinner-modal">
    <div style="margin: auto;">
      <ons-icon icon="md-spinner" size="100px" spin></ons-icon>
    </div>
  </ons-modal>
</body>

</html>

Woohoo it works!! thank you so much!! Can't wait to become as good as you one day haha! — MetalBearSolid, Oct 03 '20 at 21:02
Hey Sandeep Joshi! Now that my list is working. I was wondering how come my Pokemon data only has .name and .url when I view console.log? I don't see anything else like 'abilities', 'moves', etc? Sorry for asking another question. — MetalBearSolid, Oct 03 '20 at 23:36
no worries. the API returns a url along with name. that url needs to be queried again if you want the abilities and other data related to that Pokémon. the reason API is not sending the abilities and other data at first place is that the response will become too large. — sandeep joshi, Oct 04 '20 at 05:05
Hmm...I'm not sure how to do that? Any tips on how to query the url? :( — MetalBearSolid, Oct 04 '20 at 18:47
I created a new ticket here: https://stackoverflow.com/questions/64199519/pokeapi-querying-additional-pokemon-info — MetalBearSolid, Oct 04 '20 at 22:55

Can't loop through my Pokemons in Onsen.io

1 Answers1