I want to to concatenate the results of a jquery each loop inside of another but am not getting the results I expect.

$.each(data, function () {
            counter++;
            var i = 0;
            var singlebar;
            var that = this;
            tableRow = '<tr>' +
            '<td>' + this.foo + '</td>' +
            $.each(this.bar, function(){
                singlebar = '<td>' + that.bar[i].baz + '</td>';
                tableRow + singlebar;
            });
            '</tr>';

            return tableRow;
});

The portion inside the nested each does not get added to the string that is returned.

I can console.log(singlebar) and get the expected results in the console but I cannot concatenate those results inside the primary each loop.

I have also tried:

        $.each(this.bar, function(){
            tableRow += '<td>' + that.bar[i].baz + '</td>';
        });

Which also does not add the desired content.

How do I iterate over this nested data and add it in the midst of the table that the primary each statement is building?