stackoom
  简体   繁体   中英

How do I get rid of the comma, so where do I put the .join

 原文  2020-11-16 20:25:17  2   2    javascript

Question

I added the array in the code and the html code and it shows a comma between the 2 sets how would I take it out because I want it to be a list and have multiple volunteering opportunities without a comma Ive looked online and it says to inset a .join(``) in my js but everytime I try the array doesnt insert so basically nothing shows up

 <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Page Title</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="/Pages/Services/Internships-Volunteering.css"> <script src="/Pages/Services/volunteering.js"></script> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="/index.html"> <img src="/logofinalee.png"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item active" style="font-family: montserrat;font-size:17px"> <a class="nav-link" href="/index.html">Home</a> </li> <li class="nav-item active" style="font-family: montserrat;font-size:17px"> <a class="nav-link" href="/blog.html">Blog</a> </li> <li class="nav-item active" style="font-family: montserrat;font-size:17px"> <a class="nav-link" href="/Pages/About-Us.html">About Us</a> </li> <li class="nav-item dropdown active" style="font-family: montserrat;font-size:17px"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Services </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="/Pages/chatwith.html">Chat with College Students</a> <a class="dropdown-item" href="/Pages/Services/Volunteering.html">Volunteering Oppurtunities</a> <a class="dropdown-item" href="/Pages/Services/intern.html">Internship Oppurtunities</a> <a class="dropdown-item" href="/Pages/Services/sat.html">SAT and ACT</a> <a class="dropdown-item" href="/Pages/appli.html">Application Help</a> </div> </li> <li class="nav-item active" style="font-family: montserrat;font-size:17px"> <a class="nav-link " href="/Pages/Colleges/Colleges.html">Advisors</a> </li> <li class="nav-item active" style="font-family: montserrat;font-size:17px"> <a class="nav-link " href="/Pages/Contact.html">Contact</a> </li> <li class="nav-item active" style="font-family: montserrat;font-size:17px"> <a class="nav-link " href="/FAQ.html">FAQ</a> </li> </ul> </div> </div> </nav> <div class="jumbotron jumbotron-fluid text-center"> <div class="container"> <h1 style="color:white;font-size: 100px">VOLUNTEERING</h1> </div> </div> <div class="container"> <div class="row"> <div class="col-sm-12"> <br> </br> </div> <div class="col-sm-2"> <br> </br> </div> <div class="col-sm-8"> <p style="font-size: 17px"> Networking and gaining connections in the community is a very daunting and dreaded task by many. However, having certain experiences is still very valuable on resumes and college applications. We hope to make this process easier and more accessible for all. Through Unavigate, students will have the opportunity to be matched with connections in the local area that will offer internship and volunteering opportunities for specific interests. We have a wide variety of opportunities that everyone can take advantage of. <br> </br> ​You can find various internship opportunities ranging from pharmaceutical to accounting to law here. Each internship offers its own unique experience and requirements yet all guarantee to make your time worthwhile. Our team has hand selected these from local businesses and most are exclusively offered through our service. As we continue to grow our provided opportunities will as well. </p> </div> <div class="col-sm-12"> <br> </br> </div> </div> </div> </div> </div> <div class="jumbotron jumbotron-fluid text-center"> <div class="container"> <h1 style="color:white;font-size: 75px">OUR VOLUNTEERING</h1> </div> </div> <div class="container"> <div class="row"> <div id="volunteering"> </div> </div> </div> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="/css/bootstrap.min.css"> <link rel="stylesheet" href="/Pages/Services/Internships-Volunteering.css"> <!-- jQuery library --> <script src="/js/jquery-3.5.1.min.js"></script> <!-- Latest compiled JavaScript --> <script src="/js/bootstrap.min.js"></script> <script src="/Pages/Services/volunteering.js"></script> </body> </html>

const volData = [
{
 company: "Translators Without Borders",
 link: "https://translatorswithoutborders.org/volunteer/",
 description: "Translators without Borders depends on volunteers to 
 translate millions of words, but also to help us run the 
 organization. We work with volunteers who have all kinds of great 
 skills – and many learn new skills that they can use in their jobs. 
 You can volunteer with TWB if you are fluent in at least one 
 language other than your native language. Whether you are 
 interested in translating medical texts or translating for crisis 
 response, there are engaging projects available to suit all 
 preferences. Professional translators are especially encouraged to 
 apply. ",
},
{
 company: "Crisis Text Line",
 link: "https://www.crisistextline.org/become-a-volunteer/",
 description:"Crisis Text Line is the free, 24/7 text line for 
 people in crisis in the United States. The service is powered by 
 volunteer Crisis Counselors who work remotely—anywhere with a 
 computer and secure internet connection works.Crisis Counselors 
 answer texts from people in crisis, bringing them from a hot moment 
 to a cool calm through active listening, collaborative problem 
 solving, and safety planning.",
} 
];

document.getElementById("volunteering");

window.onload = function(){
  document.getElementById("volunteering").innerHTML=`
  ${volData.map(function(vol){
      return `

    <h3 style="display: inline; text-align :center"> Company: </h3>
    <p style="display: inline; text-align :center"> ${vol.company} 
    </p>
    
    <h3 style="display: inline;font-size: 18px"> Link: </h3>
    <p style="display: inline;font-size: 16px"> ${vol.link} </p>
  
    <h3 style="display: inline;font-size: 18px"> Description: </h3>
    <p style="display: inline;font-size: 16px"> ${vol.description} 
     </p>
    
      `
      }
    )}
  `;
}

2 answers

solution1
 1  2020-11-16 20:34:45

Don't use the outer backticks. That converts the array to a string by joining with commas between the elements.

Use an explicit call to join() with an empty delimiter.

window.onload = function() {
  document.getElementById("volunteering").innerHTML =
    volData.map(function(vol) {
      return `

    <h3 style="display: inline; text-align :center"> Company: </h3>
    <p style="display: inline; text-align :center"> ${vol.company} </p>
    
    <h3 style="display: inline;font-size: 18px"> Link: </h3>
    <p style="display: inline;font-size: 16px"> ${vol.link} </p>
  
    <h3 style="display: inline;font-size: 18px"> Description: </h3>
    <p style="display: inline;font-size: 16px"> ${vol.description} </p>
    
      `
    }).join('');
}

solution2
 0  2020-11-16 20:47:21

volData is probably an Array (otherwise volData.map() fails with a TypeError). volData.map() returns another Array .

When an object is used in text context (inside a template literal in your code) its method .toString() is invoked to produce a text representation of its value.

As its documentation reveals, the implementation of Array.toString() :

joins the array and returns one string containing each array element separated by commas.

You can use Array.join() to join the array items yourself using a different string as separator (a new line or the empty string, for example). Because Array.join() returns a string there is no need to wrap it into a template literal any more:

window.onload = function() {
  document.getElementById("volunteering").innerHTML=
    volData.map(function(vol){
      return `
      <h3 style="display: inline; text-align :center"> Company: </h3>
      <p style="display: inline; text-align :center"> ${vol.company} </p>

      <h3 style="display: inline;font-size: 18px"> Link: </h3>
      <p style="display: inline;font-size: 16px"> ${vol.link} </p>

      <h3 style="display: inline;font-size: 18px"> Description: </h3>
      <p style="display: inline;font-size: 16px"> ${vol.description} </p>
      `
    }).join('');
}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How do I get rid of the comma in this array? How do I get rid of this jump on slideToggle()? How do I get rid of this unwanted space How do I get rid of this borders for the <Link>? How do i get rid of undefined in an array? how do I get rid of “with()” in this function? How do I get rid of thousands of lines How do I get rid of this unwanted cropping? How do I get rid of this amCharts distortion? How do I get rid of the map in this code?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM