Problems loading a list of Json in vue.js

Navigation
1

look at the Javascript code below; 

var app = new Vue({
    el:'#app',
    data:{
        bancodedados:[]

    },
    methods:{

    },
    created:function(){
        var self = this;
            self.$http.get('https://swapi.co/api/planets/1/?format=json').then(function(response){
            /*console.log(response); */
            self.bancodedados = response.data;  
        });

    }


});

This is my page; 

<table class="table">
        <thead>
            <tr>
                <th>nome</th>
                <th>Title</th>
                <th>Nome</th>
            </tr>   
        </thead>    
        <tbody>
            <tr v-for="bancodedado in bancodedados">
                <td>{{ bancodedado.name }}</td>
                <td>{{ bancodedado.climate }}</td>
                <td></td>
            </tr>
        </tbody>
    </table>

What is happening is that it is being able to load all the list but I can not see it as shown below;

Maybetheproblemisinthehtmlcode,Ijustneedtoknowhowtofixit;

==========================================================================

Seewhatappearsonmyconsoles;

gavethisresultwiththiscommand;

console.log(response);

ThatmeanshecanloadtheJsonlogs!

butwiththiscommand;

consoles.log(this.bancodedados);

It'squitedifferent;

    
asked by anonymous 21.09.2017 / 01:27

2 answers

1

This url you have just returns an object. Use another one that returns an array so you can use it in bancodedados . This other url has an array in the results property.

Example: 

new Vue({
  el: '#app',
  data: {
    bancodedados: []

  },
  methods: {

  },
  created: function() {
    var self = this;
    self.$http.get('https://swapi.co/api/planets/?format=json').then(function(response) {
      self.bancodedados = response.body.results;
    });

  }


});
table {
  width: 100%;
  display: table;
  table-layout: fixed;
}

table td,
table th {
  display: table-cell;
  text-transform: capitalize;
  text-align: center;
  padding: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<div id="app">
  <table class="table">
    <thead>
      <tr>
        <th>Nome</th>
        <th>Title</th>
        <th>Diametro</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="bancodedado in bancodedados">
        <td>{{ bancodedado.name }}</td>
        <td>{{ bancodedado.climate }}</td>
        <td>{{ bancodedado.diameter }} Km</td>
      </tr>
    </tbody>
  </table>
</div>
    
21.09.2017 / 07:28
0

You are using the wrong one, you are recovering the answer like this response.data , when in fact it is response.body

Just change this line self.bancodedados = response.response.body;

JSBin

    
21.09.2017 / 01:55
Permission system Doubt on using Socket in java on android