How to find nested key in the json object in vuejs

Question

I am trying to display the users from the user list which I am getting from my Django API on my VUEjs app.

My User list data from API:

{
  "count": 1,
  "next": null,
  "previous": null,
  "results": [
    {
      "url": "http://localhost:8000/v1/users/1/",
      "username": "admin",
      "email": "[email protected]",
      "groups": []
    }
  ]
}

My VUE code:

<template>
    <div>
        <h1> Users </h1>
        <div v-for="results in APIData" :result="results" :key="results.username">
            <h5>{{ result.username }}</h5>
            <p>{{ result.email }}</p>
        </div>
    </div>
</template>

<script>
import { getAPI } from '../axios-api';
import { mapState } from 'vuex';

export default {
    name: 'Users',
    computed: mapState(['APIData']),
    created() {
        getAPI.get('/v1/users/', { headers: { Authorization: 'Bearer ' + this.$store.state.accessToken } })
        .then(response => {
            this.$store.state.APIData = response.data
        })
        .catch(error => {
            console.log(error)
        })
    }
}
</script>

For some reason, the data is not getting displayed on the webpage even though I can see my API request is successful and I can see the data in my network tab. Is the way displaying the users right? or am I missing something?

I'm new to VUEjs, can someone help?

Nikola Pavicevic · Accepted Answer · 2021-09-13 16:56:46Z

If you want to loop only thru results in APIData :

new Vue({
  el: '#demo',
    data() {
      return {
      APIData: {
        "count": 1,
        "next": null,
        "previous": null,
        "results": [
          {
            "url": "http://localhost:8000/v1/users/1/",
            "username": "admin",
            "email": "[email protected]",
            "groups": []
          },
          {
            "url": "http://localhost:8000/v1/users/1/",
            "username": "user",
            "email": "[email protected]",
            "groups": []
          }
        ]
      }
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <template>
    <div>
      <h1> Users </h1>
      <div v-for="result in APIData.results" :key="result.username">
        <h5>{{ result.username }}</h5>
        <p>{{ result.email }}</p>
      </div>
    </div>
  </template>
</div>

Diego Castro · Accepted Answer · 2021-09-13 16:40:43Z

0

The problem is in the v-for, you might try: v-for="results in APIData.results" since "results" is not an accessor, is the name that you are assigning to each value inside the array, and APIData is not an array.

answered Sep 13, 2021 at 16:40

Diego Castro

1

3 Comments

JimmyOppa Over a year ago

Then how should I proceed? What should I write instead of current condition?

JimmyOppa Over a year ago

I see like this "v-for="result in APIData.results" :key="result.username"

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How to find nested key in the json object in vuejs

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related