Polymer Array Error

Question

<link rel="import" href="../bower_components/polymer/polymer.html">

<link rel="import" href="../bower_components/app-layout/app-layout.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/effects/waterfall.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">

<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-card/paper-card.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-progress/paper-progress.html">

<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">



<dom-module id="pokedex-app">
    <template>
    <style is="custom-style">
      :host {
        display: block;
      }

      app-toolbar {
        background-color: #4285f4;
        color: #fff;
      }

      paper-icon-button + [main-title]{
        margin-left: 24px;
      }

      app-drawer h1 {
        text-align: center;
        background-color: #4285f4;
      }

      .drawer-list a {
        display: block;
        padding: 0 16px;
        text-decoration: none;
        color:  #4285f4;
        line-height: 40px;
      }

      .drawer-list a.iron-selected {
        color: black;
        font-weight: bold;
      }

      paper-button {
        background-color: #4285f4;
        color: #fff;
      }

      paper-card {
        height: 135px;
        width: 135px;
        display: inline-block;
        margin: 10px;

          --paper-card-header-image: {
            display: block;
            margin: 0 auto;
            height: 96px;
            width: 96px;
          }
          --paper-card-content: {
            padding: 5px;
            text-align: center;
          }
      }

      paper-progress {
         --paper-progress-active-color: crimson;
         width: 100%;
      }

      .main {
        text-align:center;
      }

    </style>

    <iron-ajax
      id="getPoke"
      auto
      url="http://pokeapi.co/api/v2/pokemon/"
      handle-as="json"
      loading="{{activeRequest}}"
      params='{"dataType": "jsonp", "limit": "10"}'
      last-response="{{response}}"
      on-response="setData">
    </iron-ajax>


    <app-header-layout>
      <app-header fixed condenses effects="waterfall">
        <app-toolbar>
          <paper-icon-button src="images/pokedex.ico" on-tap="toggle"></paper-icon-button>
          <div main-title>Pokédex</div>
          <paper-progress indeterminate class="slow" bottom-item hidden="[[!activeRequest]]" disabled="[[!activeRequest]]"></paper-progress>
        </app-toolbar>
      </app-header>
    </app-header-layout>

    <app-drawer-layout fullbleed>
      <app-drawer id="drawer" swipe-open>
          <iron-selector class="drawer-list" role="navigation">
            <a href="/view1">Kanto</a>
            <a href="/view2">Johto</a>
          </iron-selector>
      </app-drawer>
    </app-drawer-layout>

    <div class="main">
      <template id="if" is="dom-if" if="[[pokemons]]">
        <template id="for" is="dom-repeat" items=[[pokemons]]>
          <paper-card on-tap="test" image="https://raw.githubusercontent.com/PokeAPI/pokeapi/master/data/v2/sprites/pokemon/[[getIndex(index)]].png">
            <div class="card-content">#[[getIndex(index)]]: [[uppercase(item.name)]]</div>
          </paper-card>
        </template>
      </template>
    </div>

    <paper-button on-tap="getMorePokemon" hidden$="[[activeRequest]]">Get 10 more Pokémon</paper-button>
  </template>

    <script>
        class MyApplication extends Polymer.Element {
            static get is() {
                return 'pokedex-app';
            }
            static get properties() {
              return {
                pokemons: {
                  type: Array,
                  value: [],
                  notify: true,
                }
              }
            }

            toggle(){
              this.$.drawer.toggle();
            }

            setData(){
                this.pokemons = this.response.results;
            }

            getIndex(index){
              if(this.$.getPoke.params.offset === undefined){
                return index + 1;
              } else {
                return index + 1 + this.$.getPoke.params.offset;
              }
            }

            uppercase(name){
              return name.charAt(0).toUpperCase() + name.substr(1).toLowerCase();
            }

            getMorePokemon(){

              if(this.$.getPoke.params.offset === undefined){
                this.$.getPoke.set('params.offset', 10);
              } else {
                this.$.getPoke.set('params.offset', this.$.getPoke.params.offset + 10);
              }
              this.$.getPoke.generateRequest();

            }
        }

        window.customElements.define(MyApplication.is, MyApplication);
    </script>
</dom-module>

So this is my current code, so what happens is after a response it adds the response.results to the pokemons array, what I actually want to do is whenever the user presses the button, re-do the call but add it to the existing array of pokemon. However using this.pokemon += this.response.results; does not work and gives me an array within an array and that's not what I want, I just want an array with different objects.

Thank you for your time!

Answer 1

Here explains the reason why this.pokemon += this.response.results that doesn't work.
Anyway, I think you should use polymer's push method. Here you can find a short explanation about that method.