Popolare select da array

**ffw** · 13-12-2021, 11:00

Giorno a tutti.
Mi sto imbattendo in un grosso problema (per me) con javascript.
Sto tentando di popolare un <select id='brand_model'> in base alla scelta di un altro id='brand'
Praticamente mi genera un array, ma non si popola

Il mio array
codice:
{
"Acer":[
{"ID":"4","Name":"Lorem iosum"}
],
"Alcatel":[
{"ID":"5","Name":"Lorem iosum"}
],
"Apple":[
{"ID":"2","Name":"Iphone 5"},
{"ID":"12","Name":"Iphone 6"},
{"ID":"13","Name":"Iphone 7"},
{"ID":"14","Name":"Iphone 6 Plus"},
{"ID":"15","Name":"Iphone 6S"},
{"ID":"16","Name":"Iphone 6s Plus"}
],
"dasda":[
{"ID":"6","Name":"Qualcosa"}
],
"Samsung":[
{"ID":"1","Name":"Galaxy S10 Plus"},
{"ID":"8","Name":"Galaxy S10"},
{"ID":"9","Name":"Galaxy S10 Lite"},
{"ID":"10","Name":"Galaxy S7 Edge"},
{"ID":"11","Name":"Galaxy S8 plus"}
],
"Test":[
{"ID":"7","Name":"Model"}
],
"Xiaomi":[
{"ID":"3","Name":"Lorem iosum"}
]
};

Lo script che dovrebbe popolare le opzioni

codice:

<script type='text/javascript'>
function brand_choose(sel) {
	var brd = sel.options[sel.selectedIndex].text;
	var arr = <?= json_encode($brands) ?>;
	var options = arr[brd];
	document.getElementById("danni").value =  options[0]["ID"] + " - " + options[0]["Name"];


	var dropdown = document.getElementById("brand_model");
	if (dropdown) {
		for (var i=0; i < options.length;++i){    
			addOption(dropdown, options[i]["Name"], options[i]["ID"]);
		}
	}


	addOption = function(selectbox, text, value) {
		var optn = document.createElement("OPTION");
		optn.text = text;
		optn.value = value;
		selectbox.options.add(optn);  
	}
	
	
}


</script>

**ninja72** · 13-12-2021, 12:40

Non so se ho capito bene, prova a vedere se questo esempio fa al caso tuo.
In questo esempio i dati li ho messi in un file json esterno che prelevo in modo asincrono con fetch.

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>
        <select id="brand"></select>
        <br />
        <select id="brand_model"></select>

        <script>
            // prettier-ignore
            const initApp = async () => {
                const brand = document.getElementById('brand')
                const brandModel = document.getElementById('brand_model')

                const objData = await fetch("data.json").then(res =>res.json())

                const fillBrandModel = ()=>{
                    const selectKey = brand.value
                    brandModel.textContent = ''
                    for (const key in objData) {
                        
                        if (selectKey === key){
                        objData[key].forEach(text => {
                            const option = document.createElement('option')
                            option.textContent = text['Name']
                            brandModel.appendChild(option)
                            })
                        }
                    }
                }

                const fillBrand = (()=>{

                    Object.keys(objData).forEach(key => {
                        const option = document.createElement('option')
                        option.textContent =  key
                        brand.appendChild(option)
                    })
                    fillBrandModel()
                })()

                brand.addEventListener("change",fillBrandModel)
            }

            document.addEventListener("DOMContentLoaded", initApp)
        </script>
    </body>
</html>

**ffw** · 13-12-2021, 14:06

Niente da fare. Provato anche così, ma non crea le options.

codice:

        <script>
            // prettier-ignore
            const initApp = async () => {
                const brand = document.getElementById('brand')
                const brandModel = document.getElementById('brand_model')


                const objData = await fetch(<?= json_encode($brands) ?>).then(res =>res.json())


                const fillBrandModel = ()=>{
                    const selectKey = brand.value
                    brandModel.textContent = ''
                    for (const key in objData) {
                        
                        if (selectKey === key){
                        objData[key].forEach(text => {
                            const option = document.createElement('option')
                            option.textContent = text['Name']
                            brandModel.appendChild(option)
                            })
                        }
                    }
                }


                const fillBrand = (()=>{


                    Object.keys(objData).forEach(key => {
                        const option = document.createElement('option')
                        option.textContent =  key
                        brand.appendChild(option)
                    })
                    fillBrandModel()
                })()


                brand.addEventListener("change",fillBrandModel)
            }


            document.addEventListener("DOMContentLoaded", initApp)
        </script>

Nel codice sorgete l'array c'è

codice:



        <script>


            // prettier-ignore


            const initApp = async () => {


                const brand = document.getElementById('brand')


                const brandModel = document.getElementById('brand_model')





                const objData = await fetch({"Acer":[{"ID":"4","Name":"Lorem iosum"}],"Alcatel":[{"ID":"5","Name":"Lorem iosum"}],"Apple":[{"ID":"2","Name":"Iphone 5"},{"ID":"12","Name":"Iphone 6"},{"ID":"13","Name":"Iphone 7"},{"ID":"14","Name":"Iphone 6 Plus"},{"ID":"15","Name":"Iphone 6S"},{"ID":"16","Name":"Iphone 6s Plus"}],"dasda":[{"ID":"6","Name":"Qualcosa"}],"Samsung":[{"ID":"1","Name":"Galaxy S10 Plus"},{"ID":"8","Name":"Galaxy S10"},{"ID":"9","Name":"Galaxy S10 Lite"},{"ID":"10","Name":"Galaxy S7 Edge"},{"ID":"11","Name":"Galaxy S8 plus"}],"Test":[{"ID":"7","Name":"Model"}],"Xiaomi":[{"ID":"3","Name":"Lorem iosum"}]}).then(res =>res.json())





                const fillBrandModel = ()=>{


                    const selectKey = brand.value


                    brandModel.textContent = ''


                    for (const key in objData) {





                        if (selectKey === key){


                        objData[key].forEach(text => {


                            const option = document.createElement('option')


                            option.textContent = text['Name']


                            brandModel.appendChild(option)


                            })


                        }


                    }


                }





                const fillBrand = (()=>{





                    Object.keys(objData).forEach(key => {


                        const option = document.createElement('option')


                        option.textContent =  key


                        brand.appendChild(option)


                    })


                    fillBrandModel()


                })()





                brand.addEventListener("change",fillBrandModel)


            }





            document.addEventListener("DOMContentLoaded", initApp)


        </script>

**ninja72** · 13-12-2021, 15:38

Non capisco perchè vuoi mescolare javascript con php, se la fonte dei dati proviene da un database che viene letto in php o altro, puoi sempre utilizzare fetch di javascript nel modo appropriato, non hai specificato come viene prelevato il dato in questione.

**ffw** · 13-12-2021, 17:09

Il dato viene prelevato dal DB in un array PHP ripreso poi da javascript
A me serve filtrare i modelli di un Brand onChange del <SELECT> id='brand' -> popola id='brand_model' con i rispettivi modelli.
Per farti capire, una specie di comuni / città

**KillerWorm** · 13-12-2021, 19:35

Il dato viene prelevato dal DB in un array PHP ripreso poi da javascript

Ciao, in questo caso non hai bisogno di fare delle nuove richieste al server dal momento che i dati sono già disponibili sulla pagina, per cui il metodo fetch non è necessario.

Il tuo codice iniziale dovrebbe essere sufficiente per fare quanto richiesto ma ci sono vari dettagli che qui non hai indicato, per cui è difficile capire cosa sta andando storto, se non andando per ipotesi.

Magari prova a postare il link della pagina, se è accessibile pubblicamente online.

**ffw** · 13-12-2021, 19:41

Se ci hai fatto caso, popolo un campo text per prova con il primo valore dell'array e funziona correttamente. Solo quando va in loop non riesce a creare le OPTION

codice:

document.getElementById("danni").value =  options[0]["ID"] + " - " + options[0]["Name"];

Come potrei controllare (magari un print) per capire se nel loop ci sono i dati ?

**KillerWorm** · 13-12-2021, 20:31

Magari prova a postare il link della pagina, se è accessibile pubblicamente online.

Te lo chiedo: puoi?

Come potrei controllare (magari un print) per capire se nel loop ci sono i dati ?

Intanto potresti verificare se nella console web del tuo browser non ti saltano fuori errori di script; poi, per eseguire un debug, puoi usare console.log()

**ffw** · 13-12-2021, 20:36

ecco qui il link. ci provo con console.log

https://unitre.ng-lab.cloud/laboratory/newrepair/

**KillerWorm** · 13-12-2021, 23:03

ecco qui il link. ci provo con console.log

Bene... vedo anche che hai risolto, giusto?

Discussione: Popolare select da array

Strumenti discussione

Ricerca discussione

Visualizza

Popolare select da array

Permessi di invio


<script>
	// prettier-ignore
	const initApp = async () => {
	const brand = document.getElementById('brand')
	const brandModel = document.getElementById('brand_model')

	const objData = await fetch({"Acer":[{"ID":"4","Name":"Lorem iosum"}],"Alcatel":[{"ID":"5","Name":"Lorem iosum"}],"Apple":[{"ID":"2","Name":"Iphone 5"},{"ID":"12","Name":"Iphone 6"},{"ID":"13","Name":"Iphone 7"},{"ID":"14","Name":"Iphone 6 Plus"},{"ID":"15","Name":"Iphone 6S"},{"ID":"16","Name":"Iphone 6s Plus"}],"dasda":[{"ID":"6","Name":"Qualcosa"}],"Samsung":[{"ID":"1","Name":"Galaxy S10 Plus"},{"ID":"8","Name":"Galaxy S10"},{"ID":"9","Name":"Galaxy S10 Lite"},{"ID":"10","Name":"Galaxy S7 Edge"},{"ID":"11","Name":"Galaxy S8 plus"}],"Test":[{"ID":"7","Name":"Model"}],"Xiaomi":[{"ID":"3","Name":"Lorem iosum"}]}).then(res =>res.json())

	const fillBrandModel = ()=>{
	const selectKey = brand.value
	brandModel.textContent = ''
	for (const key in objData) {

	if (selectKey === key){
	objData[key].forEach(text => {
	const option = document.createElement('option')
	option.textContent = text['Name']
	brandModel.appendChild(option)
	})
	}
	}
	}

	const fillBrand = (()=>{

	Object.keys(objData).forEach(key => {
	const option = document.createElement('option')
	option.textContent = key
	brand.appendChild(option)
	})
	fillBrandModel()
	})()

	brand.addEventListener("change",fillBrandModel)
	}

	document.addEventListener("DOMContentLoaded", initApp)
	</script>