Create a table using Angular and Jade that iterates through nested JSON data using ng-repeat

Question

Create a table using Angular and Jade that iterates through nested JSON data using ng-repeat

Here is a snippet of my JSON data:

   {
  "contact-info": {
    "phonebook": [
      {
        "name": "John Snow",
        "phones": [
          {
            "phone": "home",
            "number": "1234"
          }
        ],
        "nick": "bastard"
      },
      {
        "name": "Arya Stark",
        "phones": [
          {
            "phone": "cell",
            "number": "234"
          },
          {
            "phone": "work",
            "number": "345"
          },
          {
            "phone": "home",
            "number": "456"
          }
        ],
        "nick": "no one"
      },
      {
        "name": "Theon",
        "phones": [
          {
            "phone": "fax",
            "number": "567"
          }
        ],
        "nick": "Reek"
      },
      {
        "name": "Aemon",
        "phones": [
          {}
        ],
        "nick": "maester"
      }
    ]
  }
}

I am attempting to use Angular to create a table that resembles this design: https://i.sstatic.net/e0w9q.png

Currently, I am able to display only the first phone number for each person using Angular:

tbody
    tr( ng-repeat="person in JSON.contact-info.phonebook")
        td {{person.name}}
        td {{person.phones[0].phone}}
        td {{person.phones[0].number}}
        td {{person.nick}}

However, I am facing challenges when trying to loop through the nested 'phone' section. How can I achieve this?

Thank you

javascript angularjs json pug

Answer 1

Answer №1

give this a shot.

var app = angular.module("app",[]);

app.controller("ctrl" , function($scope){
  $scope.contacts = {
    "phonebook": [
      {
        "name": "John Snow",
        "phones": [
          {
            "phone": "home",
            "number": "1234"
          }
        ],
        "nickname": "bastard"
      },
      {
        "name": "Arya Stark",
        "phones": [
          {
            "phone": "cell",
            "number": "234"
          },
          {
            "phone": "work",
            "number": "345"
          },
          {
            "phone": "home",
            "number": "456"
          }
        ],
        "nickname": "no one"
      },
      {
        "name": "Theon",
        "phones": [
          {
            "phone": "fax",
            "number": "567"
          }
        ],
        "nickname": "Reek"
      },
      {
        "name": "Aemon",
        "phones": [
          {}
        ],
        "nickname": "maester"
      }
    ]
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" class="panel-group" id="accordion">
  
  <table>
    <thead>
    <tr>
      <td>name</td>
      <td>phone</td>
      <td>number</td>
      <td>nickname</td>
      </tr>
    </thead>
     <tbody  ng-repeat="(key,value) in contacts">
       
    <tr ng-repeat="person in value.phonebook">
       <td >{{person.name}}</td>
       <td ng-repeat="phone in person.phones">{{phone.phone}}{{phone.number}}</td>
       <td >{{person.nickname}}</td>
    </tr>
       
       </tbody>
    </table>
            
</div>

Answer 2

give this a shot.

var app = angular.module("app",[]);

app.controller("ctrl" , function($scope){
  $scope.contacts = {
    "phonebook": [
      {
        "name": "John Snow",
        "phones": [
          {
            "phone": "home",
            "number": "1234"
          }
        ],
        "nickname": "bastard"
      },
      {
        "name": "Arya Stark",
        "phones": [
          {
            "phone": "cell",
            "number": "234"
          },
          {
            "phone": "work",
            "number": "345"
          },
          {
            "phone": "home",
            "number": "456"
          }
        ],
        "nickname": "no one"
      },
      {
        "name": "Theon",
        "phones": [
          {
            "phone": "fax",
            "number": "567"
          }
        ],
        "nickname": "Reek"
      },
      {
        "name": "Aemon",
        "phones": [
          {}
        ],
        "nickname": "maester"
      }
    ]
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" class="panel-group" id="accordion">
  
  <table>
    <thead>
    <tr>
      <td>name</td>
      <td>phone</td>
      <td>number</td>
      <td>nickname</td>
      </tr>
    </thead>
     <tbody  ng-repeat="(key,value) in contacts">
       
    <tr ng-repeat="person in value.phonebook">
       <td >{{person.name}}</td>
       <td ng-repeat="phone in person.phones">{{phone.phone}}{{phone.number}}</td>
       <td >{{person.nickname}}</td>
    </tr>
       
       </tbody>
    </table>
            
</div>

Answer 3

Answer №2

If you're looking to display data using ng-repeat, you will need to use nested repeats. One for looping through people and another for their respective phones.

The challenge lies in iterating twice while still generating table rows. Two techniques that can assist you are the ng-repeat-start and ng-repeat-end directives, as well as the ability to include directives within comments.

 tbody
   // ng-repeat-start='person in JSON.JSON.contact-info.phonebook'
   tr(ng-repeat='phone in person.phone')
     td {{ person.name }}
     td {{ phone.phone }}
     td {{ phone.number }}
     td {{ person.nick }}
   // ng-repeat-end

This code snippet will produce the following markup:

 <table>
  <tbody>
   <!-- ng-repeat-start='person in JSON.JSON.contact-info.phonebook'-->
   <tr ng-repeat="phone in person.phone">
    <td>{{ person.name }}</td>
    <td>{{ phone.phone }}</td>
    <td>{{ phone.number }}</td>
    <td>{{ person.nick }}</td>
   </tr>
   <!-- ng-repeat-end -->
  </tbody>
 </table>

An alternative approach could involve restructuring your original JSON data into a single-level list and employing a straightforward repeat loop.

 var allPhones = []

 _.each(json, (p) =>{ _.each(p.phone, (ph) => allPhones.push({
      name: p.name, 
      phone: ph.phone, 
      number: ph.number, 
      nick: p.nick})
 })

Once you have transformed the JSON, managing it with a simple ng-repeat on the Angular side should be feasible.

Answer 4

If you're looking to display data using ng-repeat, you will need to use nested repeats. One for looping through people and another for their respective phones.

The challenge lies in iterating twice while still generating table rows. Two techniques that can assist you are the ng-repeat-start and ng-repeat-end directives, as well as the ability to include directives within comments.

 tbody
   // ng-repeat-start='person in JSON.JSON.contact-info.phonebook'
   tr(ng-repeat='phone in person.phone')
     td {{ person.name }}
     td {{ phone.phone }}
     td {{ phone.number }}
     td {{ person.nick }}
   // ng-repeat-end

This code snippet will produce the following markup:

 <table>
  <tbody>
   <!-- ng-repeat-start='person in JSON.JSON.contact-info.phonebook'-->
   <tr ng-repeat="phone in person.phone">
    <td>{{ person.name }}</td>
    <td>{{ phone.phone }}</td>
    <td>{{ phone.number }}</td>
    <td>{{ person.nick }}</td>
   </tr>
   <!-- ng-repeat-end -->
  </tbody>
 </table>

An alternative approach could involve restructuring your original JSON data into a single-level list and employing a straightforward repeat loop.

 var allPhones = []

 _.each(json, (p) =>{ _.each(p.phone, (ph) => allPhones.push({
      name: p.name, 
      phone: ph.phone, 
      number: ph.number, 
      nick: p.nick})
 })

Once you have transformed the JSON, managing it with a simple ng-repeat on the Angular side should be feasible.

Create a table using Angular and Jade that iterates through nested JSON data using ng-repeat

Answer №1

Answer №2

Similar questions

Pattern Update Method: Iteratively updating each individual node

Incorporate a pause into a JavaScript function

Server error occurs in NodeJS site when the MongoDB database is not empty

AngularJS page views functionality

Tips for displaying the selectpicker once it is fully loaded

Element vanishing post JSON parsing

Transform an SVG string into an image source

Minimize or conceal iframe

I am experiencing difficulties saving the html2canvas image

There seems to be an issue with the functionality of the JavaScript Quiz as it is

I encountered an issue while using the tab bar feature in Bootstrap where I wasn't able to navigate back to the first tab or any

Using jQuery to send a post request to a PHP script using either JavaScript or PHP

Using Node.js and Less to dynamically select a stylesheet source depending on the subdomain

invoking a JavaScript function from .NET code-behind passing a specific value

ServiceNow allows users to access related tables and display them using JSON Web Services

Analyzing files that start with a period "."

Display or conceal div based on chosen options

Why isn't my redirection functioning properly?

Navigating with Google Maps version 3 directions

commitment to a cyclical data framework