I am trying to create a react-like component with Handlebars. In this project, I have a set of project cards that are inside a carousel. The cards consist of a photo, project name, project description, and project link. The information is being pulled from an API that I create with the JSON data looking something like this
[
{
_id: '627b281c0ee7f8ee7eb08703',
name: 'Pamela',
about: "Pamela's portfolio page",
github: "pam's portfolio",
website: 'https://github.com/AlexAntoine/Devcamper-api/blob/main/models/Bootcamp.js',
tools: [ 'node js', 'Express', 'heroku', 'mongoDB', 'mongoose' ],
content: [],
__v: 0
},
{
_id: '627b284f0ee7f8ee7eb08706',
name: 'Mike',
about: "Mike's portfolio page",
github: "mike's portfolio",
website: 'https://github.com/AlexAntoine/Devcamper-api/blob/main/models/Bootcamp.js',
tools: [ 'node js', 'Express', 'heroku', 'mongoDB', 'mongoose', 'React' ],
content: [],
__v: 0
},
{
_id: '627b28b00ee7f8ee7eb08709',
name: 'Alex',
about: "Alex's portfolio page",
github: "alex's portfolio",
website: 'https://github.com/AlexAntoine/Devcamper-api/blob/main/models/Bootcamp.js',
tools: [
'node js',
'Express',
'heroku',
'mongoDB',
'mongoose',
'Angular'
],
content: [],
__v: 0
}
]
My goal is to have a new card created with the information from each object. For example, the first card would be populated with “Pamela”, “Pamela’s portfolio page”, and “https://github.com/AlexAntoine/Devcamper-api/blob/main/models/Bootcamp.js ” The starting HBS code I have for this is
{{#each this}}
{{>header}}
<section class="s1">
<div class="main-container">
<div class="greeting-wrapper">
<h1>Hello I'm Don-Alex 2</h1>
</div>
<div class="intro-wrapper" >
<div class="nav-wrapper">
<div class="dots-wrapper">
<div id="dot-1" class="browser-dots"></div>
<div id="dot-2" class="browser-dots"></div>
<div id="dot-3" class="browser-dots"></div>
</div>
<ul id="navigation">
<li><a href="#one">Contact</a></li>
</ul>
</div>
<div class="left-column">
<img id="profile-pic" src="https://images.unsplash.com/photo-1524502397800-2eeaad7c3fe5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="Profile Picture">
<h5 >Personalize Theme</h5>
<div id="theme-options-wrapper">
<div data-mode="light" class="theme-dot" id="light-mode"></div>
<div data-mode="blue" class="theme-dot" id="blue-mode"></div>
<div data-mode="green" class="theme-dot" id="green-mode"></div>
<div data-mode="purple" class="theme-dot" id="purple-mode"></div>
</div>
<p id="setting-note">*Theme options will be saved for<br>your next visit</p>
</div>
<div class="right-column">
<div id="preview-shadow">
<div id="preview">
<div id="corner-tl" class="corner"></div>
<div id="corner-tr" class="corner"></div>
<h3>What I Do </h3>
<p>Aspring software developer that enjoys building new things</p>
<div id="corner-br" class="corner"></div>
<div id="corner-bl" class="corner"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="s2">
<div class="main-container">
<div class="about-wrapper">
<div class="about-me">
<h4>More about me</h4>
<p>Love watching anime and taking naps. </p>
<hr>
<h4>Top Expertise</h4>
<p>What i'm good at <a href="resume.pdf" target="_blank">Download Resume</a> </p>
<div id="skills">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>React</li>
<li>Bootstrap</li>
</ul>
<ul>
<li>Node.js</li>
<li>Mongoose</li>
<li>Express</li>
<li>MongoDB</li>
<li>Heroku</li>
</ul>
</div>
</div>
<div class="social-links">
<img id="social-img" src="https://images.unsplash.com/photo-1618401471353-b98afee0b2eb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1488&q=80" alt="Github">
<h3>Find my latest projects on Github</h3>
<a href="https://github.com/AlexAntoine" target="_blank">Github</a>
<br>
</div>
</div>
</div>
</section>
<section class="s1">
<div class="main-container s1-container">
<h3>Some of My Past Projects</h3>
<div class="post-wrapper">
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel" data-pause="hover">
<div class="carousel-inner">
<!--Add loop here. Figure out how that is going to work out. -->
<div class="carousel-item active container-fluid temp-container" data-interval="3000">
<div class="post">
<div class="card-container">
<img class="thumbnail" src="https://images.unsplash.com/photo-1514474959185-1472d4c4e0d4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1674&q=80" alt="">
<div class="post-preview">
<h6 class="post-title">{{this.name}}</h6>
<p class="post-intro">{{this.about}}</p>
<a href="/post/daily-journal">1</a>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
<section class="s2" id="one">
<div class="main-container">
<h3>Get In Touch</h3>
<form action="/" id="contact-form">
<label for="">Name</label>
<input type="text" class="input-field" name="name">
<label>Subject</label>
<input type="text" name="subject" class="input-field">
<label>Email</label>
<input type="text" name="email" class="input-field">
<label>Message</label>
<textarea class="input-field" name="message"></textarea>
{{!-- <input type="submit" name="submit-btn" value="send" id="submit-btn"> --}}
<input type="submit" value="send" id="submit-btn">
</form>
</div>
</section>
{{>footer}}
{{/each}}
The server-side code that sends the data is written like this
app.get('/home2', async(req, res)=>{
const {data:{result}}= await axios.get(`https://antoine-portfolio-api.herokuapp.com/api/v1/projects`);
const projects= result.map((projects)=>{
// console.log('line 62: ', project);
return projects;
});
res.render('home2',{
// title:'Alex home',
name: projects,
about: projects
})
})
I cannot get the program to display the project name and the description for all three of the projects listed. Any help would be appreciated. Thank you.