Angular 1.5 displaying multiple elements of an array in a table cell

Question

Hi I am new to Angular and I am looking for some feedback. I am making a table with 4 columns:

check | stream | signal health | total signal.

I am using dummy data for the moment since I don't have an API. My issue is that I am not able to display multiple elements from the signal_health array as a value. Instead, Angular renders the array of objects into the UI as [{"id":1},{"id":2},{"id":3}] what I need is just the value.
I have to be able to display multiple values in just one td block, since every stream has multiple signal_health values. But I don't know how to accomplish this.
Any feedback will be welcomed thank you!

Here is the HTML below:

<table class="table table-striped table-bordered table-hover-alt">
    <thead>
        <tr>
            <th>Select</th>
            <th>Stream</th>
            <th>Signal Health</th>
            <th>Total Signals</th>
        </tr>
    </thead>
    <tbody ng-cloak>
        <tr ng-repeat="value in sc.reports">
           <td><input type="checkbox" name="" value=""></td>
           <td>{{value.stream}}</td>
           <td>{{value.signal_health}}</td>
           <td>{{value.total_signal}}</td>
        </tr>
    </tbody>
</table>

Here is my controller:

function SignalManagementController(){
    var ctrl = this;

    ctrl.reports =[
        {stream:"MTV", signal_health:[{id:1}, {id:2}, {id:3}], status_cli:[ {value:5}, {value:3}, {value:4}, {value:5}], status_vde:[{value:5}, {value:3}, {value:4}, {value:5}], total_signal: 1},
        {stream:"SciFy", signal_health:[{id:1}, {id:2}, {id:3}],status_cli:[{value:2, value:4, value:5}, {value:3}, {value:4}, {value:5}], status_vde:4, total_signal: 15},
        {stream:"Spike", signal_health:[{id:1}, {id:2}, {id:3}],status_cli:4, status_vde:4, total_signal: 12},
        {stream:"Nick", signal_health:[{id:1}, {id:2}, {id:3}], status_cli:4, status_vde:4, total_signal: 13},
        {stream:"Cartoon", signal_health:[{id:1}, {id:2}, {id:3}], status_cli:4, status_vde:4,total_signal: 111},
        {stream:"Starz", signal_health:[{id:1}, {id:2}, {id:3}], status_cli:4, status_vde:4, total_signal: 12}
    ];
}

Answer 1

You have at least three options to print the array values:

OPTION 1: Call a function of your controller from your html (PLUNKER)

CONTROLLER

function myCtrl(){
    var ctrl = this;

    ctrl.reports = [...]; //Your data      

    ctrl.showSignalHealth = function(signal_health){
        return signal_health.map(function(item){
            return item.id;
        }).join(",");
    }
}

HTML

<tr ng-repeat="value in ctrl.reports">
    <td>{{value.stream}}</td>
    <td>{{ctrl.showSignalHealth(value.signal_health)}}</td>
    <td>{{value.total_signal}}</td>
</tr>

---

OPTION 2: Use a custom angular filter (PLUNKER)

CONTROLLER

app.filter('printSignalHealth', function() {
    return function(signal_health) {
        return signal_health.map(function(item){
            return item.id;
        }).join("-");
    };
});

HTML

<tr ng-repeat="value in ctrl.reports">
    <td>{{value.stream}}</td>
    <td>{{value.signal_health | printSignalHealth}}</td>
    <td>{{value.total_signal}}</td>
</tr>

---

OPTION 3: transform the data before repeating it in the HTML (PLUNKER)

CONTROLLER

function myCtrl(){
    var ctrl = this;

    ctrl.reports = getData();

    function getData(){
        var data = [..]; //Your data

        for (let d of data) {
            d.signal_health = d.signal_health.map(function(item){
                return item.id;
            }).join(" | ");
        } 

        return data;
    }
}

HTML (Just repeat the data and will works)

<tr ng-repeat="value in ctrl.reports">
    <td>{{value.stream}}</td>
    <td>{{value.signal_health}}</td>
    <td>{{value.total_signal}}</td>
</tr>

Answer 2

You can use a map function on the array to return the nested value you want. In your html, replace your line for the signal health:

<td rowspan="{{sc.reports.signal_health.length}}">{{value.signal_health}}</td> 

with this line:

<td rowspan="{{sc.reports.signal_health.length}}">{{value.signal_health.map(function(obj) { return obj.id; })}}</td>