JavaScript - Recorrer array json objetos y mostrar al hacer click

 
Vista:
sin imagen de perfil

Recorrer array json objetos y mostrar al hacer click

Publicado por Jorge (2 intervenciones) el 27/02/2018 17:40:05
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
var comarques = {
	'Comarques barceloneses' : {
		'Barcelonés' : {
			'capital' : 'Barcelona',
			'ciutats' : 'Badalona,Barcelona,Hospitalet de Llobregat,San Adriàn de Besós,Santa Coloma de Gramanet'
		},
		'Baix Llobregat': {
			'capital' : 'San Feliú de Llobregat',
			'ciutats' : 'Abrera,Begas,Casteldefels,Castellví de Rosanes,Cervelló,Collbató,Corbera de Llobregat,Cornellà de Llobregat,Esparraguera,Esplugas de Llobregat,Gavà,Martorell,Molins de Rey,Olesa de Montserrat,Pallejà,La Palma de Cervelló,El Papiol,El Prat de Llobregat,San Andrés de la Barca,San Baudilio de Llobregat,San Clemente de Llobregat,San Esteban de Sasroviras,San Feliú de Llobregat,San Juan Despí,San Justo Desvern,San Vicente dels Horts,Santa Coloma de Cervelló,Torrellas de Llobregat,Vallirana,Viladecans'
		},
		'Vallès Occidental' : {
			'capital' : 'Barcelona',
			'ciutats' : 'Badia del Vallès,Barberà del Vallés,Castellar del Vallés,Castellbisbal,Sardañola del Vallés,Gallifa,Matadepera,Moncada,Reixach,Palau-solità,Plegamans,Polinyà,Rellinars,Ripollet,Rubí,Sabadell,San Cugat del Vallés,San Lorenzo Savall,San Quirico de Tarrasa,Santa Perpetua de Moguda,Senmanat,Tarrasa,Ullastrell,Vacarisas,Viladecavalls'
		},
		'Vallès Oriental' : {
			'capital' : 'Granollers',
			'ciutats' : 'Aiguafreda,La Ametlla,Bigas,Caldas de Montbui,Campins,Canovellas,Cànoves,Cardedeu,Castellcir,Castelltersol,Figaró-Montmany,Fogàs de Monclús,Las Franquesas del Vallés,La Garriga,Granera,Granollers,Gualba,La Llagosta,Llinàs del Vallés,Llissà de Munt,Llissà de Vall,Martorellas,Mollet del Vallès,Montmeló,Montornés del Vallés,Montseny,Parets,La Roca del Vallés,San Antonio Vilamajor,San Celoni,San Esteban de Palautordera,San Felíu de Codinas,San Fausto de Campcentellas,San Pedro de Vilamajor,San Quirico Safaja,Santa Eulalia de Ronsana,Santa María de Martorellas de Arriba,Santa María de Palautordera,Tagamanent,Vallgorguina,Vallromanes,Villalba Saserra,Vilanova del Vallés'
		},
		'El Maresme' : {
			'capital' : 'Mataró',
			'ciutats' : 'Alella,Arenys de Mar,Arenys de Munt,Argentona,Cabrera de Mar,Cabrils,Caldetas,Calella,Canet de Mar,Dosrius,Malgrat de Mar,El Masnou,Mataró,Montgat,Orrius,Palafolls,Pineda de Mar,Premià de Dalt,Premià de Mar,San Andrés de Llavaneras,San Cipriano de Vallalta,San Acisclo de Vallalta,San Pol de Mar,San Vicente de Montalt,Santa Susana,Teyà,Tiana,Tordera,Vilasar de Dalt,Vilasar de Mar'
		},
		'Garraf' : {
			'capital' : 'Villanueva,Geltrú',
			'ciutats' : 'Canyellas,Cubellas,Olivella,San Pedro de Ribas,Sitges,Villanueva,Geltrú'
		},
		'Alt Penedès' : {
			'capital' : 'Villafranca del Panadés',
			'ciutats' : 'Avinyonet del Penedés,Las Cabanyas,Castellet,Gornal,Castellví de la Marca,Fontrubí,Gelida,La Granada,Mediona,Olèrdola,Olesa de Bonesvalls,Pachs del Panadés,Pla del Panadés,Pontons,Puigdalba,San Cugat Sasgarrigas,San Lorenzo de Hortóns,San Martín Sarroca,San Pedro de Riudevitlles,San Quintín de Mediona,San Sadurní de Noya,Santa Fe del Panadés,Santa Margarita,Monjós,Subirats,Torrelavit,Torrellas de Foix,Villafranca del Panadés,Viloví'
		},
		'Anoia' : {
			'capital' : 'Igualada',
			'ciutats' : 'Argensola,Bellprat,Bruch,Cabrera de Igualada,Calaf,Calonge de Segarra,Capellades,Carme,Castellfollit de Riubregós,Castellolí,Copóns,Els Hostalets de Pierola,Igualada,Jorba,La Llacuna,Masquefa,Montmaneu,Ódena,Orpí,Piera,La Pobla de Claramunt,Prats del Rey,Pujalt,Rubió,San Martín de Tous,San Martín Sasgayolas,Salavinera,Santa Margarita de Montbuy,Santa María de Miralles,Torre de Claramunt,Vallbona,Veciana,Vilanova del Camí'
		},
		'Bages' : {
			'capital' : 'Manresa',
			'ciutats' : 'Aguilar de Segarra,Artés,Avinyó,Balsareny,Calders,Callús,Cardona,Castellbell,Vilar,Castellfullit del Boix,Castellgalí,Castellnou de Bages,Estany,Fonollosa,Gayà,Manresa,Marganell,Moyà,Monistrol de Calders,Monistrol de Montserrat,Mura,Navarclés,Navàs,El Pont de Vilomara,Rocafort,Rajadell,Sallent de Llobregat,San Felíu Saserra,San Fructuoso de Bages,San Juan de Torruella,San Mateo de Bages,Guardiola,San Vicente de Castellet,Santa Maria d\'Oló,Sampedor,Súria,Talamanca'
		}
	},
	'Comarques gerundenses' : {
		'Gironès' : {
			'capital' : 'Gerona',
			'ciutats' : 'Aiguaviva,Bescanó,Bordils,Camplloch,Canet de Adri,Cassà de la Selva,Celrà,Cervià de Ter,Flassà,Fornells de la Selva,Gerona,Juyà,Llagostera,Llambillas,Madremaña,Quart,Salt,San Andrés Salou,San Gregorio,San Juan de Mollet,San Jordi Desvalls,San Juliàn de Ramis,San Martín de Liémana,San Martivell,Sarrià de Ter,Vilablareix,Viladasens'
		},
		'Pla de l\'Estany' : {
			'capital' : 'Bañolas',
			'ciutats' : 'Agullana,Albañà,La Armentera,Aviñonet de Puig Ventós,Bàscara,Viure,Buadella,Borrassà,Cabanellas,Cabanas,Cadaqués,Cantallops,Capmany,Castellón de Ampurias,Cistella,Ciurana,Colera,Darnius,La Escala,Espolla,Alfar,Figueras,Fortià,Garrigàs,Garriguella,La Junquera,Lladó,Llansà,Llers,Masarach,Massanet de Cabrenys,Mollet de Peralada,Navata,Ordis,Palau de Santa Eulalia,Palau Sabardera,Pau,Pedret,Marsà,Perelada,Pont de Molins,Pontós,Puerto de la Selva,Portbou,Rabós,Riumors,Rosas,San Clemente Sasebas,San Lorenzo de la Muga,San Miguel de Fluvià,San Mori,San Pedro Pescador,Santa Leocadia de Algama; Saus,Camallera,Llampaies; La Selva de Mar,Terradas,Torroella de Fluvià,La Bajol,Ventalló,Vilabertran,Viladamat,Vilafant,Vilajuïga,Vilamacolum,Vilamalla,Vilamaniscle,Vilanant,Vilasacra,Vilahur'
		},
		'Alt Empordà' : {
			'capital' : 'Figueras',
			'ciutats' : 'Agullana,Albañà,La Armentera,Aviñonet de Puig Ventós,Bàscara,Viure,Buadella,Borrassà,Cabanellas,Cabanas,Cadaqués,Cantallops,Capmany,Castellón de Ampurias,Cistella,Ciurana,Colera,Darnius,La Escala,Espolla,Alfar,Figueras,Fortià,Garrigàs,Garriguella,La Junquera,Lladó,Llansà,Llers,Masarach,Massanet de Cabrenys,Mollet de Peralada,Navata,Ordis,Palau de Santa Eulalia,Palau Sabardera,Pau,Pedret,Marsà,Perelada,Pont de Molins,Pontós,Puerto de la Selva,Portbou,Rabós,Riumors,Rosas,San Clemente Sasebas,San Lorenzo de la Muga,San Miguel de Fluvià,San Mori,San Pedro Pescador,Santa Leocadia de Algama; Saus,Camallera,Llampaies; La Selva de Mar,Terradas,Torroella de Fluvià,La Bajol,Ventalló,Vilabertran,Viladamat,Vilafant,Vilajuïga,Vilamacolum,Vilamalla,Vilamaniscle,Vilanant,Vilasacra,Vilahur'
		},
		'Baix Empordà' : {
			'capital' : 'La Bisbal del Ampurdàn',
			'ciutats' : 'Albons,Bagur,Bellcaire,La Bisbal del Ampurdàn,Calonge,Castillo de Aro,Colomés,Corsà; Cruilles,Monells,San Sadurní; Foixà,Fontanillas,Forallac,Garrigolas,Gualta,Jafre,Montràs,Palafrugell,Palamós,Palau-sator,Pals,Parlabà,La Pera,Regencós,Rupià,San Feliu de Guíxols,Santa Cristina de Aro,Serra de Daró,La Tallada,Torrent,Torroella de Montgrí,Ullà,Ullastret,Ultramort,Vall-llobrega,Verges,Vilopriu'
		},
		'La Garrotxa' : {
			'capital' : 'Olot',
			'ciutats' : 'Argelaguer,Besalú,Beuda,Castellfullit de la Roca,Mayà de Moncal,Mieras,Montagut,Oix,Olot,Las Planas,Las Presas,Riudaura,Sales de Llierca,Sant Aniol de Finestràs,San Feliu de Pallarols,San Ferreol,San Jaime de Llierca,San Juan les Fonts,Santa Pau,Tortellà,Vall de Vianya,Vall de Bas'
		},
		'Ripollès' : {
			'capital' : 'Ripoll',
			'ciutats' : 'Campdevànol,Campellas,Camprodón,Gombreny,Llanàs,Las Llosas,Molló,Ogassa,Pardinas,Planolas,Queralbs,Ribas de Freser,Ripoll,San Cristóbal de Tosas,San Juan de las Abadesas,San Pablo de Seguríes,Setcasas,Vallfogona,Vilallonga de Ter'
		},
	},
	'Comarques tarraconenses' : {
		'Tarragonès' : {
			'capital' : 'Tarragona',
			'ciutats' : 'Altafulla,La Canonja,El Catllar,Constantí,Creixell,Morell,La Nou de Gaya,Pallaresos,Perafort,Pobla de Mafumet,Puebla de Montornés,Renau,La Riera,Roda de Bará,Salomó,Salou,La Secuita,Tarragona,Torredembarra,Vespella,Vilallonga del Camp,Vilaseca'
		},
		'Alt Camp' : {
			'capital' : 'Valls',
			'ciutats' : 'Aiguamurcia,Alcover,Alió,Bràfim,Cabra del Campo,Figuerola del Camp,Garidells,La Masó,Milá,Montferri,Montreal,Nulles,Pla de Santa María,Puente de Armentera,Puigpelat,Querol,La Riba,Rodoñá,Rourell,Vallmoll,Valls,Vilabella,Vila-rodona'
		},
		'Baix Camp' : {
			'capital' : 'Reus',
			'ciutats' : 'Albiol,Aleixar,Alforja,Almoster,Arbolí,Argentera,Borjas del Campo,Botarell,Cambrils,Capafons,Castellvell,Colldejou,Dosaiguas,La Febró,Maspujols,Montbrió de Tarragona,Montroig,Prades,Pratdip,Reus,Riudecañas,Riudecols,Riudoms,La Selva del Campo,Vandellós,Hospitalet del Infante,Vilanova d\'Escornalbou,Vilaplana,Viñols,Archs'
		},
		'Baix Penedès' : {
			'capital' : 'Vendrell',
			'ciutats' : 'Albiñana,Arbós,Bañeras (Tarragona),Bellvey,La Bisbal del Panadés,Bonastre,Calafell,Cunit,Lloréns,Maslloréns,El Montmell,San Jaime dels Domenys,Santa Oliva,Vendrell'
		},
		'Conca de Barberà' : {
			'capital' : 'Montblanch',
			'ciutats' : 'Barbará,Blancafort,Conesa,Espluga de Francolí,Forés,Llorach,Montblanch,Pasanant,Las Pilas,Pira (Tarragona),Pontils,Rocafort de Queralt,Santa Coloma de Queralt,Sarral,Savallá del Condado,Senan,Solivella,Vallclara,Vallfogona de Riucorb,Vilanova de Prades,Vilavert,Vimbodí,Poblet'
		},
		'El Priorat' : {
			'capital' : 'Falset',
			'ciutats' : 'Bellmunt del Priorato,La Bisbal de Falset,Cabacés,Capsanes,Cornudella,Falset,La Figuera,Gratallops,Guiamets,Lloá,Margalef de Montsant,Marsá,El Masroig,El Molar,La Morera de Montsant,Poboleda,Porrera,Pradell,Torre de Fontaubella,Torroja,Ulldemolins,Vilella Alta,Vilella Baja'
		},
		'Ribera d\'Ebre' : {
			'capital' : 'Mora de Ebro',
			'ciutats' : 'Ascó,Benisanet,Flix,Garcia,Ginestar,Miravet,Mora de Ebro,Mora la Nueva,La Palma de Ebro,Rasquera,Ribarroja de Ebro,Tivisa,Torre del Español,Vinebre'
		},
		'Terra Alta' : {
			'capital' : 'Gandesa',
			'ciutats' : 'Arnes,Batea,Bot,Caseres,Corbera de Ebro,La Fatarella,Gandesa,Horta de San Juan,Pinell de Bray,Puebla de Masaluca,Prat de Compte,Villalba de los Arcos'
		},
		'Baix Ebre' : {
			'capital' : 'Tortosa',
			'ciutats' : 'La Aldea,Aldover,Alfara (Tarragona),La Ametlla de Mar,La Ampolla,Benifallet,Camarles,i Cherta,Deltebre,Pauls,Perelló,Roquetas,Tivenys,Tortosa'
		},
		'Montsià' : {
			'capital' : 'Amposta',
			'ciutats' : 'Alcanar,Amposta,Cenia,Freginals,La Galera,Godall,Mas de Barberans,Masdenverge,San Carlos de la Rápita,San Jaime de Enveija,Santa Bárbara,Ulldecona'
		}
	}
}

Cuando hago clic "Comarques Barcelones" se muestra todas las comarcas de comarques Barceloneces.
Lo que necesito es que al hacer clic a Barcelones tiene que aparecer a su lado la capital en color rojo y abajo en
diferentes sub-líneas todas las poblaciones ordenadas alfabéticamente (que obtendrá SIEMPRE del JSON)
• Comarcas barceloneses - Provincia de Barcelona
◦ Barcelones Barcelona
▪ Badalona
▪ Barcelona

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="Catalunya.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
        <div>
 
            <p></p>
 
        </div>
    </body>
    <script>
         $(document).ready(function (){
             var cont=0;
             for(provincies in comarques){
                 var parrafo = document.createElement("p");
                 parrafo.setAttribute('id',cont);
                 var nprovincia= document.createTextNode(provincies);
                 $(parrafo).append(nprovincia);
                 $(parrafo).insertBefore("div");
                 cont++;
             }
             $("p").click(function (){
                 var cont=0;
                 //alert(this.innerText);
                 for(comarca in comarques[this.innerText]){
                     var parrafo = document.createElement("p");
                     parrafo.setAttribute('id',cont);
                     var ncomarca = document.createTextNode(comarca);
                     $(this).append(parrafo);
                     $(parrafo).append(ncomarca);
                      cont++;
 
                 }
             });
 
			//Esta es la funcion donde tiene que hacer lo que pido pero no hay manera no lo entiendo como lo tengo que hacer
             $("p").click(function (){
                 var cont=0;
                 for(capitall in comarques[this.parentNode.firstChild]){
                     alert("HOLA");
                 }
             });
 
             /*for(capital in comarques[this.parentNode.childNodes[0]][.nodeValue][this.innerText]){
             this.innertext -> girones
             this.parentNode.childNodes[0]innerText  -> es tot

         });

    </script>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Recorrer array json objetos y mostrar al hacer click

Publicado por micronn (1 intervención) el 27/02/2018 18:06:25
Debes distinguir el caso comarca de provincia.

En lugar de asociar controladores de eventos a "p", puedes asignar clases y asociarlos a "p.clase". Por ejemplo, cuando creas la provincia, le haces un parrafo.setAttribute("class", "provincia"); y lo mismo con la comarca, asignándole la clase "comarca".

Como creas los elementos dinámicamente, te servirá algo como $(document).on("click", "p.comarca", function() { /* blablaba */ }); para controlar el evento.

Lo demás debería ser trivial.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar