I am currently working on two functions: one is asynchronous as it fetches data from a CSV file, and the other function renders a list of cities. The CSV file contains information about shops located in various cities. My goal is to display a list of cities on an HTML page and dynamically append the corresponding shops when a specific city is clicked. However, I am facing an issue where I cannot render the list for a different city if I have already done so for another city.
let arr;
let shops = [];
let cities = [];
async function getData() {
let response = await fetch('list.csv', {credentials: 'include'});
const data = await response.text();
arr = data.split('\n');
let headers = arr[0].split(';');
for(let i = 1; i < arr.length; i++) {
let datas = arr[i].split(';');
let obj = {};
for(let j = 0; j < datas.length; j++) {
obj[headers[j]] = datas[j].trim();
}
shops.push(obj);
}
//group cities
for (let i = 0; i < shops.length; i++) {
cities.push(shops[i].IC_GROUP0);
}
renderLists();
}
getData();
function renderLists() {
for (let i = 0; i < cities.length; i++) {
let listOfCities = document.createElement("LI");
town = document.createTextNode(cities[i]);
listOfCities.appendChild(town);
listOfCities.setAttribute("id", cities[i]);
document.getElementById("list").appendChild(listOfCities);
}
for (let i = 0; i < cities.length; i++) {
document.getElementById(cities[i]).onclick = function makeAList() {
shops = shops.filter(item => item.IC_GROUP0 == cities[i]);
//addresses
for (let m = 0; m < shops.length; m++) {
let nodeAddress = document.createElement("P");
//list of shops to HTML
let address = document.createTextNode(shops[m].IP_PROP303);
nodeAddress.appendChild(address);
document.getElementById(cities[i]).appendChild(nodeAddress);
}
}
}
}