Determine the total number of arrays present in the JSON data

I'm currently working on a straightforward AngularJS project, and here's the code I have so far:

This is my view:

<tr ng-repeat="metering in meterings">
 <td>1</td> 
 <td>{{metering.d.SerialNumber}}</td>                                         
</tr>

This is my controller:

angular.module('MainCtrl', []).controller('MainController', function($scope,$http,Nerds) { 

    Nerds.get()
        .success(function(data){
            $scope.meterings = data;
        });  
});

This is my services:

angular.module('NerdService', []).factory('Nerds', ['$http', function($http) {
    return{
        get : function(){
            return $http.get('http://amrse.net/list.json');  //Let's pretend that this path is works fine
        }
    } 
}]);

My questions are: 1. How can I make the number dynamically change in this table (in the view)? <td>1</td>

  1. I would like to calculate the total of the array that is repeated in
    <td>{{metering.d.SerialNumber}}</td>
    . Something like:
    Total : {{ metering.getTotal() }}
    . How can I achieve that?

Answer №1

PROBLEM RESOLVED!

To fix the issue, you can insert the following code snippets:

<td>{{$index}}</td> 
<td>{{meterings.length}}</td>

Your help is greatly appreciated! :)

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

Storing a multi-dimensional array in PHP efficiently

My PHP data consists of user limits: $userLimit = array( "default" => array( "playlistLimit" => 1, "mediaLimit" => 2, ), "editor" => array( "playlist ...

Upon completing the installation of Gulp, an error message stating "gulp command not found" may be displayed

Once I installed gulp.js using npm, an error message saying no command 'gulp' found popped up when trying to run the gulp command from the same directory it was installed in. Upon checking the node_modules/.bin/ directory, the gulp executable is ...

Show drawer when modal is open in React Native

Currently, I am working on a project in react-native and facing an issue where the modal is appearing over the drawer navigator. Despite trying to adjust the zIndex property, it has not been effective. Details of my modal: <Modal visible={isVisible} ...

At what point does the promise's then function transition to being either fulfilled or rejected?

When dealing with promises in JavaScript, the then() method returns a promise that can be in one of three states: pending, fulfilled, or rejected. You can create a promise using the resolved and rejected methods to indicate when it should be fulfilled or r ...

Managing media file transfers using multer and mongodb in a Node.js environment

As I work on developing a blog-style application for a business website, I have successfully implemented a login system and a basic blog structure. My current focus is on enabling users to upload images along with their blog posts. At the moment, I am trou ...

Adding information into MySQL using PHP with a nested foreach loop

I am currently working on populating a database with data retrieved from a JSON file. The data is in the form of a multidimensional array which I am processing using a foreach loop. While attempting to insert this data into a MySQL database, I encountered ...

Monitoring Object Changes in Angular 4

ETA: I am aware of different methods for monitoring my form for alterations. However, that is not the focus of my inquiry. As indicated by the title, my question pertains to observing changes within an object. The application displayed below is solely for ...

Issue (@websanova/vue-auth): http plugin has not been properly configured in drivers/http/axios.js

I've been working on integrating vue-auth into my laravel-vue application, but I'm encountering some console errors: Error (@websanova/vue-auth): drivers/http/axios.js: http plugin has not been set. Uncaught TypeError: this.plugins.http is u ...

Error message in Fb Messenger: Quick replies data is not valid

I encountered the following error: { message: '(#100) Invalid data', type: 'OAuthException', code: 100, error_subcode: 2018032, fbtrace_id: 'H3qnFWWxE9u' } } while attempting to send this to Facebook m ...

"Create a new row in the list by selecting an option from the drop-down

I'm experimenting with the following scenario. There is a function that reveals a hidden list based on a dropdown selection. To see it in action, please click here. What I am aiming to achieve is for Option1 to display the content of #List-Option1 ...

How do I include an icon on the far left of my NavBar menu? I'm having trouble figuring out how to add an icon to the header NavBar

How can I add an icon to the left of my NavBar header? I am struggling with adding an icon on the far left side of my NavBar. The NavBar is a custom class from NavBar.js. I want to include an icon in this bar on the leftmost side. I have already added b ...

Exploring the process of transferring a variable from Frontend to Backend via a GET API in ReactJS with an Express API

When working with my freight Shipment table, I need to access the email of the logged-in user in order to perform some frontend tasks. However, I am struggling to retrieve this information using the Axios.get() method and use it to query my MySQL DB. In t ...

sorting in React table not functioning properly for computed column

I have a column titled 'EV/Resource ($ per oz)' that appears to not sort correctly in my react table. Instead of sorting in ascending or descending order, it randomizes the table sort. I'm unsure if I am handling this as a "calculated column ...

Navigating the intricacies of passing a complex C# object through FromQuery

I have a client-side code snippet showcasing an object setup as follows: { "selectedItems": [ 4016, 3937 ], "selectedStatuses": [], "search": "foo" } My intention is to match this structure with a C# DTO: public class FilterModel { p ...

Disappearing markers issue in Openlayers when zooming

I am trying to ensure that markers on the map do not get erased when zooming in or out. Here is my script: JS $(document).ready(function() { //initialization var map; var markerPosition; // Marker position var options = { restrictedE ...

Using Vue.js for handling events with the passing method

As a newcomer to Vue.js, I am currently trying to understand method event handling. My goal is to read a barcode using input from a web camera and display its raw content. The function works perfectly if I just render the raw content. However, when I att ...

Tips for transferring information to an input field's value

There's an input box with an empty value that needs to be filled with data. <input type="text" value="" class="box"> $('.skills-tags').on('click', function(){ var value = $(".skills-tags").val(); $('.label-pr ...

Getting the button element in Angular when submitting a form

My web page contains multiple forms, each with a set of buttons. I want to incorporate a loading spinner on buttons after they are clicked. When using a regular click event, I am able to pass the button element: HTML <button #cancelButton class="butto ...

Creating a water vessel design using CSS

Despite going through the JS tutorial, I still struggle with it and need some assistance. I believe using a jsfiddle would be helpful. I am attempting to use JS to create a small box that changes color from green to empty based on the fullness of a "wate ...

Instructions for implementing onclick functionality on an iframe element

Is it possible to use the onclick event in an iframe tag to call a JavaScript function? I have integrated a Facebook like button on my website using an iframe code. When a user clicks on the like button, I would like them to be redirected to a 'thank ...