Listing Elements of JSON Array with v-for

Question

I have an API containing my Data in JSON format. It successfully loads and i can display the array as a whole, but i'm having issues displaying certain fields.

The array is stored in a field:

           peoples: '',
           errors: ''

This is how i'm currently trying to display the info

  <div id="table">
   <li v-for="people in peoples">
       {{people}}
   </li>

Whis displays it as :

{ "username": "example", "firstnames": "ex", "middle": "NULL", "surname": "example", "email": "example@example.com", "picture": "", "title": "NULL", "active": 1 } 
{ "username": "example", "firstnames": "ex", "middle": "NULL", "surname": "example", "email": "example@example.com", "picture": "", "title": "NULL", "active": 1 } 
{ "username": "example", "firstnames": "ex", "middle": "NULL", "surname": "example", "email": "example@example.com", "picture": "", "title": "NULL", "active": 1 } 
{ "username": "example", "firstnames": "ex", "middle": "NULL", "surname": "example", "email": "example@example.com", "picture": "", "title": "NULL", "active": 1 } 
{ "username": "example", "firstnames": "ex", "middle": "NULL", "surname": "example", "email": "example@example.com", "picture": "", "title": "NULL", "active": 1 } 

I know that putting {{people[0}.username} displays the value, but thats only for a single record, how can i do it so that it lists all usernames(regardless of array size etc)

eg)

username123
username124
username125

Answer 1

Added .data to this.peoples

.then(response => {
 console.log(JSON.stringify(response.data))
 this.peoples = response.data.data
 })

change peoples:'' to peoples:[]

export default {
data(){
    return{
        peoples: [],
        errors: ''
    }
},

And finally:

      <li v-for="people in peoples">
      {{people.username}}
      {{people.firstnames}}
      </li>