1

Quiero mostrar solo algunos datos del siguiente json: https://randomuser.me/api/?results=10

En una tabla Boostrap-Vue se supone que tengo que exportar los datos pero no se muestra.

Mi código es el siguiente y solo quiero mostrar ciertos datos como el nombre y apellido.

<template lang="html">
  <div>
    <b-table striped hover :personas="personas" :fields="fields"></b-table>
  </div>
</template>
<script>
export default {
  name: 'Agenda',
  data () {
    return {
      fields: {
        last_name: {
          label: 'Person last name',
          sortable: true
        },
        first_name: {
          label: 'Person first name',
          sortable: true
        }
      },
      personas: []
    }
  },
  created: function () {
    this.obtenerAPI()
  },
  methods: {
    obtenerAPI () {
      this.$http.get('https://randomuser.me/api/?results=10')
        .then(function (respuesta) {
          this.personas = respuesta.body.results
          console.log(this.personas)
        })
    }
  }
}
</script>

<style lang="css">
</style>

¿Como puedo mostrarlos?

1 respuesta 1

3

El problema es que los campos first_name y last_name no existen en el JSON devuelto por randomuser. En su lugar podemos encontrar name.first y name.last.

Para poder acceder a valores anidados podemos hacer uso de Scoped field slots donde declaramos el slot igual al nombre del field.key y dentro de este agregar la expresion data.item.* para imprimir el valor deseado.

Solución:

Podrías hacerlo así:

<template>
  <b-table :fields="fields" :items="personas">
    <template slot="first_name" slot-scope="data">
      {{data.item.name.first}}
    </template>
    <template slot="last_name" slot-scope="data">
      {{data.item.name.last}}
    </template>
  </b-table>
</template>

<script>
export default {
  name: 'Agenda',
  data () {
    return {
      fields: [
        { key: 'first_name', label: 'Last Name' },
        { key: 'last_name', label: 'First Name' }
      ],
      personas: []
    }
  },
  created: function () {
    this.obtenerAPI()
  },
  methods: {
    obtenerAPI () {
      this.$http.get('https://randomuser.me/api/?results=10')
        .then(function (respuesta) {
          this.personas = respuesta.body.results
        })
    }
  }
}
</script>

Demo:

var app = new Vue({
  el: '#app',
  data () {
    return {
      fields: [
        { key: 'first_name', label: 'Last Name' },
        { key: 'last_name', label: 'First Name' }
      ],
      personas: []
    }
  },
  created: function () {
    this.obtenerAPI()
  },
  methods: {
    obtenerAPI () {
      this.$http.get('https://randomuser.me/api/?results=10')
        .then(function (respuesta) {
          this.personas = respuesta.body.results
        })
    }
  }
})
<link rel="stylesheet prefetch" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet prefetch" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">

<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
  <template>
    <b-table :fields="fields" :items="personas">
      <template slot="first_name" slot-scope="data">
        {{data.item.name.first}}
      </template>
      <template slot="last_name" slot-scope="data">
        {{data.item.name.last}}
      </template>
    </b-table>
  </template>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.