Displaying JSON Array using AngularJS

Question

I have this as my .json file and I was thinking on how will I be able to display "ip" array into my .html

 [
       {
          "network":"net1",
          "ip":[
             "192.168.0.1",
             "192.168.0.2"
          ],
          "zone":"LAN"
       },
       {
          "network":"net1",
          "ip":[
             "192.168.0.1",
             "192.168.0.2"
          ],
          "zone":"WIFI"
       }
    ]

Currently, I have this .html file.

    <thead>
        <tr>
            <th>Zone</th>
            <th>Network</th>
            <th>IP Address</th>
            <th>IPv6</th>

        </tr>
    </thead>
    <tbody >
        <tr ng-repeat="zones in viewAll.zone">
            <td>{{zones.zone}}</td>
            <td>{{zones.network}}</td>
            <td>{{zones.ip}}</td>
            <td>{{zones.ipv6}}</td>
        </tr>

    </tbody>
</table>

And it will display something like this.

["192.168.0.1","192.168.0.2"]

I want it to omit the [""] onto my display.

Answer 1

You need to use ng-repeat to iterate over the array https://docs.angularjs.org/api/ng/directive/ngRepeat

Do this

<tr ng-repeat="zones in viewAll.zone">
        <td>{{zones.zone}}</td>
        <td>{{zones.network}}</td>
        <td>
           <ul>
            <li ng-repeat="ip in zones.ip">{{ip}}</li>
           </ul>
       </td>
        <td>{{zones.ipv6}}</td>
    </tr>