Ways to showcase Firebase information with multi-tiered keys in an HTML table?

Question

Ways to showcase Firebase information with multi-tiered keys in an HTML table?

I am struggling to showcase information from a Firebase database with a multi-level key onto an HTML table using Angular.

Here is the structure of the data:

https://i.sstatic.net/qQ6RZ.jpg https://i.sstatic.net/PIaUZ.jpg

When attempting to display using ng-view, the outcome looks like this:

My Controller:

.controller('SalesCtrl', ['$scope', '$firebaseArray', '$firebaseObject', function($scope, $firebaseArray, $firebaseObject) {

    console.log('Sales Controller loaded..');
    var ref = firebase.database().ref("pelanggan/sales01");

    var list = $firebaseObject(ref);

    list.$loaded().then(function() {
        $scope.list = [];
        angular.forEach(list, function(value,key){
            $scope.list.push({ id: key, data: value})
        });
    });

I have experimented with different approaches like using ng-repeat and ng-repeat-start. However, I'm puzzled by why I am getting JSON format in my table.

My aim is to present the data in a format similar to the following:

-------------------------------------------------------------
| address             | email             | identity           | service     |
-------------------------------------------------------------
| jl.prapanca...      | <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="423a3a02272f232b2e6c212d2f">[email protected]</a> | 12345          | xxxxxxxx |
-------------------------------------------------------------

javascript angularjs firebase web-applications firebase-realtime-database

Answer 1

Answer №1

In my experience, using ng-repeat-start and ng-repeat-end in certain situations may not be the most suitable approach. When working with HTML tables, a simpler ng-repeat setup is often more effective.

<table>
  <thead>
    <tr>
      <td>alamat</td>
      <td>email</td>
      <td>identitas</td>
      <td>layanan</td>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in list">
      <td>{{item.alamat}}</td>
      <td>{{item.email}}</td>
      <td>{{item.identitas}}</td>
      <td>{{item.layanan}}</td>
    </tr>
  </tbody>
</table>

Referencing the Angular documentation for ng-repeat, it is clear that while ng-repeat-start and ng-repeat-end can be utilized for special cases in tables, they are more suited for <div> elements.

With data in JSON format, you can easily access and display the necessary properties manually.

If a dynamically rendered table is your goal, achieving an 'elegant' solution might prove challenging. Depending on your project requirements, opting for a straightforward ng-repeat setup could be the most straightforward approach.

Answer 2

In my experience, using ng-repeat-start and ng-repeat-end in certain situations may not be the most suitable approach. When working with HTML tables, a simpler ng-repeat setup is often more effective.

<table>
  <thead>
    <tr>
      <td>alamat</td>
      <td>email</td>
      <td>identitas</td>
      <td>layanan</td>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in list">
      <td>{{item.alamat}}</td>
      <td>{{item.email}}</td>
      <td>{{item.identitas}}</td>
      <td>{{item.layanan}}</td>
    </tr>
  </tbody>
</table>

Referencing the Angular documentation for ng-repeat, it is clear that while ng-repeat-start and ng-repeat-end can be utilized for special cases in tables, they are more suited for <div> elements.

With data in JSON format, you can easily access and display the necessary properties manually.

If a dynamically rendered table is your goal, achieving an 'elegant' solution might prove challenging. Depending on your project requirements, opting for a straightforward ng-repeat setup could be the most straightforward approach.

Answer 3

Answer №2

Here is my solution to the problem.

After making changes in my Controller:

var reference = firebase.database().ref().child("customer").child("sales01");
$scope.sales = $firebaseArray(reference); 
var data = $firebaseArray(reference); 
$scope.info = $scope.sales 
console.log("info: "+data.length);

And in the view:

<div class="row" ng-controller="SalesCtrl">
<!-- <div class="row" ng-controller="singleCustomerController"> -->

<div class="col-md-5" ng-show="addSalesFormShow">
    <h3>Add Sales</h3>
    <form ng-submit="addSales()">
      <div class="form-group">
        <label>Address</label>
        <input type="text" class="form-control" ng-model="address" placeholder="Address" required="">
      </div>

      <div class="form-group">
        <label>Email</label>
        <input type="email" class="form-control" ng-model="email" placeholder="Email" required="">
      </div>

      <div class="form-group">
        <label>Identity</label>
        <input type="text" class="form-control" ng-model="identity" placeholder="Identity" required="">
      </div>

      <div class="form-group">
        <label>lo</label>
        <input type="text" class="form-control" ng-model="lo" placeholder="lo" required="">
      </div>

      <div class="form-group">
        <label>lt</label>
        <input type="text" class="form-control" ng-model="lt" placeholder="lt" required="">
      </div>

      <div class="form-group">
        <label>Name</label>
        <input type="text" class="form-control" ng-model="name" placeholder="Name" required="">
      </div>

      <button type="submit" class="btn btn-success">Submit</button>
      <!-- <button type="cancel" class="btn btn-default" onclick='resetForm()'>Cancel</button> -->
    </form>
</div>

<div class="col-md-5" ng-show="editSalesFormShow">
    <h3>Edit Sales</h3>
    <form ng-submit="editSales()">
      <div class="form-group">
        <label>Address</label>
        <input type="text" class="form-control" ng-model="address" placeholder="Address" required="">
      </div>

      <div class="form-group">
        <label>Email</label>
        <input type="email" class="form-control" ng-model="email" placeholder="Email" required="">
      </div>

      <div class="form-group">
        <label>lo</label>
        <input type="text" class="form-control" ng-model="lo" placeholder="lo" required="">
      </div>

      <div class="form-group">
        <label>lt</label>
        <input type="text" class="form-control" ng-model="lt" placeholder="lt" required="">
      </div>

      <div class="form-group">
        <label>Name</label>
        <input type="text" class="form-control" ng-model="name" placeholder="Name" required="">
      </div>

      <div class="form-group">
        <label>Phone Number</label>
        <input type="text" class="form-control" ng-model="phone" placeholder="Phone" required="">
      </div>

      <button type="submit" class="btn btn-success">Submit</button>
      <button type="cancel" class="btn btn-danger">Cancel</button>
    </form>
</div>

<div class="col-md-7">
    <h3>Sales Information</h3>

    <table class="table table-striped hoverTable" data-ng-controller="SalesCtrl">
        <thead>
            <tr>
                <th>Address</th>
                <th>Email</th>
                <th>Identity</th>
                <th>lo</th>
                <th>lt</th>
                <th>Name</th>
                <th>Phone</th>
                <th></th>
            </tr>   
        </thead>
        <tbody data-ng-repeat="sales in sales">
             <tr>
                <td>{{sales.address}}</td>
                <td>{{sales.email}}</td>
                <td>{{sales.identity}}</td>
                <td>{{sales.lo}}</td>
                <td>{{sales.lt}}</td>
                <td>{{sales.name}}</td>
                <td>{{sales.phone}}</td>
                <td><a class="btn btn-success" ng-click="showEditSalesForm(sales)">Edit</a></td>
            <td><a class="btn btn-danger" ng-click="removeSales(sales)">Delete</a></td>
             </tr>
        </tbody>
    </table>
</div>

</div>

Answer 4

Here is my solution to the problem.

After making changes in my Controller:

var reference = firebase.database().ref().child("customer").child("sales01");
$scope.sales = $firebaseArray(reference); 
var data = $firebaseArray(reference); 
$scope.info = $scope.sales 
console.log("info: "+data.length);

And in the view:

<div class="row" ng-controller="SalesCtrl">
<!-- <div class="row" ng-controller="singleCustomerController"> -->

<div class="col-md-5" ng-show="addSalesFormShow">
    <h3>Add Sales</h3>
    <form ng-submit="addSales()">
      <div class="form-group">
        <label>Address</label>
        <input type="text" class="form-control" ng-model="address" placeholder="Address" required="">
      </div>

      <div class="form-group">
        <label>Email</label>
        <input type="email" class="form-control" ng-model="email" placeholder="Email" required="">
      </div>

      <div class="form-group">
        <label>Identity</label>
        <input type="text" class="form-control" ng-model="identity" placeholder="Identity" required="">
      </div>

      <div class="form-group">
        <label>lo</label>
        <input type="text" class="form-control" ng-model="lo" placeholder="lo" required="">
      </div>

      <div class="form-group">
        <label>lt</label>
        <input type="text" class="form-control" ng-model="lt" placeholder="lt" required="">
      </div>

      <div class="form-group">
        <label>Name</label>
        <input type="text" class="form-control" ng-model="name" placeholder="Name" required="">
      </div>

      <button type="submit" class="btn btn-success">Submit</button>
      <!-- <button type="cancel" class="btn btn-default" onclick='resetForm()'>Cancel</button> -->
    </form>
</div>

<div class="col-md-5" ng-show="editSalesFormShow">
    <h3>Edit Sales</h3>
    <form ng-submit="editSales()">
      <div class="form-group">
        <label>Address</label>
        <input type="text" class="form-control" ng-model="address" placeholder="Address" required="">
      </div>

      <div class="form-group">
        <label>Email</label>
        <input type="email" class="form-control" ng-model="email" placeholder="Email" required="">
      </div>

      <div class="form-group">
        <label>lo</label>
        <input type="text" class="form-control" ng-model="lo" placeholder="lo" required="">
      </div>

      <div class="form-group">
        <label>lt</label>
        <input type="text" class="form-control" ng-model="lt" placeholder="lt" required="">
      </div>

      <div class="form-group">
        <label>Name</label>
        <input type="text" class="form-control" ng-model="name" placeholder="Name" required="">
      </div>

      <div class="form-group">
        <label>Phone Number</label>
        <input type="text" class="form-control" ng-model="phone" placeholder="Phone" required="">
      </div>

      <button type="submit" class="btn btn-success">Submit</button>
      <button type="cancel" class="btn btn-danger">Cancel</button>
    </form>
</div>

<div class="col-md-7">
    <h3>Sales Information</h3>

    <table class="table table-striped hoverTable" data-ng-controller="SalesCtrl">
        <thead>
            <tr>
                <th>Address</th>
                <th>Email</th>
                <th>Identity</th>
                <th>lo</th>
                <th>lt</th>
                <th>Name</th>
                <th>Phone</th>
                <th></th>
            </tr>   
        </thead>
        <tbody data-ng-repeat="sales in sales">
             <tr>
                <td>{{sales.address}}</td>
                <td>{{sales.email}}</td>
                <td>{{sales.identity}}</td>
                <td>{{sales.lo}}</td>
                <td>{{sales.lt}}</td>
                <td>{{sales.name}}</td>
                <td>{{sales.phone}}</td>
                <td><a class="btn btn-success" ng-click="showEditSalesForm(sales)">Edit</a></td>
            <td><a class="btn btn-danger" ng-click="removeSales(sales)">Delete</a></td>
             </tr>
        </tbody>
    </table>
</div>

</div>

Ways to showcase Firebase information with multi-tiered keys in an HTML table?

Answer №1

Answer №2

Similar questions

Learn how to implement Redux login to display the first letter of a user's name and their login name simultaneously

Enhancing Rails: Tailoring the flash message to suit individual needs

Error encountered in React while using an object in useState: TypeError - Unable to access property 'name' of undefined

What is the best way to apply "display: none;" on a span element nested within a title attribute?

Utilizing the JavaScript map method to structure API response data

Discovering the method for accessing nested JSON data through ng-repeat in AngularJS

Change the background color of the MUI ToggleButton that is currently selected

Dealing with errors in React by utilizing the setState function

What is the process for requesting a specific condition using jscript and jquery?

What is the best way to manage classNames dynamically in React with Material-UI?

Regularly switch up the background image using the same URL

Utilizing nested styling with material-ui v1's withStyles feature

unable to transfer Vuex store information to the graph

Unable to retrieve post information from Angular using PHP

What method is the most effective for retrieving the prior slug name in NextJS?

The issue with jqTransform not displaying the select box value on a hidden contact form

The Vue mixin properties are devoid of content and lack reactivity

The initial item in a pagination/list is double-parsed on an AJAX website using Selenium 3.0.2, Firefox webdriver, and BeautifulSoup 4.5.1

specialized html elements within data-ng-options

Retrieving the data from a Material UI Slider control