Rest API showing [object Object] instead of array objects

Question

I'm using the Rest API to pull in data from a SharePoint list and display the results on a webpage. How would I be able to target those two array items? All I'm receiving back in [object Object] [

Stuff bordered in green means it's successful and red means that I still have issues.

So I'm able to properly pull in the Franchise Number which is labeled as "Title" but I am unable to pull the results from the "RelatedIssues -> results -> Title" from the array, how would I be able to do that?

Here is a picture of the console showing that I can see the array and that it's pulling both RelatedIssues title results.

Code:

<style>
.top {
    margin-bottom: 15px;
}
.csv, .txt, .xls, .xlsx {
    margin-right: 4px;
    margin-left: 4px;
}
</style>

<div id="title" style="width: 100%"></div>

<script>
$(document).ready(function() {
    var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('HISC Franchise Information 2017')/items?$select=Title,RelatedIssues/Title&$expand=RelatedIssues";
    $.ajax({
        url: requestUri,
        type: "GET",
        headers: {
            "accept":"application/json; odata=verbose"
        },
        success: function(data) {
            onSuccess(data);
            ExportTable();
        }
    });

    function onSuccess(data) {
        var item = data.d.results;
        var tableContent = '<table id="TablePanel" border="1px;"><thead><tr><th>Franchise Number</th>' + '<th>Rank</th>' + '<th>Franchises</th>' + '</tr></thead><tbody>';
        for (var i = 0; i < item.length; i++) {
            tableContent += '<tr>'
            tableContent += '<td>' + item[i].Title + '</td>';
            tableContent += '<td>' + item[i].RelatedIssues.results + '</td>';
            tableContent += '<td>' + item[i].Franchises + '</td>';
            tableContent += '</tr>';
            tableContent += '</tbody></thead>';
        }
        $('#title').append(tableContent);
    }

    function ExportTable() {
        $("tableContent").tableExport({
            headings: true,
            footers: true,
            formats: ["xls", "csv", "txt"],
            fileName: "id",
            bootstrap: true,
            position: "top",
            ignoreRows: false,
            ignoreCols: false,
            ignoreCSS: ".tableexport-ignore"
        });
    }
});
</script>

Answer 1

I think you will need to map through the result to get what you need. In your case it can be something like

tableContent += '<td>' + item[i].RelatedIssues.results.map(r => r.Title).join(',') + '</td>';