Как получить и отобразить конкретные значения из массива объектов в БД MySQL?

Question

У меня есть массив пользователей, который содержит объекты для каждого пользователя с полным именем, идентификатором, ролью и т. Д. У указанных пользователей есть параметр: user_machines, это массив, заполненный объектами сам по себе, и я хочу получить и отобразить конкретные значения от каждого объекта этого массива. Более конкретно, это выглядит так: Я отображаю всех пользователей, и если у пользователя есть массив user_machines с объектами в нем, я хочу отобразить, например, machine_name указанного объекта.

В настоящее время мой запрос выглядит так:

class UserController extends Controller
{
    public function index()
    {
        $users = User::with('userMachines')->get();
        return response()->json(
            [
                'status' => 'success',
                'users' => $users->toArray()
            ],
            200
        );
    }

Он получает всю необходимую мне информацию, но я не знаю, как ее отсортировать. Вот мой миксин getUsers:

export const getUsers = {
  methods: {
    getUsers() {
      axios
        .get("users")
        .then(res => {
          this.users = res.data.users;
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};

А вот мой метод инициализации:

 methods: {
    initialize() {
      this.users = [
        {
          id: "",
          full_name: "",
          username: "",
          role: "",
          division: "",
          center: "",
          machines: "",
          user_machines: []
        }
      ];
    },

Вот таблица данных:

            <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>

Вот как это выглядит в запросе get в 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
}
}

Я был бы очень признателен за помощь и несколько советов о том, что читать на эту тему от более опытных разработчиков. Я использую Laravel, Vue, MySQL. Заранее спасибо!

Answer 1

Если вы хотите отобразить только machine_name, вам нужно будет либо просмотреть их, используя v-for :

replace

<td class="text-xs-left">{{ props.item.user_machines[0].machine_name }}</td>

с

<td class="text-xs-left">
    <ul>
        <li v-for="user_machine in props.item.user_machines" v-text="user_machine.machine_name"></li>
    </ul>
</td>

Очевидно, что вы можете использовать другую разметку вместо неупорядоченного списка (</ul>), если хотите.

---

Или, если вы хотите отобразить только первое, вы можете сделать что-то вроде:

<td class="text-xs-left">{{ props.item.user_machines[0].machine_name }}</td>