Visualizzazione dei risultati da 1 a 8 su 8
  1. #1

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

    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)

    })





  2. #2
    Moderatore di Programmazione L'avatar di alka
    Registrato dal
    Oct 2001
    residenza
    Reggio Emilia
    Messaggi
    24,465
    Il linguaggio JavaScript ha una sua sezione dedicata.
    Sposto la discussione nell'area corretta.
    MARCO BREVEGLIERI
    Software and Web Developer, Teacher and Consultant

    Home | Blog | Delphi Podcast | Twitch | Altro...

  3. #3
    Moderatore di Programmazione L'avatar di alka
    Registrato dal
    Oct 2001
    residenza
    Reggio Emilia
    Messaggi
    24,465
    Quote Originariamente inviata da andgiaim1974 Visualizza il messaggio
    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.
    MARCO BREVEGLIERI
    Software and Web Developer, Teacher and Consultant

    Home | Blog | Delphi Podcast | Twitch | Altro...

  4. #4
    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)
    }

    })

    Ultima modifica di andgiaim1974; 08-05-2023 a 12:07

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

  6. #6
    Moderatore di Programmazione L'avatar di alka
    Registrato dal
    Oct 2001
    residenza
    Reggio Emilia
    Messaggi
    24,465
    Quote Originariamente inviata da andgiaim1974 Visualizza il messaggio
    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.
    MARCO BREVEGLIERI
    Software and Web Developer, Teacher and Consultant

    Home | Blog | Delphi Podcast | Twitch | Altro...

  7. #7
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    Ciao
    Quote 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.

    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  8. #8
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    319
    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>

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.