JSFiddle - React, Tailwind, and code Playground

by dougiei

HTML

<div data-bind="text: ko.toJSON(companies())"></div>

<ul data-bind="foreach: companies">
    <li>
        The current item is: <b data-bind="text: $index"></b>
        <span data-bind="text: name"> </span>
        <ul data-bind="foreach: phoneNumber">
            <li>
                 <span data-bind="text: type"></span>
                 <span data-bind="text: number"></span>
            </li>
            </ul>
    </li>
</ul>

<table id="devtable">
    <thead>
        <tr>
            <th>Name</th>
            <th>Address</th>
            <th>City</th>
            <th>Phone</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: companies">
        <tr >
            <td data-bind="text: name"></td>
            <td data-bind="text: address.streetAddress"></td>
            <td data-bind="text: address.city"></td>
            
            <td data-bind="text: address.phoneNumber"></td>
        </tr>
    </tbody>
</table>

JavaScript

var viewmodel = {
    companies : ko.observableArray([
        {"name": "mkyong1","age": 30,"address": {"streetAddress": "18 8nd Street","city": "New York"},"phoneNumber": [{"type": "home","number": "111 111-1111"},{"type": "fax","number": "222 222-2222"}]},
       {"name": "mkyong2","age": 30,"address": {"streetAddress": "28 8nd Street","city": "New York2"},"phoneNumber": [{"type": "home","number": "211 111-1111"},{"type": "fax","number": "222 222-2222"}]},
        {"name": "mkyong","age": 30,"address": {"streetAddress": "38 8nd Street","city": "New York3"},"phoneNumber": [{"type": "home","number": "311 111-1111"},{"type": "fax","number": "222 222-2222"}]}
    ])
}

ko.applyBindings(viewmodel);