How to access a list within a list in Vuejs?

Asked

Viewed 1,235 times

0

I’m having difficulty listing the values of a Json, but it results from it is an array within 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\/"
        }
    }
}

It’s based on this link from Json

Json values => click here

I’m following this tutorial

To list the values I performed 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 made that attempt and I didn’t succeed, and I didn’t succeed.

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

Could someone show me how to list array values?

array vue.js

  • The JSON does not represent a array within a array. It is an object that has some properties that are also objects.

  • thank you very much, but you would have like to help me in my problem?

  • What I suggest you do is take the object when you come back from ajax and turn it into an array with the structure you need and then put this array into your Vue "date" object.

  • you would have to show an example or a template you have on the internet for me to have an idea of how to do it? please.

2 answers

1


You are pointing the v-for to the whole object, the correct 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>
<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>

If you want to go through the whole 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>
<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>

  • The way you put it is right as it shows in this URL: https://jsfiddle.net/em3dfvrc/3/ But the way I’m trying to implement is coming from this json http://api.promasters.net.br/cotacao/v1/values E tried to adapt and I couldn’t see https://jsfiddle.net/xt2fyh6u/2/ ?

  • 1

    I understand your problem, you are making a request in an https environment for an http api, all browsers block this, follow the link to troubleshoot in Mozilla https://support.mozilla.org/pt-BR/kb/conteudo-mixed-blocked no-firefox, see other browsers, finally you were taking the result of the api with Response.body.Results when the correct out Response.body, example working https://jsfiddle.net/xt2fyh6u/10/ do not forget to disable https protection as described above, otherwise the example will not work.

  • 1

    Thank you so much for the help, ball show.

0

Browser other questions tagged array vue.js

You are not signed in. Login or sign up in order to post.