Errore con funzione di filter e includes "TypeError: element.includes is not a function"

**andgiaim1974** · 06-05-2023, 21:30

Ciao ragazzi, Sono nuovo di Stackoverflow e ho bisogno di supporto. In pratica ho creato due form in html. Il primo serve a inserire due valori (nome e cognome) da due input text con una funzione che popola un array ed inserisce i dati in una tabella. Il secondo serve a filtrare i dati che che popolano l'array e quindi anche la tabella L'errore che mi appare in console.log alla riga 32 è il seguente: TypeError: element.includes is not a function

Potete aiutarmi che sono all'esaurimento?
Grazie mille in anticipo.

Di seguito la parte di codice javascript dove mi da l'errore:

document.querySelector('#formFilter').addEventListener('submit', (event2) => {
event2.preventDefault();
constsearchField = document.querySelector('#search-field').value;

letfilteredList = listaStudenti.filter((element) => {
returnelement.includes(searchField)
})
popolaTabella(filteredList)

})

**alka** · 07-05-2023, 22:50

Il linguaggio JavaScript ha una sua sezione dedicata.
Sposto la discussione nell'area corretta.

**alka** · 07-05-2023, 22:51

Originariamente inviata da andgiaim1974

L'errore che mi appare in console.log alla riga 32 è il seguente: TypeError: element.includes is not a function

In merito al problema, quotando la tua segnalazione di cui sopra, stai chiamando la funzione sul singolo elemento dell'array, e non sull'array.

**andgiaim1974** · 08-05-2023, 12:03

Ciao Alka,
Mi scuso per l'errore.

Di seguito il codice più in dettaglio:

classStudente {
constructor(nome, cognome) {
this.nome=nome;
this.cognome=cognome;
}
}

letlistaStudenti= [];

document.addEventListener('DOMContentLoaded', () => {
document.querySelector('#formInserimentoStudenti').addEventListener('submit', (event) => {
event.preventDefault();

letnome=document.querySelector('#nome').value;
letcognome=document.querySelector('#cognome').value;

letnuovaPersona=newStudente(nome, cognome);

listaStudenti.push(nuovaPersona);
popolaTabella(listaStudenti)
})

document.querySelector('#formFilter').addEventListener('submit', (event2) => {
event2.preventDefault();
constsearchField=document.querySelector('#search-field').value;

letfilteredList=listaStudenti.filter((element) => {
returnelement.includes(searchField)
})
popolaTabella(filteredList)

})

functionpopolaTabella(studenti) {
lettbodyContent='';

for (letstudentofstudenti) {
tbodyContent+=`
<tr>
<td>${student.nome}</td>
<td>${student.cognome}</td>
</tr>
`
}

consttbody=document.querySelector('#listaStudenti');
tbody.innerHTML=tbodyContent;
console.log(tbody)
}

})

**andgiaim1974** · 08-05-2023, 12:11

Ciao Alka,
A me sembra che listaStudenti sia un array.
Infatti ho dichiarato un array vuoto
let listaStudenti = [];

**alka** · 08-05-2023, 17:32

Originariamente inviata da andgiaim1974

Ciao Alka,
A me sembra che listaStudenti sia un array.
Infatti ho dichiarato un array vuoto
let listaStudenti = [];

Non è su listaStudenti che stai invocando il metodo includes():

codice:

let filteredList = listaStudenti.filter((element) => {
  return element.includes(searchField)
})

Vedi l'istruzione al centro del blocco sopra riportato.

P.S.: non formattare il codice in quel modo con tutti quei colori, poiché sono totalmente illeggibili oltreché privi di spazi necessari.

**KillerWorm** · 08-05-2023, 17:46

Ciao

Originariamente inviata da alka

P.S.: non formattare il codice in quel modo con tutti quei colori, poiché sono totalmente illeggibili oltreché privi di spazi necessari.

penso sia frutto di un copiaincolla da qualche code-editor.

Giusto un consiglio:
@andgiaim1974, quando posti del codice sul forum, utilizza gentilmente gli appositi tag di formattazione (puoi usare il pulsante [#] tra gli strumenti dell'editor messaggi).
Se fai un copiaincolla, normalmente è sufficiente premere CTRL+MAIUSC+V per incollare il testo ripulito da eventuali formattazioni originali.

**ninja72** · 08-05-2023, 18:49

Come dice Alka l'errore sta in quel blocco di codice, praticamente stai cercando di applicare includes su un oggetto e non su un array.

ti riporto un esempio sperando di aver capito il tuo problema.

codice:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form id="formInserimentoStudenti">
        <input type="text" name="search-field" id="search-field">
        <button id="btn-filter">Cerca Studente</button>
        <br><br>
        <input type="text" name="nome" id="nome">
        <input type="text" name="cognome" id="cognome">
        <button id="btn-student" type="submit">Inserisci studente</button>

    </form>

    <table>
        <thead>
            <tr>
                <th>Nome</th>
                <th>Cognome</th>
            </tr>
        </thead>
        <tbody id="listaStudenti"></tbody>
    </table>
    
    <script>
        class Studente {
            constructor(nome, cognome) {
                this.nome = nome
                this.cognome = cognome
            }
        }

        const listaStudenti = []

        document.addEventListener('DOMContentLoaded', () => {
            const btnStudent = document.querySelector('#btn-student')
            const inputFilter = document.querySelector('#search-field')
            const btnFilter = document.querySelector('#btn-filter')
            const tbody = document.querySelector('#listaStudenti')
            const nomeStudente = document.querySelector('#nome')
            const cognomeStudente = document.querySelector('#cognome')

            btnStudent.addEventListener('click', (e) => {
                e.preventDefault()
                if (nomeStudente.value == '' || cognomeStudente.value == '') return
                listaStudenti.push(new Studente(nomeStudente.value, cognomeStudente.value))
                popolaTabella(listaStudenti)
                nomeStudente.value = ''
                cognomeStudente.value = ''
            })

            btnFilter.addEventListener('click', (e) => {
                e.preventDefault()
                const filteredList = listaStudenti.filter(obj => {
                    return inputFilter.value !== '' ? (obj.nome == inputFilter.value) : listaStudenti
                })
                popolaTabella(filteredList)
            })

            function popolaTabella(studenti) {
                let tbodyContent = ''

                for (let student of studenti) {
                    tbodyContent += `
                <tr>
                <td>${student.nome}</td>
                <td>${student.cognome}</td>
                </tr>
                `
                }
                tbody.innerHTML = tbodyContent
            }

        })

    </script>
</body>

</html>

Discussione: Errore con funzione di filter e includes "TypeError: element.includes is not a function"

Strumenti discussione

Ricerca discussione

Visualizza

Errore con funzione di filter e includes "TypeError: element.includes is not a function"

Tag per questa discussione

Permessi di invio