How to filter and show matching result?

Hi I am making a datatable where I need to filter out a user by name, lastname, uuid, phone, jobtitle and email. I have been looking around on diffrent forums to see if I could find some code I could use. But to no success. I am really new to Vue also. Is there anyone here that can help me with this or atleast give me hints or tips on what I shall look for. Below is the code:

<body>
<div id="app">
<table class="table is-bordered is-fullwidth">
        <thead>
            <tr>
                <!--Rubriker för tabellkolummer-->
                <th>
                    ID&nbsp;
                    <a @click="sorteraStigande('uuid')">
                        <i class="fas fa-angle-up"></i>
                    </a>
                    <a @click="sorteraFallande('uuid')">
                        <i class="fas fa-angle-down"></i>
                    </a>
                </th>
                <th>
                    Förnamn&nbsp;
                    <a @click="sorteraStigande('firstName')">
                        <i class="fas fa-angle-up"></i>
                    </a>
                    <a @click="sorteraFallande('firstName')">
                        <i class="fas fa-angle-down"></i>
                    </a>
                </th>
                <th>
                    Efternamn&nbsp;
                    <a @click="sorteraStigande('lastName')">
                        <i class="fas fa-angle-up"></i>
                    </a>
                    <a @click="sorteraFallande('lastName')">
                        <i class="fas fa-angle-down"></i>
                    </a>
                </th>
                <th>
                    Telefonnummer&nbsp;
                    <a @click="sorteraStigande('phone')">
                        <i class="fas fa-angle-up"></i>
                    </a>
                    <a @click="sorteraFallande('phone')">
                        <i class="fas fa-angle-down"></i>
                    </a>
                </th>
                <th>
                    E-postadress&nbsp;
                    <a @click="sorteraStigande('email')">
                        <i class="fas fa-angle-up"></i>
                    </a>
                    <a @click="sorteraFallande('email')">
                        <i class="fas fa-angle-down"></i>
                    </a>
                </th>
                <th>
                    Yrke&nbsp;
                    <a @click="sorteraStigande('jobTitle')">
                        <i class="fas fa-angle-up"></i>
                    </a>
                    <a @click="sorteraFallande('jobTitle')">
                        <i class="fas fa-angle-down"></i>
                    </a>
                </th>
                <th>
                    <input v-model="search" class="input w260px" type="text" placeholder="Filtrera poster">
                </th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="user in sortedUsers" >
                <template v-if="user.uuid==edituuid">
                    <td>
                        <input type="text" v-model="user.uuid" class="input" disabled>
                    </td>
                    <td>
                        <input type="text" v-model="user.firstName" class="input">
                    </td>
                    <td>
                        <input type="text" v-model="user.lastName" class="input">
                    </td>
                    <td>
                        <input type="text" v-model="user.phone" class="input">
                    </td>
                    <td>
                        <input type="text" v-model="user.email" class="input">
                    </td>
                    <td>
                        <input type="text" v-model="user.jobTitle" class="input">
                    </td>
                    <td>
                        <button class="button w130px has-text-left is-dark" @click="uppdaterapost(user.uuid)">
                            <i class="fas fa-save"></i>
                            &nbsp;Spara
                        </button>
                        <button class="button w130px is-pulled-right has-text-left is-dark"
                            @click="tabortrad(user.uuid)">
                            <i class="fas fa-minus-square">
                            </i>&nbsp;Ta bort rad
                        </button>
                    </td>
                </template>
                <template v-else>
                    <td>
                        <input type="text" v-model="user.uuid" class="input" disabled>
                    </td>
                    <td>
                        <input type="text" v-model="user.firstName" class="input" disabled>
                    </td>
                    <td>
                        <input type="text" v-model="user.lastName" class="input" disabled>
                    </td>
                    <td>
                        <input type="text" v-model="user.phone" class="input" disabled>
                    </td>
                    <td>
                        <input type="text" v-model="user.email" class="input" disabled>
                    </td>
                    <td>
                        <input type="text" v-model="user.jobTitle" class="input" disabled>
                    </td>
                    <td>
                        <button class="button w130px has-text-left is-dark" @click="redigerapost(user.uuid)">
                            <i class="fas fa-pen-square">
                            </i>
                            &nbsp;Redigera
                        </button>
                        <button class="button w130px is-pulled-right has-text-left is-dark"
                            @click="tabortrad(user.uuid)">
                            <i class="fas fa-minus-square">
                            </i>
                            &nbsp;Ta bort rad
                        </button>
                    </td>
                </template>
            </tr>
            <th colspan="7">
                <button class="button w285px is-pulled-right is-dark" @click='laggtillrad(users)'>
                    <i class="fas fa-plus-square">
                    </i>&nbsp;Lägg till en ny rad
                </button>
            </th>
        </tbody>
    </table>
</div>
<script>
    
    faker.locale = "sv";
    //Skapar slumpmässiga användardata
    let randomusers = [];
    for (i = 0; i < 4; i++) {
        let uuid = faker.random.uuid().substring(0, 5);
        let firstName = faker.name.firstName();
        let lastName = faker.name.lastName();
        let phone = faker.phone.phoneNumber();
        let email = faker.internet.email();
        let jobTitle = faker.name.jobTitle();
        randomusers.push({
            'uuid': uuid, 'firstName': firstName, 'lastName': lastName,
            'phone': phone, 'email': email, 'jobTitle': jobTitle
        });
    }
    new Vue({
        el: '#app',
        data: {
            users: randomusers,
            sortkey: '',
            sortorder: 'asc',
            edituuid: '',
            search: '',
        },
        methods: {
            //Uppdaterar posten efter att en redigering har gjorts
            uppdaterapost: function (vilketuuid) {
                this.edituuid = '';
                this.$set(this.$data, 'users', randomusers);
            },
            //Redigerar raden där användaren trycker på "Redigera" knappen och ersätts med en spara knapp
            redigerapost: function (vilketuuid) {
                this.edituuid = vilketuuid;
            },
            //Sorterar kolumnen i stigande ordning 
            sorteraStigande: function (vilkensortering) {
                if (this.sortkey == vilkensortering) {
                    if (this.sortorder == 'desc') {
                        this.sortorder = 'asc'
                    }
                }
                this.sortkey = vilkensortering;
            },
            //Sorterar kolumnen i fallande ordning
            sorteraFallande: function (vilkensortering) {
                if (this.sortkey == vilkensortering) {
                    if (this.sortorder == 'asc') {
                        this.sortorder = 'desc'
                    }
                }
                this.sortkey = vilkensortering;
            },
            //Lägger till en ny rad längst ner i tabellen
            laggtillrad: function (event) {
                var nyrad = {
                    uuid: faker.random.uuid().substring(0, 5),
                    firstName: faker.name.firstName(),
                    lastName: faker.name.lastName(),
                    phone: faker.phone.phoneNumber(),
                    email: faker.internet.email(),
                    jobTitle: faker.name.jobTitle(),
                };
                this.users.push(nyrad)
            },
            /*Tar bort raden där användaren trycker på "Ta bort" knappen funktionen
            filtrerar bort poster som inte har uuid = vilketuuid*/
            tabortrad: function (vilketuuid) {
                this.users = _.filter(this.users, function (o) { return o.uuid !== vilketuuid; });
            },
            searching: function () {
                _.filter($vm0.users, function (o) { return o.lastName.toLowerCase().includes($vm0.search.toLowerCase()) });
            }
        },
        computed: {
            sortedUsers() {
                // Sorterar efter vad som finns i sortkey och med sorteringsordningen som finns i sortorder
                return _.orderBy(this.users, [this.sortkey], [this.sortorder]);
            }
        }
    })
</script>
Thanks for the help in advance.

First of all:
Code and comments in code are ALWAYS written in English. ALWAYS!!!

Content is content and code is code.

Regarding your problem:
If you are using ES6 you can use Array.filter and Array.sort to filter and sort tables in one run.

Filter: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
Sort: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

1 Like

That’s a weird rule. If half his team doesn’t speak english what good would that be?

I mean, if you asl him to present code in this forum in english to make sure more people can understand it I’m all for it, but your rule sounds a little more … universal? ^^

1 Like

And what if a new teammember joins the team that doesn’t speak their language, which is quiet common? Then they have to translate the whole code?

And all the keywords in the code are english too, so. It makes sense.

So the reasonf or your rule is that you want them to take into consideration a situation that they might know will not arise, but you want them to consider?

Look, you seem to mean well, but getting unsolicited advice like this comes across as condescending so maybe just assume that OP has reasons for doing what he does.

They can do what they want. It’s a recommendation.

I was thinking about writing it all in english. But sense it is just me and one other swedish person that looks at the code I have decied to write in swedish. Thanks for the answer :slight_smile:
I might change it all to english later on. Thanks again

Sorry, my language recommendation was not meant in a mean way.

No worries dont have to say you are sorry :slight_smile:

Small update:
So I have changed the way the sort function works. So now a new array is not created, it sorts in the same array. Might not look so good imo but it works for now. I have duplicated the following code

sorteraStigandeFornamn: function () { //Sorts the Fornamn(Firstname) kolumn in asc
                randomusers.sort(function (a, b) {
                    var firstNameA = a.firstName.toUpperCase(); // ignore upper and lowercase
                    var firstNameB = b.firstName.toUpperCase(); // ignore upper and lowercase
                    if (firstNameA < firstNameB) {
                        return -1;
                    }
                    if (firstNameA > firstNameB) {
                        return 1;
                    }
                });
            },
            //Sorts the Fornamn(Firstname) kolumn in desc
            sorteraFallandeFornamn: function () {
                randomusers.sort(function (b, a) {
                    var firstNameB = b.firstName.toUpperCase(); // ignore upper and lowercase
                    var firstNameA = a.firstName.toUpperCase(); // ignore upper and lowercase
                    if (firstNameB < firstNameA) {
                        return 1;
                    }
                    if (firstNameB > firstNameA) {
                        return -1;
                    }
                });
            }

I have put this code in three diffrent places it doesnt look good as I said but I dont know how to do it in another way. I have finally also made the filtering function to work with the following code:

filterdUser:function(){
                return this.users.filter((user)=>{
                    let fullstring= user.firstName.toLowerCase() +"#"+ user.lastName.toLowerCase() +"#"+
                    user.uuid.toLowerCase() +"#"+ user.phone.toLowerCase() +"#"+ 
                    user.email.toLowerCase() +"#"+ user.jobTitle.toLowerCase();
                    //return user.firstName.match(this.search);
                    return fullstring.match(this.search.toLowerCase());
                });

I found a video on youtube to solve the filtering function:
Vue JS 2 Tutorial #36 - Custom Search Filter

Thanks again for the answer :slight_smile: