在表格单元格中每行显示JSON数组结果

Question

I have a table which displays the column "air segments". The air segments come as a JSON array from the server(see picture), I need to display the contents of the air segments column one per line in a table cell. Right now its getting displayed as a complete string with a comma(See picture below).

.

So the HTML code is as follows:

<!-- ko foreach: $parents[0].outputsToDisplay($data) -->
    <td>
        <span data-bind="foreach: $data, visible: $parents[2].outputs()[$parent.index()].internalname ==='air_segments', text: splitAirSegments($data)"><br></span>
   </td>
<!-- /ko -->

The outer 'for each' supplies the $data to the td, which are the results to be populated in the table.

The visible binding property makes sure that only column air_segments gets populated.

The outputs() is an observable array in the js file.

I need to code a JS method "splitAirSegments" such that it returns the air segments one by one and with help of 'br' I break the line which would eventually make the air segments appear one per line in a single table cell.

What I tried:

self.splitAirSegments = function (arr) {
    return arr;
}

The way I understood it was, the 'for each' from the 'span' would send each of the air segment to this function and the HTML will display it with line breaks as soon as the function returns the value.

What can be the correct approach? Are there any other ways to split the air segments(with delimiter as a comma) which is now displaying all the air segments together with a comma.

Kindly help.

Answer 1

On the lines of user @Origineil's fiddle the below worked for me:

<!-- ko foreach: $parents[0].outputsToDisplay($data) -->
   <td>

    <span data-bind="if: $parents[1].Outputs()[$index()].InternalName === 'air_segments'">
        <span data-bind="foreach: $data">
            <span data-bind="text: $data"></span>
            <br/>
        </span>           
     </span>

  </td>
<!-- /ko -->