去掉数组中输出对象之间的逗号

Question

Here is my code for outputting alerts as they pertain to national parks. Everything is fine except I am getting a comma in between the objects, and I don't know how to fix it. Here is my code for outputting the national parks and alerts:

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;
    }

and here is the output:

Acadia National Park, ME

Carriage Road access between intersections 10 and 14, along the west side of Jordan Pond, will be closed 6:30 am to 4 pm Oct 23-24 for culvert replacement.

,

Arches National Park, UT

,

Badlands National Park, SD

The Ben Reifel Visitor Center will be without power from 10am to 2pm October 10 & 11. Information may still be obtained at the visitor center. Restrooms, exhibits, movie and bookstore will not be available. Restrooms available at the Cedar Pass Lodge.

,

Big Bend National Park, TX

Due to increased bear activity the Lost Mine Trail area will be closed as of October 12, 2018. The trail, trailhead, parking area, and north facing slope of Casa Grande Peak will be closed until further notice. All other trails remain open at this time.

,

Answer 1

park.alerts and such are arrays . You're outputting them by implicitly converting them to string, which calls join with no arguments, which defaults to joining the array with commas. To make that not happen, call join with an empty string:

return `
   <div class="col-lg-12">
    <span class="park">${parkName}, ${stateName}<br></span>
    <span class="alerts">${alerts.join()}</span>
</div>
`;

Note the change on alerts .

---

Side note: In a couple of places you're using text from the objects (from description , for instance) directly as HTML. That's insecure, and also problematic from a formatting perspective. You need to at least change < to < and & to & when embedding arbitrary unknown text in HTML.