0

Estou tendo dificuldade de lista os valores de um Json, porém ele o resultado dele é um array dentro de um array como podem ver abaixo;

{
    "status": true,
    "valores": {
        "USD": {
            "nome": "D\u00f3lar",
            "valor": 3.2789,
            "ultima_consulta": 1521232205,
            "fonte": "UOL Economia - http:\/\/economia.uol.com.br\/"
        },
        "EUR": {
            "nome": "Euro",
            "valor": 4.0303,
            "ultima_consulta": 1521428406,
            "fonte": "UOL Economia - http:\/\/economia.uol.com.br\/"
        },
        "ARS": {
            "nome": "Peso Argentino",
            "valor": 0.1627,
            "ultima_consulta": 1521428407,
            "fonte": "UOL Economia - http:\/\/economia.uol.com.br\/"
        },
        "GBP": {
            "nome": "Libra Esterlina",
            "valor": 4.572,
            "ultima_consulta": 1521428407,
            "fonte": "UOL Economia - http:\/\/economia.uol.com.br\/"
        },
        "BTC": {
            "nome": "Bitcoin",
            "valor": 26500,
            "ultima_consulta": 1521455704,
            "fonte": "Mercado Bitcoin - http:\/\/www.mercadobitcoin.com.br\/"
        }
    }
}

É baseado nesse link de Json

Valores do Json => clique aqui

Estou seguindo esse tutorial

Para lista os valores realizei esse teste, porém não tive resultados;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"/>
<title>teste</title>
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="node_modules/font-awesome/css/font-awesome.css"/>
</head>
<body>
<div class="container" id="app">
    <div class="row">

    </div>


        <div class="row">

          <ol>
            <li v-for="bancodedado in bancodedados">
              {{ bancodedado.valores }}
              <ul>
                <li v-for="usd in valores.USD" >
                  {{ usd.valor }}
                </li>
              </ul>
            </li>
          </ol>

    </div>

</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-resource/dist/vue-resource.js"></script>
<script >

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

  },
  methods: {

  },
  created: function() {
    var self = this;
    self.$http.get('http://api.promasters.net.br/cotacao/v1/valores').then(function(response) {
      self.bancodedados = response.body.results;
    });
  },

});

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

fiz essa tentativa e não conseguir, e não tive sucesso.

<ol>
          <li v-for="( bandodedado, key) in bancodedados ">
            <ul>
              <li>
                  <li>
                 {{ key }} : {{ bandodedado }} 
                  </li>
              </li>
            </ul>
          </li>
        </ol>

Alguém poderia me mostra como faço para lista os valores do array?

4
  • O JSON não representa um array dentro de um array. É um objeto que tem algumas propriedades que também são objetos.
    – Pagotti
    19/03/2018 às 10:47
  • muito obrigado, mas você teria como me ajuda no meu problema?
    – user10264
    19/03/2018 às 11:04
  • O que eu sugiro você fazer é pegar o objeto quando voltar do ajax e transformar ele num array com a estrutura que você precisa e depois colocar esse array no seu objeto "data" do Vue.
    – Pagotti
    19/03/2018 às 11:14
  • você teria que mostra um exemplo ou um modelo que tenha na internet para eu ter uma ideia de como fazer? por favor.
    – user10264
    19/03/2018 às 11:17

2 Respostas 2

0

Você está apontando o v-for para o objeto inteiro, o correto seria apontar para bancodedados.valores.USD, exemplo...

new Vue({
	el : '#app',
  data : {
  	bancodedados : []
	},
  created () {
  
  this.bancodedados = {
  	"status": true,
    "valores": {
        "USD": {
            "nome": "D\u00f3lar",
            "valor": 3.2789,
            "ultima_consulta": 1521232205,
            "fonte": "UOL Economia - http:\/\/economia.uol.com.br\/"
        },
        "EUR": {
            "nome": "Euro",
            "valor": 4.0303,
            "ultima_consulta": 1521428406,
            "fonte": "UOL Economia - http:\/\/economia.uol.com.br\/"
        },
        "ARS": {
            "nome": "Peso Argentino",
            "valor": 0.1627,
            "ultima_consulta": 1521428407,
            "fonte": "UOL Economia - http:\/\/economia.uol.com.br\/"
        },
        "GBP": {
            "nome": "Libra Esterlina",
            "valor": 4.572,
            "ultima_consulta": 1521428407,
            "fonte": "UOL Economia - http:\/\/economia.uol.com.br\/"
        },
        "BTC": {
            "nome": "Bitcoin",
            "valor": 26500,
            "ultima_consulta": 1521455704,
            "fonte": "Mercado Bitcoin - http:\/\/www.mercadobitcoin.com.br\/"
        }
    }
  }
  
  }
})
.table {
  display: flex;
  justify-content: space-between;
  border: 1px gray solid;
}
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <h3>
    USD
  </h3>
  <div v-for="(val, key) in bancodedados.valores.USD" :key="key" >
    <div>
      <div class="table">
      <div>
      {{key}}: 
      </div>
      <div>
      {{val}}
      </div>
      </div>
    </div>
  </div>

</div>

Caso queira percorrer a lista toda...

new Vue({
	el : '#app',
  data : {
  	bancodedados : []
	},
  created () {
  
  this.bancodedados = {
  	"status": true,
    "valores": {
        "USD": {
            "nome": "D\u00f3lar",
            "valor": 3.2789,
            "ultima_consulta": 1521232205,
            "fonte": "UOL Economia - http:\/\/economia.uol.com.br\/"
        },
        "EUR": {
            "nome": "Euro",
            "valor": 4.0303,
            "ultima_consulta": 1521428406,
            "fonte": "UOL Economia - http:\/\/economia.uol.com.br\/"
        },
        "ARS": {
            "nome": "Peso Argentino",
            "valor": 0.1627,
            "ultima_consulta": 1521428407,
            "fonte": "UOL Economia - http:\/\/economia.uol.com.br\/"
        },
        "GBP": {
            "nome": "Libra Esterlina",
            "valor": 4.572,
            "ultima_consulta": 1521428407,
            "fonte": "UOL Economia - http:\/\/economia.uol.com.br\/"
        },
        "BTC": {
            "nome": "Bitcoin",
            "valor": 26500,
            "ultima_consulta": 1521455704,
            "fonte": "Mercado Bitcoin - http:\/\/www.mercadobitcoin.com.br\/"
        }
    }
  }
  
  }
})
.table {
  display: flex;
  justify-content: space-between;
  border: 1px gray solid;
}
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">

  <div v-for="(val, key) in bancodedados.valores" :key="key">
    <h4>
      {{key}}
    </h4>
    <div v-for="(val2, key2) in val" :key="key2">
      <div class="table">
      <div>
      {{key2}}: 
      </div>
      <div>
      {{val2}}
      </div>
      </div>
    </div>
  </div>

</div>

3
  • A forma que você colocou está certíssimo como mostra nessa URL: jsfiddle.net/em3dfvrc/3 Porém a forma que estou tentando implementa está vindo dessa api json api.promasters.net.br/cotacao/v1/valores E tentei adaptar e não consegui veja jsfiddle.net/xt2fyh6u/2 Teria como ver onde errei?
    – user10264
    19/03/2018 às 13:15
  • 1
    Entendi seu problema, você está fazendo uma requisição em um ambiente https para uma api http, todos o navegadores bloqueiam isso, segue o link para solucionar no mozilla support.mozilla.org/pt-BR/kb/…, vide outros navegadores, por fim você estava pegando o resultado da api com response.body.results quando o correto fora response.body, exemplo funcionando jsfiddle.net/xt2fyh6u/10 não esqueça de desativar a proteção https como descrito acima, caso contrário o exemplo não funcionará. 19/03/2018 às 13:37
  • 1
    muito obrigado pela ajuda, show de bola.
    – user10264
    19/03/2018 às 14:22
0

O v-for do Vue.js também itera sobre objetos:

https://br.vuejs.org/v2/guide/list.html#Objetos-em-v-for

Você deve fazer log-in para responder a esta pergunta.