How do I access a list within a list in VueJs?

Navigation
0

I'm having difficulty listing the values of a Json, but the result of it is an array inside an array as you can see below; 

{
    "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\/"
        }
    }
}

Based on this Json link

Json values = > click here

I'm following this tutorial

To list the values I did this test, but I had no results; 

<!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;
    });
  },

});

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

I tried this and could not, and I did not succeed. 

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

Can anyone tell me how to list the array values?

    
asked by anonymous 19.03.2018 / 10:49

2 answers

1

You are pointing the v-for to the whole object, the correct one would be to point to bancodedados.valores.USD, example ... 

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><divid="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>

If you want to go through the entire list ... 

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><divid="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>
    
19.03.2018 / 13:40
0

The Vue.js v-for also iterates over objects:

link

    
19.03.2018 / 13:41
Error with php tag on smarty how to block an action in a form