node.js – How to display JSON object with Handlebars template

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: '',
    tools: [ 'node js', 'Express', 'heroku', 'mongoDB', 'mongoose' ],
    content: [],
    __v: 0
    _id: '627b284f0ee7f8ee7eb08706',
    name: 'Mike',
    about: "Mike's portfolio page",
    github: "mike's portfolio",
    website: '',
    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: '',
    tools: [
      'node js',
    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 “ ” The starting HBS code I have for this is

{{#each this}}

<section class="s1">
    <div class="main-container">
        <div class="greeting-wrapper">  
            <h1>Hello I'm Don-Alex 2</h1>

        <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>
                <ul id="navigation"> 
                    <li><a href="#one">Contact</a></li>

            <div class="left-column">
                <img id="profile-pic" src="" 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>

                <p id="setting-note">*Theme options will be saved for<br>your next visit</p>

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

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


                <h4>Top Expertise</h4>

                <p>What i'm good at <a href="resume.pdf" target="_blank">Download Resume</a> </p>

                <div id="skills">


            <div class="social-links">
                <img id="social-img" src="" alt="Github">
                <h3>Find my latest projects on Github</h3>

                <a href="" target="_blank">Github</a>

<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="" alt="">
                                    <div class="post-preview">
                                        <h6 class="post-title">{{}}</h6>
                                        <p class="post-intro">{{this.about}}</p>
                                        <a href="/post/daily-journal">1</a>

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


<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">

            <input type="text" name="subject" class="input-field">

            <input type="text" name="email" class="input-field">

            <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">


The server-side code that sends the data is written like this

app.get('/home2', async(req, res)=>{
    const {data:{result}}=  await axios.get(``);

    const projects=>{
        // console.log('line 62: ', project);
        return projects;

        // 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.

Leave a Comment