HTML JS DOM // JS Function

Hello,
I am studying on codecademy since a while and I am facing a problem I can not figure out right now. It is my own project so it is not about a specific task but it covers content which is studied here.

  1. I want to build a webpage with a map that dispays locations which are stored in an JS-Array. The Array looks like this: [[name, lat, lon, city, country, link],[…]…].
    I am only using the coordinates to display the places, but the other information are shown in a pop up window which apears onclick.
    This step is working well. So when the page is loaded all points are shown on the map.

  2. I also built a bootstrap navbar and here I want to have a search field, so if the user types in something it should be searched for in the Array (name, city, country) and if there are matching places only those should be displayed. I would also like that the matching search results are shown in a div which only appears when there are searchresults.
    So I think the DOM is the answer but I cant really get it clean. I figured out a way but it is around 100 lines of code so I hope that there is an easier way.

What would be important is that everytime the user types in sth in the searchbar the for loop gets started but only with the matching results. so i guess i need to put it in a function.

###please help### im going a bit crazy with that :slight_smile:

So here is an simplified idea of the code I have:

<form>
          <input id="inputsearch"class="form-control" type="text" placeholder="Search">
        </form>

<script>
zirkusArray = [["Bamyan MMCC (Mobile Mini Circus for Children)",34.829709,67.83587799999998, "Bamyam", "Afghanistan", "https://www.facebook.com/BamyanCircus/"],["Un Grito Interior - Teatro Murga",-33.179456,-64.99515500000001, "Achiras" ,"Argentina","https://www.facebook.com/ungritointerior/timeline"],["Conseil de la nation Atikamekw",47.440994,-72.785958, "La Tuque", "Canada", "https://www.atikamekwsipi.com/fr"],["The Green Light Circus",62.320335,-150.107900, "Talkeetna", "United States", "https://www.facebook.com/greenlightcircus/"],["Circus Zambia",-15.400536,28.351749, "Kabulonga", "Zambia", "http://www.circuszambia.org/"], ["Zirkus Internationale", 52.5476, 13.3668, "Berlin", "Germany", "http://www.zirkus-internationale.de/"],["Sirko Fantastiko",41.0380, 28.9779, "Istanbul", "Turkey", "https://www.facebook.com/Sirko-Fantastiko-183372812260322/"],["Cadir", 40.9944, 29.0403, "Istanbul", "Turkey", "https://www.cadirstudyo.com/"],["Social Circus Myanmar", 16.8494, 96.1711, "Yangon", "Myanmar","https://socialcircusmyanmar.com/"],["Circus Schatzinsel", 52.5023, 13.4415, "Berlin", "Germany", "https://www.circus-schatzinsel.de/"], ["Circulum e.V.", 52.518880, 13.397946, "Berlin", "Germany", "https://www.circulum.de/wordpress/"],["Gençlik Ve Kültür Evi - Sirk Projesi", 37.3144, 40.7441, "Mardin", "Turkey", "https://www.gapgenclikevleri.org/merkezler/mardin/"],["Aula Circo Tropical Crew", 11.2421, -73.5580, "Palomino", "Colombia", "https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=2ahUKEwjG6NKfxfPmAhXOPOwKHf9vDhUQFjAAegQIAhAB&url=https%3A%2F%2Fwww.facebook.com%2Fpages%2Fcategory%2FCircus%2FAula-circo-tropical-crew-282326232661274%2F&usg=AOvVaw30pXPrJihnjVQ51Xa0sW9L"],["Circus Luna",  47.4895, 8.3446, "Baden", "Switzerland", "http://circusluna.ch/" ], ["Spark Circus",  15.5553, 100.4659, "Thailand", "Thailand", "https://sparkcircus.org/about/" ], ["CircO Hannover", 52.3657, 9.7072, "Hannover", "Germany", "https://circo-hannover.de/"]]


// In order to display the elements of the array on the map i used a for loop            	
				
for (i=0; i < zirkusArray.length; i++) {			
	var lat = zirkusArray[i][1].toFixed(4);
	var lon = zirkusArray[i][2].toFixed(4);

	var zirkusMarker = L.marker([lat, lon]); 
	markers.addLayer(zirkusMarker);							
				}

</script>

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.