Searching data by foreign key and display it in bootstrap-vue table

Question

Basing on this How to render custom data in Bootstrap-Vue Table component? I created this code:

assignDocuments(id) {
        const documents = this.$store.state.documentList.filter(e => e.user.idUser === id);
        console.log(documents);
        let i;
        for(i=0; i < documents.length;i++) {
          return documents[i] ? `${documents[i].filename}` : 'loading...';
        }

      }

but it doesn't work like I need... I need to display the names(filename) of all objects(in this case I have 2 objects in documents array) in array but now only name of first object is displayed in b-table.

EDIT:

B-table code:

<b-table ref="table" small striped hover :items="$store.state.userList" :fields="fields" head-variant="dark">
     <template v-slot:cell(indexNumber)="row">
       {{ row.item.indexNumber}}
     </template>

     <template v-slot:cell(name)="row">
       {{ row.item.name}}
     </template>

     <template v-slot:cell(surname)="row">
       {{ row.item.surname}}
     </template>

     <template v-slot:cell(specialization.specName)="row">
       {{ row.item.specialization.specName}}
     </template>

     <template v-slot:cell(yearbook)="row">
       {{ row.item.yearBook.startYear }}<b>/</b>{{ row.item.yearBook.endYear }}
     </template>

     <template v-slot:cell(details)="row">
       <b-button size="sm" @click="row.toggleDetails" class="mr-2">
         {{row.detailsShowing ? 'Ukryj' : 'Pokaż'}} Szczegóły
       </b-button>
     </template>
</b-table>

Fields:

fields:[
            {
              key: 'indexNumber',
              label: 'Numer indeksu'
            },
            {
              key: 'name',
              label: 'Imię'
            },
            {
              key: 'surname',
              label: 'Nazwisko',
            },
            {
              key: 'specialization.specName',
              label: 'Kierunek',
            },
            {
              key: 'yearBook',
              label: 'Rocznik',
            },
            {
              key: 'idUser',
              label: 'Documents',
              formatter: 'assignDocuments'
            },
            {
              key: 'details',
              label: 'Szczegóły',
            },
          ],

Answer 1

It's because in your function you are returning after the first iteration of your loop. You instead need to get all the file names, and then return:

In the example that you shared, they are only assigning one value; the first/ last name as a string. In your case, it appears that you have multiple documents that could be related to a single row in the table.

Try changing your code to return all the docs:

assignDocuments(id) {
  const documents = this.$store.state.documentList.filter(e => e.user.idUser === id);
  console.log(documents);

  let fileNames = [];

  // Get the file name for each doc and put into our array
  documents.forEach(elem => fileNames.push(elem.filename));

  // Return the file names as a concatenated string
  return filesNames.length > 0 ? fileNames.join() : 'loading...';

}

Edit:

Based on your comment, I have updated so that you can place this in buttons later on! What you could do is utilize the same function, and then dynamically create your buttons based on the docs that you have for that row.

<template>
  <div>
    <b-table :items="someTableItems" :fields="fields">
      <button v-for="(doc, index) in assignDocuments(someIdHere)" 
              :key="`docBtn-${index}`"
              :class="doc.cssClassObject">
         {{ doc.filename }}
      </button>
    </b-table>
  </div>
</template>

assignDocuments(id) {
  const documents = this.$store.state.documentList.filter(e => e.user.idUser === id);
  console.log(documents);

  let files= [];

  // Get the file name for each doc and put into our array
  documents.forEach(elem => {
    const isAccepted = elem.status === "accepted";

    files.push({
      status: elem.status, 
      filename: elem.filename, 
      cssClassObject : { accepted: isAccepted, rejected: !isAccepted }
    });
  });

  // Return the files as an array
  return files.length > 0 ? files : 'loading...';

}