Using AngularJS to Showcase JSON Array

I am currently working with a .json file that contains information about networks, IP addresses, and zones. I am trying to figure out how to display the "ip" array in my .html file.

 [
       {
          "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"
       }
    ]

Here is a snippet from my .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>

When rendered, the IP Address section displays like this:

["192.168.0.1","192.168.0.2"]

I am trying to find a way to format the display to omit the brackets and quotes around the IP addresses.

Answer №1

To iterate over the array, make use of ng-repeat. Check out the documentation here: https://docs.angularjs.org/api/ng/directive/ngRepeat

Here's how you can do it:

<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to set a background image with vue.js

My website design requires 70% of the page to be covered with an image, but the image is currently blank. I am using Vue.js as my frontend framework. Below is the code snippet that is resulting in a blank space: <script setup lang="ts"> imp ...

Ways to divide the vuetify-text-field-label into two lines

My vuetify text field has a label that is too long for mobile devices. I am wondering if there is a way to automatically wrap the text. I attempted using div and p, as shown in this codepen link <div id="app"> <v-app id="inspire ...

How can the ordering of dynamically generated components be synchronized with the order of other components?

Currently, I'm delving into Vue 3 and encountering a specific issue. The tabs library I'm using only provides tab headers without content panels. To work around this limitation, I've come up with the following solution: <myTabs/><!- ...

The automated Login Pop Up button appears on its own and does not immediately redirect to the login form

Hey guys, I'm struggling with modifying the jquery and html to ensure that when the login button is clicked, the login form pops up instead of displaying another login button. Another issue I am facing is that the login button seems to pop up automati ...

Guide on dynamically applying a CSS rule to an HTML element using programming techniques

Currently working with Angular 6 and Typescript, I am facing a unique challenge. My task involves adding a specific CSS rule to the host of a component that I am currently developing. Unfortunately, applying this rule systematically is not an option. Inste ...

Why is the imported package not being recognized in the namespace declaration of my Node.js TypeScript file?

Currently, I am utilizing the WebStorm IDE developed by JetBrains to modify a TypeScript file within a Node.js v8.6.0 project. The JavaScript version set for this project is JSX Harmony. In the beginning of the TypeScript source file, there is an import st ...

After closing, the position of the qtip2 is being altered

I've successfully integrated the qtip2 with fullcalendar jQuery plugin, which are both amazing tools. However, I'm encountering an issue with the positioning of the qtip. Here's the code snippet I'm using: $(window).load(function() { ...

Combine two or more Firebase Observables

Currently, I am working on creating an Observable using FirebaseObjectObservable. However, before I can accomplish this, I need to query a Firebase list to obtain the key IDs required for the FirebaseObjectObservable. The structure of my data is as follow ...

Working with JavaScript and making AJAX calls to interact with PHP backend

Having trouble with this code, it's not working as expected. I want to pass the value when I select an option from the dropdown menu, process the data using onChange event and display the value in the tag. <label for="headmark" class="lbl-ui selec ...

How to handle an undefined index issue when passing data from AJAX POST to PHP

Greetings to all! As a newcomer to this online community and someone just beginning their journey with programming, I find myself faced with a challenge involving the posting of JSON data using AJAX to another PHP file. Here is my current code snippet: -- ...

When using AngularJS, you may encounter an issue with the injector causing

Hey there, I'm new to Angular and I'm trying to create a basic program but I keep running into an error. Controller: angular.module('myApp', []).controller('myCtrl', function ($scope ,HandleService) { $scope.AddCar = fu ...

Sorting tables dynamically in AngularJS

I've created a dynamic table in Angular 1.6 that pulls data from a web API in JSON format. Here's a snippet of the data: { "CallData": [ { "TableHeaders": [ { "id": "0", "text": "Time" }, { ...

Creating a triangle shape using Bootstrap to style a div element, similar to the image provided

Trying to achieve the look of the attached image with a few divs. I know I can use a background image like this: background:url(image.png) no-repeat left top; But I'm curious if there's another way to achieve this without using a background ima ...

Explore nested JSON data by clicking on it

Scenario I am currently working with complex JSON data that requires filtering and reorganizing. The data is structured as a hierarchical collection of projects, each containing task lists which, in turn, contain tasks. In essence, the JSON tree follows ...

Issues with JavaScript Content Loading in epub.js on a Website

Hey there, I'm currently experimenting with the epub.js library and trying to set up the basics. However, I'm encountering an issue where the ebook is not showing up in my browser: <!DOCTYPE html> <html lang="en"> <head&g ...

Testing the responseType feature in AngularJS can be done through unit testing

One of my methods dynamically sets the responseType attribute of the $http request based on the type of asset being requested. I want to write a Jasmine unit test to verify that the correct response type is being set. After some research, I discovered tha ...

Utilizing onClick to target data within a .map function

I am struggling with the code provided below: const test = (e) => { console.log('example:', e.target.item.attributes.dataIWant); } {records.map((item, index) => { return ( <> <Accordion key={index} ...

When an Ajax post request is made, the data being sent is appended to the JSON response

Having a dilemma with my ajax call: $.ajax({ url: '/assets/functions.php', type: 'POST', data: { "functionCall": "get-uploads", "type": type }, dataType: 'json', success: function (data ...

Clicking on the checkbox will trigger the corresponding table column to disappear

Upon clicking the filter icon in the top right corner, a menu will open. Within that menu, there are table header values with checkboxes. When a checkbox for a specific value is selected, the corresponding table column should be hidden. I have already impl ...

"Encountering a Dilemma in Resolving State using

Struggling to implement ui router for setting states post fetching pages from a database, I encountered an error each time I tried clicking on a sref-link. Below are snippets from app/app.js and app/index.html. angular.js:10467 Error: Could not resolve &a ...