dynamic Employee table and how to css style

I wanted to dynamically create an employee table from a dataset. And I wanted to figure out how to bold all the department names, or supervisors. Here is a sample of my code:

var data = [{"name": "John Smith", "primary": 1, "title": "CEO", "phone":123}, {"name":"Frank Beans", "title": "COO", "phone": 333}, {"name": "test", "title": " newemployee", "phone": 555}, {"name": "Damar", "primary": 1, "title": "supervisor of quality", "phone": 999}]

function buildTable(data){
var table = document.getElementById(‘mytable’)

for(var i =0; i < data.length; i++){
    var row = `
    <tr>
        <td data-id="primary">${data[i].name}</td>
        <td>${data[i].title}</td>
        <td>${data[i].phone}</td>
    </tr>`
    table.innerHTML += row
}

}

I am able to display the table, which is great! But, when I try to bold the td cell that has name it bolds both cells of John Smith and Frank Beans. I would like to bold John Smith and Damar since John is the CEO and Damar is a supervisor. I was thinking of looping through the data and if it has primary === 1 then i could apply the bold to the cell but couldn’t figure out how to do that. I have been stuck on this for a few hours and need some help.