CODEWITHSUNDEEP
javascriptlaravelvue.jsvuejs2
user11123451
user11123451

Reputation:

How to display array response in vue.js and laravel?

I want to display array data in a .vue file, but I'm not sure how to. This is what I've tried:

<template>
    <div id="app">
        <table class="table table-striped">
          <thead>
             <tr>
                <th>Project Name</th>
                <th>Type</th>
             </tr>
          </thead>
          <tfoot>
             <tr v-for="user in info">
                <th>{{ user.data.user.assigned_projects.name }}</th>
                <th>{{ user.data.user.assigned_projects.type }}</th>
             </tr>
          </tfoot>
        </table>
    </div>
</template>

<script>
import axios from 'axios'

export default {
  el: '#app',
  data() {
    return {
      info: null
    }
  },
  mounted() {
    axios
      .get('http://api_url')
      .then((response) => {
        this.info = response.data
      })
  }
}
</script>

Here's an example API response:

{
   "response":{
      "error":{
         "error_code":0,
         "error_msg":"",
         "msg":""
      },
      "data":{
         "user":{
            "id":1,
            "email":"[email protected]",
            "first_name":null,
            "last_name":null,
            "photo_url":null,
            "organisation":null,
            "own_projects":[
            ],
            "assigned_projects":[
               {
                  "id":10,
                  "name":"test project",
                  "description":"cool stuff",
                  "image_url":"http://image_url",
                  "timezone":"UTC",
                  "owner":15,
                  "created_by":15,
                  "created_at":"2019-02-26 16:37:03",
                  "updated_at":"2019-02-26 16:37:03",
                  "pivot":{
                     "user_id":1,
                     "project_id":10
                  }
               },
               {
                  "id":8,
                  "name":"test project 2",
                  "description":"",
                  "image_url":"",
                  "timezone":"UTC",
                  "owner":15,
                  "created_by":15,
                  "created_at":"2019-02-21 18:36:55",
                  "updated_at":"2019-02-21 18:36:55",
                  "pivot":{
                     "user_id":1,
                     "project_id":8
                  }
               }
            ]
         }
      }
   }
}

Upvotes: 4

Views: 1121

Answers (1)

tony19
tony19

Reputation: 138206

Generally, the v-for directive takes the form of v-for="item in items", where items is the data path to an array or object.

The data path to assigned_projects[] is info.response.data.user.assigned_projects, so the v-for would be:

<tr v-for="project in info.response.data.user.assigned_projects" :key="project.id">
  <th>{{ project.name }}</th>
  <th>{{ project.id }}</th>
</tr>


new Vue({
  el: '#app',
  data() {
    return {
      info: null
    }
  },
  mounted() {
    this.info = {
   "response":{
      "error":{
         "error_code":0,
         "error_msg":"",
         "msg":""
      },
      "data":{
         "user":{
            "id":1,
            "email":"[email protected]",
            "first_name":null,
            "last_name":null,
            "photo_url":null,
            "organisation":null,
            "own_projects":[
            ],
            "assigned_projects":[
               {
                  "id":10,
                  "name":"test project",
                  "description":"cool stuff",
                  "image_url":"http://image_url",
                  "timezone":"UTC",
                  "owner":15,
                  "created_by":15,
                  "created_at":"2019-02-26 16:37:03",
                  "updated_at":"2019-02-26 16:37:03",
                  "pivot":{
                     "user_id":1,
                     "project_id":10
                  }
               },
               {
                  "id":8,
                  "name":"test project 2",
                  "description":"",
                  "image_url":"",
                  "timezone":"UTC",
                  "owner":15,
                  "created_by":15,
                  "created_at":"2019-02-21 18:36:55",
                  "updated_at":"2019-02-21 18:36:55",
                  "pivot":{
                     "user_id":1,
                     "project_id":8
                  }
               }
            ]
         }
      }
   }
};
  }
})
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

tfoot th {
  font-weight: normal;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}
<script src="https://unpkg.com/[email protected]"></script>

<div id="app">
  <table>
    <thead>
      <tr>
        <th>Project Name</th>
        <th>Type</th>
      </tr>
    </thead>
    <tfoot>
      <tr v-for="project in info.response.data.user.assigned_projects" :key="project.id">
        <th>{{ project.name }}</th>
        <th>{{ project.id }}</th>
      </tr>
    </tfoot>
  </table>
</div>

To simplify your template for readability, a computed property should be considered here:

// template
<tr v-for="project in projects" :key="project.id">...</tr>

// script
computed: {
  projects() {
    // empty array if `this.info` is not yet defined
    return this.info && this.info.response.data.user.assigned_projects || [];
  }
}


new Vue({
  el: '#app',
  data() {
    return {
      info: null
    }
  },
  computed: {
    projects() {
      return this.info && this.info.response.data.user.assigned_projects || [];
    }
  },
  mounted() {
    this.info = {
   "response":{
      "error":{
         "error_code":0,
         "error_msg":"",
         "msg":""
      },
      "data":{
         "user":{
            "id":1,
            "email":"[email protected]",
            "first_name":null,
            "last_name":null,
            "photo_url":null,
            "organisation":null,
            "own_projects":[
            ],
            "assigned_projects":[
               {
                  "id":10,
                  "name":"test project",
                  "description":"cool stuff",
                  "image_url":"http://image_url",
                  "timezone":"UTC",
                  "owner":15,
                  "created_by":15,
                  "created_at":"2019-02-26 16:37:03",
                  "updated_at":"2019-02-26 16:37:03",
                  "pivot":{
                     "user_id":1,
                     "project_id":10
                  }
               },
               {
                  "id":8,
                  "name":"test project 2",
                  "description":"",
                  "image_url":"",
                  "timezone":"UTC",
                  "owner":15,
                  "created_by":15,
                  "created_at":"2019-02-21 18:36:55",
                  "updated_at":"2019-02-21 18:36:55",
                  "pivot":{
                     "user_id":1,
                     "project_id":8
                  }
               }
            ]
         }
      }
   }
};
  }
})
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

tfoot th {
  font-weight: normal;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}
<script src="https://unpkg.com/[email protected]"></script>

<div id="app">
  <table>
    <thead>
      <tr>
        <th>Project Name</th>
        <th>Type</th>
      </tr>
    </thead>
    <tfoot>
      <tr v-for="project in projects" :key="project.id">
        <th>{{ project.name }}</th>
        <th>{{ project.id }}</th>
      </tr>
    </tfoot>
  </table>
</div>

Upvotes: 2

Related Questions