[英]Get rid of comma between outputting objects in an array
這是我用於輸出與國家公園有關的警報的代碼。 一切都很好,只是我在對象之間有一個逗號,我不知道如何解決它。 這是我輸出國家公園和警報的代碼:
const alertEndpoint = ('https://api.nps.gov/api/v1/alerts?limit=400&api_key=' + apikey);
const parkEndpoint = ('https://api.nps.gov/api/v1/parks?limit=500&api_key=' + apikey);
getParkData();
async function getParkData() {
const [parkAlerts, parkInfo] = await Promise.all([fetch(alertEndpoint), fetch(parkEndpoint)]);
const alertResults = await parkAlerts.json();
const parkResults= await parkInfo.json();
const alertsData = alertResults.data;
const parkData = parkResults.data;
alertsFilter(alertsData, parkData);
}
function alertsFilter(alertsData, parkData) {
const filteredAlerts = alertsData.filter(function (onlyAlerts) {
return onlyAlerts.category.toLowerCase() === "park closure" ||
onlyAlerts.category.toLowerCase() === "caution";
});
parksFilter(parkData, filteredAlerts);
}
function parksFilter(parkData, filteredAlerts) {
const filteredParks = parkData.filter(function (onlyNatParks) {
return onlyNatParks.designation.toLowerCase().includes( "national park");
});
joinParksToAlerts(filteredParks, filteredAlerts);
}
function joinParksToAlerts(filteredParks, filteredAlerts) {
const parksJoinedWithAlerts = filteredParks.map(park => {
park.alerts = filteredAlerts.filter(alert => alert.parkCode ===
park.parkCode);
return park}).map(park =>{
park.alerts = park.alerts.map(alert => alert.description).join('
<br> - ');
return park
});
displayAlerts(parksJoinedWithAlerts);
function joinParksToAlerts(filteredParks, filteredAlerts) {
const parksJoinedWithAlerts = filteredParks.map(park => {
park.alerts = filteredAlerts.filter(alert => alert.parkCode ===
park.parkCode);
return park
}).map(park => {
park.alerts = park.alerts.map(alert => alert.description).join(' <
br > -');
return park
});
displayAlerts(parksJoinedWithAlerts); console.log(parksJoinedWithAlerts);
}
function displayAlerts(parksJoinedWithAlerts) {
const natParkDiv = document.querySelector('.nationalparks');
console.table(parksJoinedWithAlerts);
const displayEverything = parksJoinedWithAlerts.map(parkAndAlerts => {
const parkName = parkAndAlerts.fullName;
const stateName = parkAndAlerts.states;
const alerts = parkAndAlerts.alerts;
return `
<div class="col-lg-12">
<span class="park">${parkName}, ${stateName}<br></span>
<span class="alerts">${alerts}</span>
</div>
`
});
console.log(displayEverything);
natParkDiv.innerHTML = displayEverything;
}
這是輸出:
阿卡迪亞國家公園,我
10 月 23 日至 24 日上午 6 點 30 分至下午 4 點,位於佐敦池塘西側的 10 號和 14 號交叉口之間的 Carriage Road 通道將關閉以更換涵洞。
,
猶他州拱門國家公園
,
荒地國家公園,SD
Ben Reifel 游客中心將於 10 月 10 日和 11 日上午 10 點至下午 2 點停電。仍可在游客中心獲取信息。 洗手間、展覽、電影和書店將不可用。 Cedar Pass Lodge 提供洗手間。
,
德克薩斯州大彎國家公園
由於熊活動增加,Lost Mine Trail 地區將於 2018 年 10 月 12 日關閉。 Casa Grande Peak 的小道、小道起點、停車場和北向斜坡將關閉,直至另行通知。 所有其他步道此時仍保持開放。
,
park.alerts
等是數組。 您通過將它們隱式轉換為字符串來輸出它們,該字符串調用不帶參數的join
,默認使用逗號連接數組。 為了避免這種情況發生,請使用空字符串調用join
:
return `
<div class="col-lg-12">
<span class="park">${parkName}, ${stateName}<br></span>
<span class="alerts">${alerts.join()}</span>
</div>
`;
注意alerts
的變化。
旁注:在一些地方,您將對象中的文本(例如,來自description
)直接用作 HTML。 這是不安全的,從格式的角度來看也是有問題的。 您至少需要將<
更改為<
和&
到&
在 HTML 中嵌入任意未知文本時。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.