I have an array of users that contains objects for each user with full name, id, role, etc. Said users have a paramater: user_machines that it's array filled with objects in itself, and i want to get & display specific values from each object of this array. More specifically, it goes like this: I display all users, and if the user has user_machines array with objects in it, i want to display for example the machine_name of said object.
At this time, my query looks like this:
class UserController extends Controller
{
public function index()
{
$users = User::with('userMachines')->get();
return response()->json(
[
'status' => 'success',
'users' => $users->toArray()
],
200
);
}
It get's all the information i need, but i dont know how to sort it. Here's my getUsers mixin:
export const getUsers = {
methods: {
getUsers() {
axios
.get("users")
.then(res => {
this.users = res.data.users;
})
.catch(err => {
console.log(err);
});
}
}
};
And here's my initialization method:
methods: {
initialize() {
this.users = [
{
id: "",
full_name: "",
username: "",
role: "",
division: "",
center: "",
machines: "",
user_machines: []
}
];
},
Here's the Data Table:
<v-data-table
:headers="headers"
:items="users"
:key="users.id"
:search="search || radio"
hide-actions
class="elevation-1"
>
<template v-slot:items="props">
<td class="text-xs-left">
<v-avatar :size="30" color="grey lighten-4">
<img :src="avatar">
</v-avatar>
</td>
<td class="text-xs-left">{{ props.item.full_name }}</td>
<td class="text-xs-left">{{ props.item.role }}</td>
<td class="text-xs-left">{{ props.item.division }}</td>
<td class="text-xs-left">{{ props.item.center }}</td>
<td class="text-xs-left">{{ props.item.user_machines }}</td>
<td class="justify-right layout ml-3">
<v-spacer></v-spacer>
<v-btn color="#009af9" flat @click="editItem(props.item)">ВИЖ</v-btn>
</td>
</template>
<template v-slot:footer>
<td :colspan="headers.length">
<v-btn color="#009af9" class="getMoreButton" large dark>GET MORE</v-btn>
</td>
</template>
<template v-slot:no-data>
<v-alert
:value="true"
color="error"
icon="warning"
>Sorry, nothing to display here :(</v-alert>
<v-btn color="#009af9" @click="initialize">Reset</v-btn>
</template>
</v-data-table>
Here's how it looks in a get request in Telescope:
users: [
{
id: 1,
full_name: "SomeDude",
username: "SomeDude",
role: "admin",
division: "asdf",
center: "asdf",
created_at: "2019-05-25 10:24:17",
updated_at: "2019-05-25 10:24:17",
user_machines: [
{
id: 1,
machine_number: 2143,
machine_name: "FirstMachine",
machine_division: "FirstMachine"",
machine_center: "FirstMachine"",
machine_speed: "FirstMachine"",
created_at: "2019-05-25 10:24:17",
updated_at: "2019-05-25 10:24:17",
pivot: {
user_id: 1,
machine_id: 1
}
},
{
id: 2,
machine_number: 2241,
machine_name: "SecondMachine",
machine_division: "SecondMachine",
machine_center: "SecondMachine",
machine_speed: "SecondMachine",
created_at: "2019-05-25 10:24:17",
updated_at: "2019-05-25 10:24:17",
pivot: {
user_id: 1,
machine_id: 2
}
},
{
id: 3,
machine_number: 2341,
machine_name: "ThirdMachine",
machine_division: "ThirdMachine",
machine_center: "ThirdMachine",
machine_speed: "ThirdMachine",
created_at: "2019-05-25 10:24:17",
updated_at: "2019-05-25 10:24:17",
pivot: {
user_id: 1,
machine_id: 3
}
}
I would really appreciate some help and some directions on what to read on the subject from more expirienced developers. I'm using Laravel, Vue, MySQL. Thanks in advance!
