I created a table that populates the data from XML file. But I am having trouble "creating a count". I just want to count the Countries and Job Titles, there are a lot of repeating ones. I think the Prof. wants us to List something like:
Germany: 4 Count
Mexico: 5 Count
Fragment of XML doc:
<dataroot>
<forMid>
<cust>ALFKI</cust>
<abc>Maria Anders</abc>
<contacttitle>Sales Representative</contacttitle>
<city>Berlin</city>
<country>Germany</country>
</forMid>
<forMid>
<cust>ANATR</cust>
<abc>Ana Trujillo</abc>
<contacttitle>Owner</contacttitle>
<city>México D.F.</city>
<country>Mexico</country>
</forMid>
<forMid>
<cust>ANTON</cust>
<abc>Antonio Moreno</abc>
<contacttitle>Owner</contacttitle>
<city>México D.F.</city>
<country>Mexico</country>
</forMid>
</dataroot>
Here is what my table script looks like if if helps:
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
imAnnoyed(this);
}
};
xhttp.open("GET", "midA.xml", true);
xhttp.send();
}
function imAnnoyed(xml) {
var i;
xmlDoc = xml.responseXML;
const mad = xmlDoc.getElementsByTagName("forMid");
var table = "<col><col><col><col><col><tr><th>Business ID</th><th>Customer Name</th><th>Title</th><th>City</th><th>Country</th></tr>";
for (i = 0; i < mad.length; i++) {
table += "<tr><td>" +
mad[i].getElementsByTagName("cust")[0].childNodes[0].nodeValue + "</td><td>" +
mad[i].getElementsByTagName("abc")[0].childNodes[0].nodeValue + "</td><td>" +
mad[i].getElementsByTagName("contacttitle")[0].childNodes[0].nodeValue + "</td><td>" +
mad[i].getElementsByTagName("city")[0].childNodes[0].nodeValue + "</td><td>" +
mad[i].getElementsByTagName("country")[0].childNodes[0].nodeValue + "</td><tr>";
}
document.getElementById("table").innerHTML = table;
}
I would suggest to not use ajax, use fetch (built into js)
function loadDoc() {
// use fetch to load xml file
fetch("midA.xml")
// convert response to text
.then((resp) => resp.text())
// parse text to xml
.then((xml) => new window.DOMParser().parseFromString(xml, "text/xml"))
// call your function imAnnoyed
.then(imAnnoyed)
// catch errors
.catch((e) => console.log(e));
}
function imAnnoyed(xml) {
// select all tags country
let countryList = xml.querySelectorAll("country");
// convert tag to innerHTML (text)
countryList = Array.from(countryList).map((tag) => tag.innerHTML);
// create hashmap
const hash = new Map();
//
countryList.forEach((country) =>
// if country is in hashmap increment value by 1
// else add it and set value to 1
hash.has(country)
? hash.set(country, hash.get(country) + 1)
: hash.set(country, 1)
);
// convert to array
items = Array.from(hash.entries());
// loop through final result
items.forEach(([country, count]) => {
// print values or add your logic below
console.log(country, count);
});
}
// Output:
// Germany 1
// Mexico 2