Search code examples
javascriptpolymerpolymer-1.0

Polymer Rest Api not working

empty data tablei am using web component iron ajax to make REST api call following this tutorial http://frontendinsights.com/polymer-rest-api-using-iron-ajax/ i am fetching this data and storing using predix data table to show the fetched data from api on ui using data table https://www.predix-ui.com/#/components/px-data-table/ which basically accepts the data in JSON format.

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-
 ajax.html">
<link rel="import" href="../../bower_components/px-data-table/px-data-
 table.html">
 <dom-module id="show-repositories">
 <template>

  <px-data-table
  table-data="{{githubrepository}}"
  language="en"
  sortable>
  <px-data-table-column name="repository"></px-data-table-column>
  <px-data-table-column name="id" label="id"></px-data-table-column>
  </px-data-table>

    Repositories:
    <span>{{githubrepository}}</span>
    <span>{{repos}}</span>

    <iron-ajax
        id="requestRepos"
        url="https://api.github.com/users/burczu/repos"
        params='{"type":"all"}'
        handle-as="json"
        on-response="handleResponse">
    </iron-ajax>
</template>

<script>
    Polymer({
        is: 'show-repositories',
        properties: {
            repos: {
                type: Array
            },
            githubrepository:{
              type: Array
            }

        },
        ready: function () {
            this.$.requestRepos.generateRequest();

        },
        handleResponse: function (data) {
             this.repos = data.detail.response;

            for (var i = 0; i < this.repos.length; i++) {
              this.githubrepository[i] = {"id":this.repos[i].id,"name":this.repos[i].name}
            }

            console.log(this.repos);
           console.log(this.githubrepository);
        }


    });
</script>

both console logs are showing data is json format but when i am using {{repos}} its showing the data contained in it but when i am using {{githubrepository}} its not showing the data,even i am not able to print the data using prredix webcomponent. i am not able to figure what's going wrong here?

Solution

  • Change your js.

    handleResponse: function (data) {
    this.repos = data.detail.response;

    var githubrepository = [];
    for (var i = 0; i < this.repos.length; i++) {
        githubrepository[i] = {"id":this.repos[i].id,"name":this.repos[i].name}
    }
    this.githubrepository = githubrepository;

    console.log(this.repos);
    console.log(this.githubrepository);
}