Unable to add on an array of objects based on conditionals

I have this array of objects which I want to render from server side as an html5 table. I have two types of data in the array. So based on the values I want to create tr td and also add a th before each type of the data. Here’s the array:

Array:

const arr = [
  { name: 'monica', type: 'A' },
  { name: 'chandler', type: 'B' },
  { name: 'joey', type: 'B' },
  { name: 'ross', type: 'A' },
  { name: 'phoebe', type: 'A' },
  { name: 'rachel', type: 'B' }
]

Expected Output:

[
    '<th>Type A</th>',
    '<tr><td>monica</td></tr>',
    '<tr><td>ross</td></tr>',
    '<tr><td>phoebe</td></tr>',
    '<th>Type B</th>',
    '<tr><td>chandler</td></tr>',
    '<tr><td>joey</td></tr>',
    '<tr><td>rachel</td></tr>'
]

Expected Output if there is no Type A or no Type B:

[
    '<th>Type A</th>',
    '<tr><td>No Data for Type A</td></tr>'
    '<th>Type B</th>',
    '<tr><td>chandler</td></tr>',
    '<tr><td>joey</td></tr>',
    '<tr><td>rachel</td></tr>'
]
OR
[
    '<th>Type A</th>',
    '<tr><td>monica</td></tr>',
    '<tr><td>ross</td></tr>',
    '<tr><td>phoebe</td></tr>',
    '<th>Type B</th>',
    '<tr><td>No Data for Type B</td></tr>'
]

What I tried so far:

const arr = [
  { name: 'monica', type: 'A' },
  { name: 'chandler', type: 'B' },
  { name: 'joey', type: 'B' },
  { name: 'ross', type: 'A' },
  { name: 'phoebe', type: 'A' },
  { name: 'rachel', type: 'B' }
]

const typeA     = [`
            <tr>
                <td>Type A</td>
            </tr>
`];
const typeB     = [`
            <tr>
                <td>Type B</td>
            </tr>
`];

arr.forEach( item => {
    if( item.type === 'A' ) {
            typeA.push(`
                <tr>
                    <td>${item.name}</td>
                </tr>
            `);
    }else if( item.type === 'B' ) {
            typeB.push(`
                <tr>
                    <td>${item.name}</td>
                </tr>
            `);
    }
});

const allData = [ ...typeA, ...typeB ];
console.log(allData);

Answer

const arr = [
  { name: "monica", type: "A" },
  { name: "chandler", type: "B" },
  { name: "joey", type: "B" },
  { name: "ross", type: "A" },
  { name: "phoebe", type: "A" },
  { name: "rachel", type: "B" },
];


// change to th!
const typeA = [
  "<th>Type A</th>"
];
// change to th!
const typeB = [
  "<th>Type B</th>"
];

if (!(arr.find(item=>item.type=='A'))) { typeA.push('<tr><td>No Data for Type A</td></tr>') }
if (!(arr.find(item=>item.type=='B'))) { typeB.push('<tr><td>No Data for Type B</td></tr>') }

arr.forEach((item) => {
  if (item.type === "A") {
    typeA.push(`<tr><td>${item.name}</td></tr>`);
  } else if (item.type === "B") {
    typeB.push(`<tr><td>${item.name}</td></tr>`);
  }
});

const allData = [...typeA, ...typeB];
console.log(allData);