时间戳

首页 > 解决方案 > 摆脱数组中输出对象之间的逗号

javascript - 摆脱数组中输出对象之间的逗号

问题描述

这是我输出与国家公园有关的警报的代码。一切都很好，除了我在对象之间加了一个逗号，而且我不知道如何解决它。这是我输出国家公园和警报的代码：

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 号和 14 号交叉口之间的马车路通道将于 10 月 23 日至 24 日上午 6:30 至下午 4 点关闭，以更换涵洞。

,

犹他州拱门国家公园

,

荒地国家公园，SD

Ben Reifel 游客中心将于 10 月 10 日至 11 日上午 10 点至下午 2 点停电。游客中心仍可获取信息。洗手间、展览、电影和书店将不可用。Cedar Pass Lodge 提供洗手间。

,

德克萨斯州大弯国家公园

由于熊活动的增加，Lost Mine Trail 区域将于 2018 年 10 月 12 日关闭。Casa Grande Peak 的小径、登山口、停车场和朝北的斜坡将关闭，直至另行通知。此时所有其他路径仍然开放。

,

标签： javascriptarraysjson

解决方案

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 中嵌入任意未知文本时，您至少需要更改<to&lt;和&to 。&amp;

推荐阅读