Get id from path in SVG

Question

So I have this SVG

https://github.com/Cphdat3sem2017f/StartcodeExercises/blob/master/JS/Countries_Europe.svg?short_path=6bcbfa5

I managed to hook up an eventListener and a fetch to get information on the countries when clicked on. This I have done by simply calling ex. document.getElementById("dk"). Is there a way and if so how, where i can get the id's inside the paths so I can loop through them and end up with only one call instead of one for each country?

Code:

 import "bootstrap/dist/css/bootstrap.css"; const root = document.getElementById("root"); var svg = document.getElementById("svg"); const country = "https://restcountries.eu/rest/v1/alpha?codes="; svg.addEventListener("load", function() { var svgDoc = svg.contentDocument; var countries = svgDoc.children; for (let i = 0; i < countries.length; i++) { //alert(countries[i].id); countries[i].addEventListener("click", function(event) { alert(countires[i]); getCountryInfo(countries[i].id); }); } svgDoc.addEventListener("click", function(event) { getCountryInfo(event.id); }); var denmark = svgDoc.getElementById("dk"); denmark.addEventListener("click", function() { getCountryInfo("dk"); }); var sweden = svgDoc.getElementById("se"); sweden.addEventListener("click", function() { getCountryInfo("se"); }); var germany = svgDoc.getElementById("de"); germany.addEventListener("click", function() { getCountryInfo("de"); }); var norway = svgDoc.getElementById("no"); norway.addEventListener("click", function() { getCountryInfo("no"); }); var spain = svgDoc.getElementById("es"); spain.addEventListener("click", function() { getCountryInfo("es"); }); var iceland = svgDoc.getElementById("is"); iceland.addEventListener("click", function() { getCountryInfo("is"); }); }); function getCountryInfo(landCode) { fetch(country + landCode) .then(res => res.json()) //.then(res=>{ return res.json()}) .then(data => { var table = ""; table += '<table border="1" style="border-spacing: 5px; table-layout: auto; width: 45%;">'; table += "<tr>"; table += "<th>Name</th>"; table += "<th>Capital</th>"; table += "<th>Also known as</th>"; table += "<th>Region</th>"; table += "<th>Population</th>"; table += "<th>Languages</th>"; table += "</tr>"; data.forEach(country => { table += "<tr>"; table += "<td>" + country.name + "</td>"; table += "<td>" + country.capital + "</td>"; table += "<td>" + country.altSpellings + "</td>"; table += "<td>" + country.region + "</td>"; table += "<td>" + country.population + "</td>"; table += "<td>" + country.languages + "</td>"; table += "</tr>"; }); table += "</table>"; root.innerHTML = table; }); } 

As you can see we tried to get them by getting the children elements but we got stuck and couldn't seem to find answer.

Answer 1

Not sure what children resolves to in that context, but you can get to the paths directly via a query:

[...svgDoc.querySelectorAll('path')].forEach(path => {
    path.addEventListener('click', e => {
        alert(path.id);
    })
})