Problema associazione tabs/oggetto array

[fradamma]

Ciao a tutti,
velocemente vi espongo il mio problema: devo rendere dinamica una pagina web popolandola con dei dati che tirerò su da un file json (avevo pensato di farlo con jQuery con il metodo "$.ajax();"). Nello specifico il problema è che devo associare il tutto ad un menu a tabs (tutti i tab devono essere dinamici, niente html fisso e statico!). Ancor di più nello specifico:

Avrò un JSON simile al seguente (dove per "altri dati" si intendono altre informazioni che verranno tirate su nella stessa tabella di riferimento):

{
    "model": {
        "competizioni": [
            {
                "competizioneId": 1,
                "nome": "serieA",
                  altri dati......
            },
            {
                "competizioneId": 2,
                "nome": "serieB",
                  altri dati......
            },
            {
                "competizioneId": 3,
                "nome": "liga",
                  altri dati......
            },
            {
                "competizioneId": 4,
                "nome": "premier",
                  altri dati......
            }
        ]
    }
}

Avendo questo Json come è possibile associare la competizione 1 al primo tab del menu, la competizione 2 al tab 2, 3 3, 4 4 ecc... ??? Il tutto è in ordine di comparsa nel json (chi lo produce è un esterno non lo gestirò io quindi se ora c'è seriaA, domani potrebbe esserci premier e così via).
Potete darmi una mano?
Grazie anticipatamente!

 

[criric]

Ciao, per leggere il file json che hai postato puoi provare questo esempio

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
    $.getJSON("json.json",function(data){  
        $("#tabs").append("<ul>");
        $.each(data.model.competizioni, function(k,v){ 
            $("#tabs ul").append("<li onclick='alert(\"" + v.competizioneId + "\")'>" + v.nome + "</li>");
        })
        $("#tabs").append("</ul>");
    })
</script>
<div id="tabs"></div>

da qui ad ottenere quello che vuoi dovrai lavorarci ancora un po ma puo essere un buon inizio
buon lavoro
sposto in jquery

 

[Longo8]

Non vorrei dire una cretinata ma lo dovresti fare dalla pagina che richiami con ajax ordinando i dati che vengono mandati alla pagina chiamante nel modo che ti è più comodo. Quindi per ordinarli devi farlo con php (se usi php) dalla pagina chiamata.

 

[fradamma]

Grazie ragazzi, però ho ancora dei dubbi:

x Ciric: lo script che mi hai postato tu è utilissimo grazie, però il mio problema è a monte. Ti spiego meglio: il json sarà sempre lo stesso (strutturalmente dico non per quanto riguarda i dati) ma io non posso creare dei tabs del menu statici perchè una settimana ce ne possono essere 8, la successiva 6 e così via...quindi devo riuscire a far "capire" alla funzione che il primo oggetto all'interno dell'array deve creare un tab posizionato al primo posto, un secondo al secondo ecc...anche perchè chi gestisce il json può decidere che una settimana ci sia al primo tab la serieB e non la serieA per esempio. Cmq allego un jpeg per farvi capire meglio...

x Longo8: purtroppo la pagina che richiamo sarà sicuramente un .json (non ho facoltà di scelta in tal senso). Il tutto deve avvenire lato front-end.

 

[criric]

a parte il div che contiene la lista non c'è altro di statico nello script che ti ho postato
considerando che il tuo json sia cosi

{
    "model": {
        "competizioni": [
        {
            "competizioneId": 1,
            "nome": "serieA",
            "partite": ["partita1","partita2","partita3"]
        },
        {
            "competizioneId": 2,
            "nome": "serieB",
            "partite": ["partita1","partita2","partita3","partita4"]
        },
        {
            "competizioneId": 3,
            "nome": "liga",
            "partite": ["partita1","partita2","partita3"]
        },
        {
            "competizioneId": 4,
            "nome": "premier",
            "partite": ["partita1","partita2"]
        }
        ]
    }
}

prova a far girare questo

<style type="text/css">
    #tabs ul {
        margin:0;
        padding:0;
        list-style-type: none;
    }
    #partite {
        clear:both;
    }
    #tabs ul li {
        float: left;
        margin:0 8px;
    }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
    $.getJSON("json.json",function(data){  
        $("#tabs").append("<ul>");
        $.each(data.model.competizioni, function(k,v){ 
            $("#tabs ul").append("<li onclick='stampaPartite(\"" + v.competizioneId + "\")'>" + v.nome + "</li>");
        })
        $("#tabs").append("</ul>");
    })
    function stampaPartite(competizione){
        $("#partite").html("");
        $.getJSON("json.json",function(data){  
            $.each(data.model.competizioni, function(k,v){ 
                if(v.competizioneId == competizione) {
                    $.each(v.partite, function(x,y){
                        $("#partite").append("<p><a href='#'>" + y + "</a></p>");                        
                    })
                }                
            })
        })
    }
</script>
<div id="tabs"></div><div id="partite"></div>

è la prima cosa che mi è venuta in mente , si puo ottimizzare

edit
leggo ora che hai un'altro json ... cambia poco : fai la chiamata al secondo file passando sempre l'id competizione

 

[fradamma]

Grazie!!!
sono quasi arrivato al "dunque" grazie alla tua soluzione
La prima chiamata $.getJson va bene ed i tab me li visualizza secondo l'ordine dell'array, l'unica cosa che non mi funziona è "stampaPartite", però modificandola nel modo seguente va bene:

function stampaPartite(competizione){
		   $("#partite").append("<ul>");
		   $.getJSON("json.json",function(data){  
		            $.each(data.model.competizioni, function(k,v){ 
		               if(v.competizioneId == competizione) {
		                  $.each(v.partite, function(x,y){
		                        $("#partite").append("<li><a href='#'>" + y + "</a></li>");                        
		                 })
		             }                
		        })
		 })
 }

In pratica creo due ul (uno per i tabs e il secondo per le partite) e li metto dentro <div id="tabs"></div> e <div id="partite"></div> però
sai per caso spiegarmi perchè "$("#partite").html("");" non ha funzionato?
Inoltre se posso chiederti delle spiegazioni più dettagliate (scusami sono rompente lo so :crying: )
vedendo il seguente tuo codice:

 $.each(data.model.competizioni, function(k,v){ 
            $("#tabs ul").append("<li onclick='stampaPartite(\"" + v.competizioneId + "\")'>" + v.nome + "</li>");
 })

vorrei capire un paio di cose ulteriori: ho capito che con un each cicli l'array (come se fosse un "for" in js) per arrivare al valore desiderato però perchè hai utilizzato il parametro "k" e secondo che significa nello specifico:
"onclick='stampaPartite(\"" + v.competizioneId + "\")' "


Grazie e scusate tutti per il disturbo!

 

[criric]

sai per caso spiegarmi perchè "$("#partite").html("");" non ha funzionato?

non ha funzionato in che senso? non ti ha cancellato il contenuto del div "partite"?

perchè hai utilizzato il parametro "k"

k sta per chiave v per valore, come in un ciclo php foreach vengono estratti entrambi i parametri

secondo che significa nello specifico: "onclick='stampaPartite(\"" + v.competizioneId + "\")' "

al click viene richiamata la funzione stampaPartite passandogli l'id della competizione come parametro

Grazie e scusate tutti per il disturbo!

nessun disturbo :fonzie:

 

[fradamma]

In realtà "$("#partite").html("");" non dovrebbe servire (o forse mi sbaglio...) perchè non mi interessa cancellare il contenuto html del div partita (che inizialmente è vuoto). Anzi tuttalpiù dovrei trovare il modo di far visualizzare sempre il contenuto del primo tab al caricamento della pagina (sempre indipendentemente dai contenuti) e non al click sul primo tab. Tu come faresti?

 

[criric]

pui richiamare la funzione stampaPartite al caricamento della pagina passandole direttamente l'id del primo tab

$(document).ready(function(){
                stampaPartite(1);
            })

Sei costretto a cancellare il contenuto ogni volta che richiami la funzione altrimenti le partite si accoderebbero a quelle del tab precedente

 

[fradamma]

Ciao, il codice va tutto bene, gli unici "problema" rimasti sono due: il primo è il più banale, ossia il solito inconveniente che succede quando clicchi sul link del tab e la pagina sale su all'inizio come se ricaricasse. Di solito risolvo questo problema con il canonico "return false" alla fine dell'evento click, però in questo caso non funziona perchè non c'è un evento click su un'ancora. Come posso ovviare a questo?
Il secondo problema è più complesso: associare l'id della singola partita stampata dalla funzione (è previsto oltre al nome della singola partita anche un id univoco per ogni partita identificato come un valore nell'oggetto) al caricamento di una seconda tabella con dati json presi da un'altro file. Come risolvereste?

Grazie e buona serata

Di seguito il codice:

<script>

	  $.getJSON("partite.json",function(data){  
	        $("#tabs").append("<ul class='tabs'>");
	        $.each(data.model.competizioni, function(k,v){ 
	            $("#tabs ul").append("<li onclick='stampaPartite(\"" + v.competizioneId + "\")'>" +"<a href='#'>"+ v.nome + "</a>"+ "</li>");
	        })
	        $("#tabs").append("</ul>");
          })
	
         function stampaPartite(competizione){
		    	$("#partite").html("");
		        $("#partite").append("<ul>");
		        $.getJSON("partite.json",function(data){  
	      	            $.each(data.model.competizioni, function(k,v){ 
		                if(v.competizioneId == competizione) {
		                    $.each(v.partite, function(x,y){
		                        $("#partite").append("<li><a href='#'>" + y + "</a></li>");                        
		                    })
		                }                
		        })
		      })
		      $("#partite").append("</ul>");
	         }

</script>

 

[criric]

Per il primo problema hai due opzioni:
1 : togli l'ancora
2 : sposti l'onclick sull'ancora e metti return false
il secondo non l'ho capito , me lo rileggo

 

[fradamma]

Scritto così non funziona, semplicemente mi blocca il popolamento al primo tab e gli altri non me li fa vedere (non posso eliminare l ancora...)

 $.getJSON("partite.json",function(data){  
	 $("#tabs").append("<ul class='tabs'>");
	 $.each(data.model.competizioni, function(k,v){ 
	   $("#tabs ul").append("<li>" +"<a href='#' onclick='stampaPartite(\"" + v.competizioneId + "\")'>"+ v.nome + "</a>"+ "</li>");
	 return false
	})
        $("#tabs").append("</ul>");
 									
})

 

[criric]

hai sbagliato sintassi, scrivi cosi

$.each(data.model.competizioni, function(k,v){ 
            $("#tabs ul").append("<li><a href='#' onclick='stampaPartite(\"" + v.competizioneId + "\");return false'>" + v.nome + "</a></li>");
        })

 

[fradamma]

ook...sei un grande, era proprio quello il problema!
Ora però mi sto cervellando per capire come fare la seconda cosa, la più complessa: al click sul link della singola partita devo finire su un'altra pagina dove saranno caricati altri dati json (esempio i giocatori delle rispettive squadre...) relativi a quella singola partita e provenienti da un altro file .json. La pagina è sempre la stessa, cambierà soltanto la tabella all'interno della pagina...
Credo cmq che in entrambi i file ci sarà un id univoco per ogni partita, ma sicuramente la struttura dei due json divergerà
Detto così è tanto incasinata la faccenda...ed effettivamente credo che lo sia...

 

[criric]

No, è semplice: fai una specie di copia della funzione stampaPartite() e la chiami stampaGiocatori()
tra un attimo devo chiudere se non riesci in serata vedo di postarti un esempio

 

[fradamma]

No, è semplice: fai una specie di copia della funzione stampaPartite() e la chiami stampaGiocatori()
tra un attimo devo chiudere se non riesci in serata vedo di postarti un esempio

ok grazie....provo a vedere cosa combino, cmq a prescindere da cosa riesca a fare mi interesserebbe vedere un tuo esempio, vorrei confrontarmi con uno più esperto di me!
Grazie mille!

 

[fradamma]

Niente....non ci sono proprio riuscito...il problema è proprio alla base: non so come riuscire a collegare due pagine diverse, due id (seppur uguali) di due json diversi... HELP!

PS spero abbia(te) passato delle belle vacanze

 

[criric]

prova a postare quello che hai scritto magari è solo un problema di sintassi
posta anche la struttura del secondo json