webScrapingTemplate.js

const $ = cheerio.load(pm.response.text());

let siteName = $('.top > .action-post-job').text();

var things1 = [];
var things2 = [];

$('table#jobsboard tr.job').each((index,element) => {
    
    things1.push({
       title: $(element).find($('td.company_and_position [itemprop="title"]')).text(),
       company: $(element).find($('td.company_and_position [itemprop="name"]')).text(),
       location: $(element).find($('td.company_and_position span')).last().text(),
       link: "https://remoteok.io" + $(element).find($('td.source a')).attr('href'),
       id: $(element).attr('data-id')
   })
    
});

$('table#jobsboard tr.expand').each((index,element) => {
    
    things2.push({
       description: $(element).find($('td.heading div.description')).text(),
       id: $(element).attr('data-id')
   })
    
});

//combining logic here
things1.each(res => { 
    
    var result = things2.filter(obj => {
        return obj.id === res.id
    });
    
    console.log(result)
    
    if (result.length > 0) {
        res['description'] = result[0].description;
    }
});

console.log(things1)

let template = `
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">
    <style type="text/css">
        body { font-size: 12px; background: #eee; padding: 16px;}
        .card { border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,.15); -webkit-box-shadow: 0 4px 10px rgba(0,0,0,.15); -moz-box-shadow: 0 4px 10px rgba(0,0,0,.15);}
        .card-topper { border-top-right-radius: 8px; border-top-left-radius: 8px; padding: 8px 16px; font-size: 12px; font-weight: 600; text-transform: uppercase;}
        .card-topper.micro { background-color: #173F5F; color: #ffffff;}
        .card-topper.planning { background-color: #ED553B; color: #ffffff;}
        .card-topper.large { background-color: #ED553B; color: #ffffff;}
        .card-topper.brewpub { background-color: #20639B; color: #ffffff;}
        .card-topper.regional { background-color: #F6D55C;}
        .card-topper.contract { background-color: #3CAEA3; color: #ffffff;}
        .card-topper.proprietor { background-color: #ED553B; color: #ffffff;}
        .card-topper.bar { background-color: #ED553B; color: #ffffff;}
    </style>
    <div class="container-fluid">
        <div class="row">
            <div class="col mb-4">
                <h1>Job Postings</h1>
            </div>
        </div>
        <div class="row">
            {{#each response}}
            <div class="col-sm-6 col-lg-4 col-xl-3 mb-5">
                <div class="card">
                    <div class="test card-topper card-img-top">{{company}}</div>
                    <div class="card-body">
                        <h2>{{title}}</h2>
                        <address>{{location}}</address>
                        <a href="{{link}}" class="card-link" target="_blank" rel="noopener noreferrer">Apply</a>
                        <!--<a href="https://www.google.com/maps/search/?api=1&query={{name}} {{state}}" class="card-link" target="_blank" rel="noopener noreferrer">Map</a> -->
                        <p>{{description}}</p>
                    </div> 
                </div>
            </div>
            {{/each}}
        </div>
    </div>
`;

pm.visualizer.set(template, {
    response: things1
});